Global styles: move border from layout to own menu (#45995)

* global styles: move border from layout to own section

* add border and shadow icons

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 (
 		<ItemGroup>
@@ -41,6 +41,15 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					{ __( 'Colors' ) }
 				</NavigationButtonAsItem>
 			) }
+			{ hasBorderPanel && (
+				<NavigationButtonAsItem
+					icon={ border }
+					path={ parentMenu + '/border' }
+					aria-label={ __( 'Border styles' ) }
+				>
+					{ __( 'Border' ) }
+				</NavigationButtonAsItem>
+			) }
 			{ hasLayoutPanel && (
 				<NavigationButtonAsItem
 					icon={ layout }

packages/edit-site/src/components/global-styles/screen-border.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import BorderPanel, { useHasBorderPanel } from './border-panel';
+
+function ScreenBorder( { name } ) {
+	const hasBorderPanel = useHasBorderPanel( name );
+
+	return (
+		<>
+			<ScreenHeader title={ __( 'Border' ) } />
+			{ hasBorderPanel && <BorderPanel name={ name } /> }
+		</>
+	);
+}
+
+export default ScreenBorder;

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 (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
 	);
 }

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 } ) {
 				<ScreenButtonColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
+				<ScreenBorder name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</GlobalStylesNavigationScreen>

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';

packages/icons/src/library/border.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const border = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="m19.8 10.4-1.5.3c.1.4.1.8.1 1.3s0 .9-.1 1.3l1.5.3c.1-.5.2-1 .2-1.6s-.1-1.1-.2-1.6zm-2.4-2 1.2-.8c-.6-.9-1.3-1.6-2.2-2.2l-.8 1.2c.7.5 1.3 1.1 1.8 1.8zM12 5.5c.4 0 .9 0 1.3.1l.3-1.5c-.5 0-1.1-.1-1.6-.1s-1.1.1-1.6.2l.3 1.5c.4-.2.9-.2 1.3-.2zM8.4 6.6l-.8-1.3c-.9.6-1.7 1.4-2.3 2.3l1.2.8c.6-.7 1.2-1.3 1.9-1.8zM5.5 12c0-.4 0-.9.1-1.3l-1.5-.3c0 .5-.1 1.1-.1 1.6s.1 1.1.2 1.6l1.5-.3c-.2-.4-.2-.9-.2-1.3zm1.1 3.6-1.2.8c.6.9 1.3 1.6 2.2 2.2l.8-1.2c-.7-.5-1.3-1.1-1.8-1.8zm5.4 2.9c-.4 0-.9 0-1.3-.1l-.3 1.5c.5.1 1 .2 1.6.2s1.1-.1 1.6-.2l-.3-1.5c-.4.1-.9.1-1.3.1zm3.6-1.1.8 1.2c.9-.6 1.6-1.3 2.2-2.2l-1.2-.8c-.5.7-1.1 1.3-1.8 1.8zM12 7c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z" />
+	</SVG>
+);
+
+export default border;

packages/icons/src/library/shadow.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const shadow = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM12.8 3h-1.5v3h1.5V3zm-1.6 18h1.5v-3h-1.5v3zm6.8-9.8v1.5h3v-1.5h-3zm-12 0H3v1.5h3v-1.5zm9.7 5.6 2.1 2.1 1.1-1.1-2.1-2.1-1.1 1.1zM8.3 7.2 6.2 5.1 5.1 6.2l2.1 2.1 1.1-1.1zM5.1 17.8l1.1 1.1 2.1-2.1-1.1-1.1-2.1 2.1zM18.9 6.2l-1.1-1.1-2.1 2.1 1.1 1.1 2.1-2.1z" />
+	</SVG>
+);
+
+export default shadow;