From 2ac97317db345fc91ea7298859ed58d02e043d68 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Wed, 23 Nov 2022 15:40:46 +0530 Subject: [PATCH 1/2] global styles: move border from layout to own section --- .../components/global-styles/context-menu.js | 11 ++++++++- .../global-styles/screen-effects.js | 23 +++++++++++++++++++ .../components/global-styles/screen-layout.js | 3 --- .../src/components/global-styles/ui.js | 5 ++++ 4 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/screen-effects.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 19a252763ff7ea..148d594ab72b3d 100644 --- a/packages/edit-site/src/components/global-styles/context-menu.js +++ b/packages/edit-site/src/components/global-styles/context-menu.js @@ -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 ScreenEffects; 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 74c7ac1851e1ee..3fbc911f5fde79 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 6eeada1e67c61d..d7b774e4cb5cb5 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 ScreenEffects from './screen-effects'; function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -108,6 +109,10 @@ function ContextScreens( { name } ) { + + + + From 7deaffaf2e966299bb8107dabb332237158b5416 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Wed, 23 Nov 2022 16:42:18 +0530 Subject: [PATCH 2/2] add border and shadow icons --- .../src/components/global-styles/context-menu.js | 6 +++--- .../{screen-effects.js => screen-border.js} | 4 ++-- .../edit-site/src/components/global-styles/ui.js | 6 +++--- packages/icons/src/index.js | 2 ++ packages/icons/src/library/border.js | 12 ++++++++++++ packages/icons/src/library/shadow.js | 12 ++++++++++++ 6 files changed, 34 insertions(+), 8 deletions(-) rename packages/edit-site/src/components/global-styles/{screen-effects.js => screen-border.js} (85%) 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 148d594ab72b3d..d4c229fe831b2d 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'; /** @@ -43,8 +43,8 @@ function ContextMenu( { name, parentMenu = '' } ) { ) } { hasBorderPanel && ( { __( 'Border' ) } diff --git a/packages/edit-site/src/components/global-styles/screen-effects.js b/packages/edit-site/src/components/global-styles/screen-border.js similarity index 85% rename from packages/edit-site/src/components/global-styles/screen-effects.js rename to packages/edit-site/src/components/global-styles/screen-border.js index 6392c9d6c25be6..04a92653f4e102 100644 --- a/packages/edit-site/src/components/global-styles/screen-effects.js +++ b/packages/edit-site/src/components/global-styles/screen-border.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; import ScreenHeader from './header'; import BorderPanel, { useHasBorderPanel } from './border-panel'; -function ScreenEffects( { name } ) { +function ScreenBorder( { name } ) { const hasBorderPanel = useHasBorderPanel( name ); return ( @@ -20,4 +20,4 @@ function ScreenEffects( { name } ) { ); } -export default ScreenEffects; +export default ScreenBorder; diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index d7b774e4cb5cb5..1daf72dbf1a883 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -24,7 +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 ScreenEffects from './screen-effects'; +import ScreenBorder from './screen-border'; function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -109,8 +109,8 @@ function ContextScreens( { name } ) { - - + + diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 5870ccba9ab043..80bdc23994c4b8 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 00000000000000..17bef1eb522050 --- /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 00000000000000..c6bb27c437e248 --- /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;