From 5e821f25311a719d379e74ae007582029f9890d1 Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Fri, 2 Dec 2022 14:03:45 +0530 Subject: [PATCH] Global styles: move border from layout to own menu (#45995) * global styles: move border from layout to own section * add border and shadow icons --- .../components/global-styles/context-menu.js | 13 +++++++++-- .../components/global-styles/screen-border.js | 23 +++++++++++++++++++ .../components/global-styles/screen-layout.js | 3 --- .../src/components/global-styles/ui.js | 5 ++++ packages/icons/src/index.js | 2 ++ packages/icons/src/library/border.js | 12 ++++++++++ packages/icons/src/library/shadow.js | 12 ++++++++++ 7 files changed, 65 insertions(+), 5 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/screen-border.js create mode 100644 packages/icons/src/library/border.js create mode 100644 packages/icons/src/library/shadow.js diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js index 19a252763ff7e..d4c229fe831b2 100644 --- a/packages/edit-site/src/components/global-styles/context-menu.js +++ b/packages/edit-site/src/components/global-styles/context-menu.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; -import { typography, color, layout } from '@wordpress/icons'; +import { typography, border, color, layout } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; /** @@ -19,7 +19,7 @@ function ContextMenu( { name, parentMenu = '' } ) { const hasColorPanel = useHasColorPanel( name ); const hasBorderPanel = useHasBorderPanel( name ); const hasDimensionsPanel = useHasDimensionsPanel( name ); - const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel; + const hasLayoutPanel = hasDimensionsPanel; return ( @@ -41,6 +41,15 @@ function ContextMenu( { name, parentMenu = '' } ) { { __( 'Colors' ) } ) } + { hasBorderPanel && ( + + { __( 'Border' ) } + + ) } { hasLayoutPanel && ( + + { hasBorderPanel && } + + ); +} + +export default ScreenBorder; diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js index 74c7ac1851e1e..3fbc911f5fde7 100644 --- a/packages/edit-site/src/components/global-styles/screen-layout.js +++ b/packages/edit-site/src/components/global-styles/screen-layout.js @@ -6,19 +6,16 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import BorderPanel, { useHasBorderPanel } from './border-panel'; import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel'; import ScreenHeader from './header'; function ScreenLayout( { name } ) { - const hasBorderPanel = useHasBorderPanel( name ); const hasDimensionsPanel = useHasDimensionsPanel( name ); return ( <> { hasDimensionsPanel && } - { hasBorderPanel && } ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 6eeada1e67c61..1daf72dbf1a88 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -24,6 +24,7 @@ import ScreenHeadingColor from './screen-heading-color'; import ScreenButtonColor from './screen-button-color'; import ScreenLayout from './screen-layout'; import ScreenStyleVariations from './screen-style-variations'; +import ScreenBorder from './screen-border'; function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -108,6 +109,10 @@ function ContextScreens( { name } ) { + + + + diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 5870ccba9ab04..80bdc23994c4b 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -20,6 +20,7 @@ export { default as backup } from './library/backup'; export { default as blockDefault } from './library/block-default'; export { default as blockMeta } from './library/block-meta'; export { default as blockTable } from './library/block-table'; +export { default as border } from './library/border'; export { default as box } from './library/box'; export { default as brush } from './library/brush'; export { default as bug } from './library/bug'; @@ -200,6 +201,7 @@ export { default as rss } from './library/rss'; export { default as search } from './library/search'; export { default as separator } from './library/separator'; export { default as settings } from './library/settings'; +export { default as shadow } from './library/shadow'; export { default as share } from './library/share'; export { default as shield } from './library/shield'; export { default as shortcode } from './library/shortcode'; diff --git a/packages/icons/src/library/border.js b/packages/icons/src/library/border.js new file mode 100644 index 0000000000000..17bef1eb52205 --- /dev/null +++ b/packages/icons/src/library/border.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const border = ( + + + +); + +export default border; diff --git a/packages/icons/src/library/shadow.js b/packages/icons/src/library/shadow.js new file mode 100644 index 0000000000000..c6bb27c437e24 --- /dev/null +++ b/packages/icons/src/library/shadow.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const shadow = ( + + + +); + +export default shadow;