diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 4f3b9104e1928..40dfa28c0ce88 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -8,20 +8,21 @@ import { find } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; +import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; const DEFAULT_ALIGNMENT_CONTROLS = [ { - icon: 'editor-alignleft', + icon: alignLeft, title: __( 'Align text left' ), align: 'left', }, { - icon: 'editor-aligncenter', + icon: alignCenter, title: __( 'Align text center' ), align: 'center', }, { - icon: 'editor-alignright', + icon: alignRight, title: __( 'Align text right' ), align: 'right', }, diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index 87dc64ceda18f..8ca05b1361631 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap @@ -34,7 +34,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` Array [ Object { "align": "left", - "icon": "editor-alignleft", + "icon": + + , "isActive": true, "onClick": [Function], "role": "menuitemradio", @@ -42,7 +49,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, Object { "align": "center", - "icon": "editor-aligncenter", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -50,7 +64,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, Object { "align": "right", - "icon": "editor-alignright", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -58,7 +79,16 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, ] } - icon="editor-alignleft" + icon={ + + + + } isCollapsed={true} label="Change text alignment" /> diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js index da5dbb7317a3a..2f559c5f94602 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -5,6 +5,13 @@ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { + alignBlockCenter, + alignBlockFullWidth, + alignBlockLeft, + alignBlockRight, + alignBlockWide, +} from '@wordpress/icons'; /** * Internal dependencies @@ -13,23 +20,23 @@ import { withBlockEditContext } from '../block-edit/context'; const BLOCK_ALIGNMENTS_CONTROLS = { left: { - icon: 'align-left', + icon: alignBlockLeft, title: __( 'Align left' ), }, center: { - icon: 'align-center', + icon: alignBlockCenter, title: __( 'Align center' ), }, right: { - icon: 'align-right', + icon: alignBlockRight, title: __( 'Align right' ), }, wide: { - icon: 'align-wide', + icon: alignBlockWide, title: __( 'Wide width' ), }, full: { - icon: 'align-full-width', + icon: alignBlockFullWidth, title: __( 'Full width' ), }, }; diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap index ebc927c8eb816..10e88985b76d5 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap @@ -5,21 +5,42 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` controls={ Array [ Object { - "icon": "align-left", + "icon": + + , "isActive": true, "onClick": [Function], "role": "menuitemradio", "title": "Align left", }, Object { - "icon": "align-center", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", "title": "Align center", }, Object { - "icon": "align-right", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -27,7 +48,16 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` }, ] } - icon="align-left" + icon={ + + + + } isCollapsed={true} label="Change alignment" /> diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js index c7a208006849e..b92ab806746ec 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js @@ -25,7 +25,7 @@ describe( 'BlockAlignmentToolbar', () => { } ); test( 'should call onChange with undefined, when the control is already active', () => { - const activeControl = controls.find( ( { icon } ) => icon === `align-${ alignment }` ); + const activeControl = controls.find( ( { title } ) => title === 'Align left' ); activeControl.onClick(); expect( activeControl.isActive ).toBe( true ); @@ -34,7 +34,7 @@ describe( 'BlockAlignmentToolbar', () => { } ); test( 'should call onChange with alignment value when the control is inactive', () => { - const inactiveCenterControl = controls.find( ( { icon } ) => icon === 'align-center' ); + const inactiveCenterControl = controls.find( ( { title } ) => title === 'Align center' ); inactiveCenterControl.onClick(); expect( inactiveCenterControl.isActive ).toBe( false ); diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js index 46580878ff684..4be16304d9937 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js @@ -10,6 +10,7 @@ import { ToolbarButton } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { trash } from '@wordpress/icons'; /** * Internal dependencies @@ -39,7 +40,7 @@ const BlockMobileToolbar = ( { ) } onClick={ onDelete } - icon="trash" + icon={ trash } extraProps={ { hint: __( 'Double tap to remove the block' ) } } /> diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js index 2a15b8a6159d5..f3b575bd57a86 100644 --- a/packages/block-editor/src/components/block-mover/icons.js +++ b/packages/block-editor/src/components/block-mover/icons.js @@ -1,13 +1,7 @@ /** * WordPress dependencies */ -import { Path, Polygon, SVG } from '@wordpress/components'; - -export const upArrow = ( - - - -); +import { Path, SVG } from '@wordpress/components'; export const leftArrow = ( @@ -15,12 +9,6 @@ export const leftArrow = ( ); -export const downArrow = ( - - - -); - export const rightArrow = ( diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 84475b9c60b98..ea5bb8c36d8fe 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -18,7 +18,8 @@ import { withInstanceId, compose } from '@wordpress/compose'; * Internal dependencies */ import { getBlockMoverDescription } from './mover-description'; -import { leftArrow, rightArrow, upArrow, downArrow, dragHandle } from './icons'; +import { leftArrow, rightArrow, dragHandle } from './icons'; +import { chevronUp, chevronDown } from '@wordpress/icons'; import BlockDraggable from '../block-draggable'; export class BlockMover extends Component { @@ -56,12 +57,12 @@ export class BlockMover extends Component { if ( orientation === 'horizontal' ) { return isRTL ? rightArrow : leftArrow; } - return upArrow; + return chevronUp; } else if ( moveDirection === 'down' ) { if ( orientation === 'horizontal' ) { return isRTL ? leftArrow : rightArrow; } - return downArrow; + return chevronDown; } return null; }; diff --git a/packages/block-editor/src/components/block-mover/test/index.js b/packages/block-editor/src/components/block-mover/test/index.js index 5437249304829..e413dc6e8680b 100644 --- a/packages/block-editor/src/components/block-mover/test/index.js +++ b/packages/block-editor/src/components/block-mover/test/index.js @@ -3,11 +3,15 @@ */ import { shallow } from 'enzyme'; +/** + * WordPress dependencies + */ +import { chevronUp, chevronDown } from '@wordpress/icons'; + /** * Internal dependencies */ import { BlockMover } from '../'; -import { upArrow, downArrow } from '../icons'; describe( 'BlockMover', () => { describe( 'basic rendering', () => { @@ -45,7 +49,7 @@ describe( 'BlockMover', () => { className: 'block-editor-block-mover__control', onClick: undefined, label: 'Move up', - icon: upArrow, + icon: chevronUp, 'aria-disabled': undefined, 'aria-describedby': 'block-editor-block-mover__up-description-1', } ); @@ -53,7 +57,7 @@ describe( 'BlockMover', () => { className: 'block-editor-block-mover__control', onClick: undefined, label: 'Move down', - icon: downArrow, + icon: chevronDown, 'aria-disabled': undefined, 'aria-describedby': 'block-editor-block-mover__down-description-1', } ); diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index c73d3ca615eea..375c585a5d412 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -14,6 +14,7 @@ import { MenuItem, } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; +import { trash } from '@wordpress/icons'; /** * Internal dependencies @@ -120,7 +121,7 @@ export function BlockSettingsMenu( { clientIds } ) { { ! isLocked && ( { _n( 'Remove Block', 'Remove Blocks', count ) } diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index 92712c7d2b708..33c0966e8376a 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -26,7 +26,7 @@ import { ToggleControl, ToolbarGroup, } from '@wordpress/components'; -import { table as icon } from '@wordpress/icons'; +import { table as icon, alignLeft, alignRight, alignCenter } from '@wordpress/icons'; /** * Internal dependencies @@ -68,17 +68,17 @@ const BACKGROUND_COLORS = [ const ALIGNMENT_CONTROLS = [ { - icon: 'editor-alignleft', + icon: alignLeft, title: __( 'Align Column Left' ), align: 'left', }, { - icon: 'editor-aligncenter', + icon: alignCenter, title: __( 'Align Column Center' ), align: 'center', }, { - icon: 'editor-alignright', + icon: alignRight, title: __( 'Align Column Right' ), align: 'right', }, diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js index af8cbe38a6dad..e1e17a8a36aa7 100644 --- a/packages/components/src/panel/body.js +++ b/packages/components/src/panel/body.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Component, forwardRef } from '@wordpress/element'; -import { G, Path, SVG } from '@wordpress/primitives'; +import { chevronUp, chevronDown } from '@wordpress/icons'; /** * Internal dependencies @@ -56,16 +56,7 @@ export class PanelBody extends Component { repaints the whole element, so this wrapping span hides that. */ } { title } { icon && } diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js index 78d4774afccd8..180df741c946b 100644 --- a/packages/components/src/panel/test/body.js +++ b/packages/components/src/panel/test/body.js @@ -23,7 +23,7 @@ describe( 'PanelBody', () => { expect( panelBody.state( 'opened' ) ).toBe( true ); expect( button.prop( 'onClick' ) ).toBe( panelBody.instance().toggle ); expect( button.childAt( 0 ).name() ).toBe( 'span' ); - expect( button.childAt( 0 ).childAt( 0 ).name() ).toBe( 'SVG' ); + expect( button.childAt( 0 ).childAt( 0 ).name() ).toBe( 'Icon' ); expect( button.childAt( 1 ).text() ).toBe( 'Some Text' ); } ); diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap index c4c84425a8ba5..5b0fde0fa5a8a 100644 --- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap index 9b509415dd4cd..46104f10b65b4 100644 --- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 8f9e9f62e638e..f2d135eb9ae8a 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -1,12 +1,22 @@ export { default as Icon } from './icon'; +export { default as alignBlockCenter } from './library/align-block-center'; +export { default as alignBlockFullWidth } from './library/align-block-full-width'; +export { default as alignBlockLeft } from './library/align-block-left'; +export { default as alignBlockRight } from './library/align-block-right'; +export { default as alignBlockWide } from './library/align-block-wide'; +export { default as alignCenter } from './library/align-center'; export { default as alignJustify } from './library/align-justify'; +export { default as alignLeft } from './library/align-left'; +export { default as alignRight } from './library/align-right'; export { default as archive } from './library/archive'; export { default as audio } from './library/audio'; export { default as button } from './library/button'; export { default as calendar } from './library/calendar'; export { default as category } from './library/category'; export { default as check } from './library/check'; +export { default as chevronDown } from './library/chevron-down'; +export { default as chevronUp } from './library/chevron-up'; export { default as classic } from './library/classic'; export { default as code } from './library/code'; export { default as column } from './library/column'; @@ -40,6 +50,7 @@ export { default as shortcode } from './library/shortcode'; export { default as table } from './library/table'; export { default as tag } from './library/tag'; export { default as title } from './library/title'; +export { default as trash } from './library/trash'; export { default as verse } from './library/verse'; export { default as video } from './library/video'; export { default as widget } from './library/widget'; diff --git a/packages/icons/src/library/align-block-center.js b/packages/icons/src/library/align-block-center.js new file mode 100644 index 0000000000000..8a19846a797d8 --- /dev/null +++ b/packages/icons/src/library/align-block-center.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignBlockCenter = ( + + + +); + +export default alignBlockCenter; diff --git a/packages/icons/src/library/align-block-full-width.js b/packages/icons/src/library/align-block-full-width.js new file mode 100644 index 0000000000000..6178c2682bfe5 --- /dev/null +++ b/packages/icons/src/library/align-block-full-width.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignBlockFullWidth = ( + + + +); + +export default alignBlockFullWidth; diff --git a/packages/icons/src/library/align-block-left.js b/packages/icons/src/library/align-block-left.js new file mode 100644 index 0000000000000..0ef35aedf0199 --- /dev/null +++ b/packages/icons/src/library/align-block-left.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignBlockLeft = ( + + + +); + +export default alignBlockLeft; diff --git a/packages/icons/src/library/align-block-right.js b/packages/icons/src/library/align-block-right.js new file mode 100644 index 0000000000000..226738aa63f64 --- /dev/null +++ b/packages/icons/src/library/align-block-right.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignBlockRight = ( + + + +); + +export default alignBlockRight; diff --git a/packages/icons/src/library/align-block-wide.js b/packages/icons/src/library/align-block-wide.js new file mode 100644 index 0000000000000..71b434627d53f --- /dev/null +++ b/packages/icons/src/library/align-block-wide.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignBlockWide = ( + + + +); + +export default alignBlockWide; diff --git a/packages/icons/src/library/align-center.js b/packages/icons/src/library/align-center.js new file mode 100644 index 0000000000000..4b95f643d1061 --- /dev/null +++ b/packages/icons/src/library/align-center.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignCenter = ( + + + +); + +export default alignCenter; + diff --git a/packages/icons/src/library/align-left.js b/packages/icons/src/library/align-left.js new file mode 100644 index 0000000000000..a34551b910bcf --- /dev/null +++ b/packages/icons/src/library/align-left.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignLeft = ( + + + +); + +export default alignLeft; + diff --git a/packages/icons/src/library/align-right.js b/packages/icons/src/library/align-right.js new file mode 100644 index 0000000000000..9398e65c030d9 --- /dev/null +++ b/packages/icons/src/library/align-right.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignRight = ( + + + +); + +export default alignRight; + diff --git a/packages/icons/src/library/chevron-down.js b/packages/icons/src/library/chevron-down.js new file mode 100644 index 0000000000000..28fc23bb2cf3b --- /dev/null +++ b/packages/icons/src/library/chevron-down.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const chevronDown = ( + + + +); + +export default chevronDown; diff --git a/packages/icons/src/library/chevron-up.js b/packages/icons/src/library/chevron-up.js new file mode 100644 index 0000000000000..4ed1985d8fdcd --- /dev/null +++ b/packages/icons/src/library/chevron-up.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const chevronUp = ( + + + +); + +export default chevronUp; diff --git a/packages/icons/src/library/trash.js b/packages/icons/src/library/trash.js new file mode 100644 index 0000000000000..56c011563ac35 --- /dev/null +++ b/packages/icons/src/library/trash.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const trash = ( + + + +); + +export default trash; + diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index c5e1e1ac918fc..16717c243e8b0 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -3883,23 +3883,15 @@ exports[`Storyshots Components/Panel Default 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + My Block Settings @@ -3944,23 +3936,15 @@ exports[`Storyshots Components/Panel Multiple Bodies 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + First Settings @@ -3991,23 +3975,15 @@ exports[`Storyshots Components/Panel Multiple Bodies 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + Second Settings @@ -4047,23 +4023,15 @@ exports[`Storyshots Components/Panel With Icon 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + My Block Settings