From feb035485f1dcef650f168e1da2943dc767b12fc Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 29 Jun 2020 10:55:08 +0200 Subject: [PATCH] Add reusable block icon. --- packages/components/src/dropdown-menu/style.scss | 11 ++++++----- packages/components/src/menu-group/style.scss | 2 +- packages/components/src/menu-item/index.js | 13 ++++++++----- packages/components/src/menu-item/style.scss | 3 ++- .../components/src/menu-items-choice/style.scss | 6 ++---- .../reusable-block-convert-button.js | 2 ++ packages/icons/src/index.js | 3 ++- packages/icons/src/library/reusable-block.js | 12 ++++++++++++ 8 files changed, 35 insertions(+), 17 deletions(-) create mode 100644 packages/icons/src/library/reusable-block.js diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index 2526b00b61e2d..2308403bb71cc 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -53,16 +53,17 @@ .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 }); } } .components-menu-group { - padding: $grid-unit-15; + padding: $grid-unit-15 $grid-unit-10; margin-top: 0; margin-bottom: 0; margin-left: -$grid-unit-15; @@ -80,7 +81,7 @@ .components-menu-group + .components-menu-group { margin-top: 0; border-top: $border-width solid $gray-400; - padding: $grid-unit-15; + padding: $grid-unit-15 $grid-unit-10; .is-alternate & { border-color: $gray-900; diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index 72fd95d66588a..c2228944cdd2d 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -5,7 +5,7 @@ } .components-menu-group__label { - padding: 0; + padding: 0 $grid-unit-10; 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..c80c113827971 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..feecf4b4ba3c9 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -8,7 +8,8 @@ .components-menu-items__item-icon, svg.components-menu-items__item-icon, > span > svg { - margin-right: $grid-unit-10; + margin-right: 0; + margin-left: auto; } .components-menu-items__item-icon { 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/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 30b12d689a688..134b1318792c5 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'; @@ -127,7 +128,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'; @@ -136,6 +136,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/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;