From 3e57ffdb824b0a313cfbebf812db5ce1bb068d2a Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Thu, 3 Sep 2020 08:38:53 +0200 Subject: [PATCH] Add reusable block icon. (#23552) * Add reusable block icon. * Move external link icon to the right. Needs a follow up in one of the PRs in #24539. * Update checkmark. Fixes #23185. * Allow both shortcuts and icons. * Update snapshots. * Optically balance more. * Add download icon, use for "Export". * Update snaps again. --- .../test/__snapshots__/control.js.snap | 2 +- .../src/components/preview-options/style.scss | 4 +- .../test/__snapshots__/index.js.snap | 6 +-- .../components/src/dropdown-menu/style.scss | 11 ++--- packages/components/src/menu-group/style.scss | 3 +- packages/components/src/menu-item/index.js | 3 +- packages/components/src/menu-item/style.scss | 15 +++--- .../test/__snapshots__/index.js.snap | 48 ++++++++++--------- .../src/menu-items-choice/style.scss | 6 +-- .../src/components/device-preview/index.js | 2 +- .../src/components/header/style.scss | 2 +- .../enable-custom-fields.js.snap | 4 +- packages/edit-site/src/plugins/index.js | 3 +- .../reusable-block-convert-button.js | 2 + packages/icons/src/index.js | 4 +- packages/icons/src/library/check.js | 2 +- packages/icons/src/library/download.js | 12 +++++ packages/icons/src/library/reusable-block.js | 12 +++++ 18 files changed, 83 insertions(+), 58 deletions(-) create mode 100644 packages/icons/src/library/download.js create mode 100644 packages/icons/src/library/reusable-block.js diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 7c4d34cdb3a88..e8346eb4abace 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -66,7 +66,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss index b9afabcce40f1..5fa1cd0253718 100644 --- a/packages/block-editor/src/components/preview-options/style.scss +++ b/packages/block-editor/src/components/preview-options/style.scss @@ -28,9 +28,7 @@ } .components-menu-group + .components-menu-group { - padding: $grid-unit-10 $grid-unit-15; - margin-left: -$grid-unit-15; - margin-right: -$grid-unit-15; + padding: $grid-unit-10; } } diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap index 52f9d901b71ae..b8d2298cd048d 100644 --- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap @@ -357,7 +357,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = ` xmlns="http://www.w3.org/2000/svg" > } @@ -380,10 +380,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 2526b00b61e2d..ba2b12a7f6000 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -53,11 +53,12 @@ .components-menu-item__button.components-button { min-height: $button-size; height: auto; - padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10; text-align: left; + padding-left: $grid-unit-10; + padding-right: $grid-unit-10; - &.has-icon { - padding-left: $grid-unit-10; + .components-menu-item__info-wrapper { + max-width: calc(100% - #{ $button-size-small + $grid-unit-10 }); } } @@ -87,7 +88,3 @@ } } } - -.components-dropdown-menu__menu.no-icons .components-menu-item__button.components-button { - padding: 0 $grid-unit-15; -} diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index 72fd95d66588a..10a54c7324f26 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -5,7 +5,8 @@ } .components-menu-group__label { - padding: 0; + padding: 0 $grid-unit-10; + margin-top: $grid-unit-05; margin-bottom: $grid-unit-15; color: $gray-700; text-transform: uppercase; diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js index ccd02dbe8af02..d685606102669 100644 --- a/packages/components/src/menu-item/index.js +++ b/packages/components/src/menu-item/index.js @@ -14,6 +14,7 @@ import { cloneElement, forwardRef } from '@wordpress/element'; */ import Shortcut from '../shortcut'; import Button from '../button'; +import Icon from '../icon'; /** * Renders a generic menu item for use inside the more menu. @@ -63,7 +64,6 @@ export function MenuItem( return ( ); } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index de8b24b397bff..29aa0570d28a3 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -2,19 +2,16 @@ .components-menu-item__button.components-button { width: 100%; - // Target plugin icons that can have arbitrary classes by using an aggressive selector. - // @todo: is this still necessary? - .dashicon, - .components-menu-items__item-icon, - svg.components-menu-items__item-icon, - > span > svg { - margin-right: $grid-unit-10; - } - .components-menu-items__item-icon { + margin-right: -2px; // This optically balances the icon. + margin-left: auto; display: inline-block; flex: 0 0 auto; } + + .components-menu-item__shortcut + .components-menu-items__item-icon { + margin-left: $grid-unit-10; + } } .components-menu-item__info-wrapper { diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap index 7f52fcbf03f5c..e2a9fb4bd470b 100644 --- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap +++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap @@ -4,17 +4,6 @@ exports[`MenuItem should match snapshot when all props provided 1`] = ` - - - } onClick={[Function]} role="menuitemcheckbox" > @@ -23,6 +12,19 @@ exports[`MenuItem should match snapshot when all props provided 1`] = ` className="components-menu-item__shortcut" shortcut="mod+shift+alt+w" /> + + + + } + /> `; @@ -50,17 +52,6 @@ exports[`MenuItem should match snapshot when info is provided 1`] = ` exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = ` - - - } onClick={[Function]} role="menuitem" > @@ -69,6 +60,19 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally className="components-menu-item__shortcut" shortcut="mod+shift+alt+w" /> + + + + } + /> `; diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss index 182f898471939..5de8363be0d6e 100644 --- a/packages/components/src/menu-items-choice/style.scss +++ b/packages/components/src/menu-items-choice/style.scss @@ -1,12 +1,10 @@ .components-menu-items-choice, .components-menu-items-choice.components-button { - padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10; - svg { - margin-right: $grid-unit-10; + margin-right: $grid-unit-15; } &.has-icon { - padding-left: $grid-unit-10; + padding-left: $grid-unit-15; } } diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js index 07142b086b3c5..742790caf0a24 100644 --- a/packages/edit-post/src/components/device-preview/index.js +++ b/packages/edit-post/src/components/device-preview/index.js @@ -47,8 +47,8 @@ export default function DevicePreview() { forcePreviewLink={ isSaving ? null : undefined } textContent={ <> - { __( 'Preview in new tab' ) } + } /> diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 931dcde9c9e39..54d48cd2841e1 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -107,7 +107,7 @@ justify-content: flex-start; svg { - margin-right: $grid-unit-10; + margin-left: auto; } } diff --git a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap index eb27081e91dc8..018eb9e7c5f97 100644 --- a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap +++ b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap @@ -32,7 +32,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation xmlns="http://www.w3.org/2000/svg" > @@ -90,7 +90,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/edit-site/src/plugins/index.js b/packages/edit-site/src/plugins/index.js index 436907cfdc697..f967726b94fcb 100644 --- a/packages/edit-site/src/plugins/index.js +++ b/packages/edit-site/src/plugins/index.js @@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { addQueryArgs } from '@wordpress/url'; import apiFetch from '@wordpress/api-fetch'; +import { download } from '@wordpress/icons'; /** * Internal dependencies @@ -24,7 +25,7 @@ registerPlugin( 'edit-site', { apiFetch( { path: '/__experimental/edit-site/v1/export', diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js index 5eaf29ce6b97f..ea255bbc0d064 100644 --- a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js +++ b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js @@ -4,6 +4,7 @@ import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks'; import { BlockSettingsMenuControls } from '@wordpress/block-editor'; import { MenuItem } from '@wordpress/components'; +import { reusableBlock } from '@wordpress/icons'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -68,6 +69,7 @@ export default function ReusableBlockConvertButton( { clientIds } ) { { ( { onClose } ) => ( { convertBlockToReusable( clientIds ); onClose(); diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 820f90ca42d3d..0318d3310a224 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -15,6 +15,7 @@ export { default as audio } from './library/audio'; export { default as backup } from './library/backup'; export { default as blockDefault } from './library/block-default'; export { default as blockTable } from './library/block-table'; +export { default as box } from './library/box'; export { default as brush } from './library/brush'; export { default as button } from './library/button'; export { default as calendar } from './library/calendar'; @@ -50,6 +51,7 @@ export { default as currencyEuro } from './library/currency-euro'; export { default as currencyPound } from './library/currency-pound'; export { default as desktop } from './library/desktop'; export { default as dragHandle } from './library/drag-handle'; +export { default as download } from './library/download'; export { default as edit } from './library/edit'; export { default as external } from './library/external'; export { default as file } from './library/file'; @@ -128,7 +130,6 @@ export { default as postFeaturedImage } from './library/post-featured-image'; export { default as postList } from './library/post-list'; export { default as postTitle } from './library/post-title'; export { default as preformatted } from './library/preformatted'; -export { default as box } from './library/box'; export { default as pullLeft } from './library/pull-left'; export { default as pullRight } from './library/pull-right'; export { default as pullquote } from './library/pullquote'; @@ -137,6 +138,7 @@ export { default as receipt } from './library/receipt'; export { default as redo } from './library/redo'; export { default as replace } from './library/replace'; export { default as resizeCornerNE } from './library/resize-corner-n-e'; +export { default as reusableBlock } from './library/reusable-block'; export { default as rotateLeft } from './library/rotate-left'; export { default as rotateRight } from './library/rotate-right'; export { default as rss } from './library/rss'; diff --git a/packages/icons/src/library/check.js b/packages/icons/src/library/check.js index fa99451dda3a2..c4cca5af773b3 100644 --- a/packages/icons/src/library/check.js +++ b/packages/icons/src/library/check.js @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; const check = ( - + ); diff --git a/packages/icons/src/library/download.js b/packages/icons/src/library/download.js new file mode 100644 index 0000000000000..56a9b00760d84 --- /dev/null +++ b/packages/icons/src/library/download.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const download = ( + + + +); + +export default download; diff --git a/packages/icons/src/library/reusable-block.js b/packages/icons/src/library/reusable-block.js new file mode 100644 index 0000000000000..58637055f469d --- /dev/null +++ b/packages/icons/src/library/reusable-block.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const reusableBlock = ( + + + +); + +export default reusableBlock;