@wordpress/edit-site 6.31.0 → 6.31.1-next.233ccab9b.0

package/build-module/components/sidebar-global-styles-wrapper/index.js

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import { Button, __experimentalHStack as HStack, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { seen } from '@wordpress/icons';
+import { seen, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +17,7 @@ import { seen } from '@wordpress/icons';
 import GlobalStylesUI from '../global-styles/ui';
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   useLocation,
   useHistory
@@ -26,19 +28,49 @@ const GlobalStylesPageActions = ({
   path
 }) => {
   const history = useHistory();
-  return /*#__PURE__*/_jsx(Button, {
-    isPressed: isStyleBookOpened,
-    icon: seen,
-    label: __('Style Book'),
-    onClick: () => {
-      setIsStyleBookOpened(!isStyleBookOpened);
-      const updatedPath = !isStyleBookOpened ? addQueryArgs(path, {
-        preview: 'stylebook'
-      }) : removeQueryArgs(path, 'preview');
-      // Navigate to the updated path.
-      history.navigate(updatedPath);
-    },
-    size: "compact"
+  const canEditCSS = useSelect(select => {
+    const {
+      getEntityRecord,
+      __experimentalGetCurrentGlobalStylesId
+    } = select(coreStore);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
+    return !!globalStyles?._links?.['wp:action-edit-css'];
+  }, []);
+  return /*#__PURE__*/_jsxs(HStack, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      isPressed: isStyleBookOpened,
+      icon: seen,
+      label: __('Style Book'),
+      onClick: () => {
+        setIsStyleBookOpened(!isStyleBookOpened);
+        const updatedPath = !isStyleBookOpened ? addQueryArgs(path, {
+          preview: 'stylebook'
+        }) : removeQueryArgs(path, 'preview');
+        // Navigate to the updated path.
+        history.navigate(updatedPath);
+      },
+      size: "compact"
+    }), canEditCSS && /*#__PURE__*/_jsx(DropdownMenu, {
+      icon: moreVertical,
+      label: __('More'),
+      toggleProps: {
+        size: 'compact'
+      },
+      children: ({
+        onClose
+      }) => /*#__PURE__*/_jsx(MenuGroup, {
+        children: canEditCSS && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => {
+            onClose();
+            history.navigate(addQueryArgs(path, {
+              section: '/css'
+            }));
+          },
+          children: __('Additional CSS')
+        })
+      })
+    })]
   });
 };
 

package/build-module/components/sidebar-global-styles-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","useMemo","useState","privateApis","routerPrivateApis","useViewportMatch","Button","addQueryArgs","removeQueryArgs","seen","GlobalStylesUI","Page","unlock","jsx","_jsx","Fragment","_Fragment","useLocation","useHistory","GlobalStylesPageActions","isStyleBookOpened","setIsStyleBookOpened","path","history","isPressed","icon","label","onClick","updatedPath","preview","navigate","size","useSection","query","_query$section","section","updatedSection","GlobalStylesUIWrapper","includes","isMobileViewport","onChangeSection","children","actions","className","title","onPathChange"],"sources":["@wordpress/edit-site/src/components/sidebar-global-styles-wrapper/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { Button } from '@wordpress/components';\nimport { addQueryArgs, removeQueryArgs } from '@wordpress/url';\nimport { seen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesUI from '../global-styles/ui';\nimport Page from '../page';\nimport { unlock } from '../../lock-unlock';\n\nconst { useLocation, useHistory } = unlock( routerPrivateApis );\n\nconst GlobalStylesPageActions = ( {\n\tisStyleBookOpened,\n\tsetIsStyleBookOpened,\n\tpath,\n} ) => {\n\tconst history = useHistory();\n\treturn (\n\t\t<Button\n\t\t\tisPressed={ isStyleBookOpened }\n\t\t\ticon={ seen }\n\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\tonClick={ () => {\n\t\t\t\tsetIsStyleBookOpened( ! isStyleBookOpened );\n\t\t\t\tconst updatedPath = ! isStyleBookOpened\n\t\t\t\t\t? addQueryArgs( path, { preview: 'stylebook' } )\n\t\t\t\t\t: removeQueryArgs( path, 'preview' );\n\t\t\t\t// Navigate to the updated path.\n\t\t\t\thistory.navigate( updatedPath );\n\t\t\t} }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n};\n\n/**\n * Hook to deal with navigation and location state.\n *\n * @return {Array}  The current section and a function to update it.\n */\nexport const useSection = () => {\n\tconst { path, query } = useLocation();\n\tconst history = useHistory();\n\treturn useMemo( () => {\n\t\treturn [\n\t\t\tquery.section ?? '/',\n\t\t\t( updatedSection ) => {\n\t\t\t\thistory.navigate(\n\t\t\t\t\taddQueryArgs( path, {\n\t\t\t\t\t\tsection: updatedSection,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t},\n\t\t];\n\t}, [ path, query.section, history ] );\n};\n\nexport default function GlobalStylesUIWrapper() {\n\tconst { path } = useLocation();\n\n\tconst [ isStyleBookOpened, setIsStyleBookOpened ] = useState(\n\t\tpath.includes( 'preview=stylebook' )\n\t);\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ section, onChangeSection ] = useSection();\n\n\treturn (\n\t\t<>\n\t\t\t<Page\n\t\t\t\tactions={\n\t\t\t\t\t! isMobileViewport ? (\n\t\t\t\t\t\t<GlobalStylesPageActions\n\t\t\t\t\t\t\tisStyleBookOpened={ isStyleBookOpened }\n\t\t\t\t\t\t\tsetIsStyleBookOpened={ setIsStyleBookOpened }\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null\n\t\t\t\t}\n\t\t\t\tclassName=\"edit-site-styles\"\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t>\n\t\t\t\t<GlobalStylesUI\n\t\t\t\t\tpath={ section }\n\t\t\t\t\tonPathChange={ onChangeSection }\n\t\t\t\t/>\n\t\t\t</Page>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__","useSelect","store","coreStore","useMemo","useState","privateApis","routerPrivateApis","useViewportMatch","Button","__experimentalHStack","HStack","DropdownMenu","MenuGroup","MenuItem","addQueryArgs","removeQueryArgs","seen","moreVertical","GlobalStylesUI","Page","unlock","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useLocation","useHistory","GlobalStylesPageActions","isStyleBookOpened","setIsStyleBookOpened","path","history","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","children","isPressed","icon","label","onClick","updatedPath","preview","navigate","size","toggleProps","onClose","section","useSection","query","_query$section","updatedSection","GlobalStylesUIWrapper","includes","isMobileViewport","onChangeSection","actions","className","title","onPathChange"],"sources":["@wordpress/edit-site/src/components/sidebar-global-styles-wrapper/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useMemo, useState } from '@wordpress/element';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { addQueryArgs, removeQueryArgs } from '@wordpress/url';\nimport { seen, moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesUI from '../global-styles/ui';\nimport Page from '../page';\nimport { unlock } from '../../lock-unlock';\n\nconst { useLocation, useHistory } = unlock( routerPrivateApis );\n\nconst GlobalStylesPageActions = ( {\n\tisStyleBookOpened,\n\tsetIsStyleBookOpened,\n\tpath,\n} ) => {\n\tconst history = useHistory();\n\tconst canEditCSS = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\t\treturn !! globalStyles?._links?.[ 'wp:action-edit-css' ];\n\t}, [] );\n\n\treturn (\n\t\t<HStack>\n\t\t\t<Button\n\t\t\t\tisPressed={ isStyleBookOpened }\n\t\t\t\ticon={ seen }\n\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsStyleBookOpened( ! isStyleBookOpened );\n\t\t\t\t\tconst updatedPath = ! isStyleBookOpened\n\t\t\t\t\t\t? addQueryArgs( path, { preview: 'stylebook' } )\n\t\t\t\t\t\t: removeQueryArgs( path, 'preview' );\n\t\t\t\t\t// Navigate to the updated path.\n\t\t\t\t\thistory.navigate( updatedPath );\n\t\t\t\t} }\n\t\t\t\tsize=\"compact\"\n\t\t\t/>\n\t\t\t{ canEditCSS && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\tlabel={ __( 'More' ) }\n\t\t\t\t\ttoggleProps={ { size: 'compact' } }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ canEditCSS && (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\thistory.navigate(\n\t\t\t\t\t\t\t\t\t\t\taddQueryArgs( path, {\n\t\t\t\t\t\t\t\t\t\t\t\tsection: '/css',\n\t\t\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\n/**\n * Hook to deal with navigation and location state.\n *\n * @return {Array}  The current section and a function to update it.\n */\nexport const useSection = () => {\n\tconst { path, query } = useLocation();\n\tconst history = useHistory();\n\treturn useMemo( () => {\n\t\treturn [\n\t\t\tquery.section ?? '/',\n\t\t\t( updatedSection ) => {\n\t\t\t\thistory.navigate(\n\t\t\t\t\taddQueryArgs( path, {\n\t\t\t\t\t\tsection: updatedSection,\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t},\n\t\t];\n\t}, [ path, query.section, history ] );\n};\n\nexport default function GlobalStylesUIWrapper() {\n\tconst { path } = useLocation();\n\n\tconst [ isStyleBookOpened, setIsStyleBookOpened ] = useState(\n\t\tpath.includes( 'preview=stylebook' )\n\t);\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ section, onChangeSection ] = useSection();\n\n\treturn (\n\t\t<>\n\t\t\t<Page\n\t\t\t\tactions={\n\t\t\t\t\t! isMobileViewport ? (\n\t\t\t\t\t\t<GlobalStylesPageActions\n\t\t\t\t\t\t\tisStyleBookOpened={ isStyleBookOpened }\n\t\t\t\t\t\t\tsetIsStyleBookOpened={ setIsStyleBookOpened }\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null\n\t\t\t\t}\n\t\t\t\tclassName=\"edit-site-styles\"\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t>\n\t\t\t\t<GlobalStylesUI\n\t\t\t\t\tpath={ section }\n\t\t\t\t\tonPathChange={ onChangeSection }\n\t\t\t\t/>\n\t\t\t</Page>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.31.0",
+	"version": "6.31.1-next.233ccab9b.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,45 +30,45 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.31.0",
-		"@wordpress/api-fetch": "^7.31.0",
-		"@wordpress/blob": "^4.31.0",
-		"@wordpress/block-editor": "^15.4.0",
-		"@wordpress/block-library": "^9.31.0",
-		"@wordpress/blocks": "^15.4.0",
-		"@wordpress/commands": "^1.31.0",
-		"@wordpress/components": "^30.4.0",
-		"@wordpress/compose": "^7.31.0",
-		"@wordpress/core-data": "^7.31.0",
-		"@wordpress/data": "^10.31.0",
-		"@wordpress/dataviews": "^9.0.0",
-		"@wordpress/date": "^5.31.0",
-		"@wordpress/deprecated": "^4.31.0",
-		"@wordpress/dom": "^4.31.0",
-		"@wordpress/editor": "^14.31.0",
-		"@wordpress/element": "^6.31.0",
-		"@wordpress/escape-html": "^3.31.0",
-		"@wordpress/fields": "^0.23.0",
-		"@wordpress/hooks": "^4.31.0",
-		"@wordpress/html-entities": "^4.31.0",
-		"@wordpress/i18n": "^6.4.0",
-		"@wordpress/icons": "^10.31.0",
-		"@wordpress/keyboard-shortcuts": "^5.31.0",
-		"@wordpress/keycodes": "^4.31.0",
-		"@wordpress/media-utils": "^5.31.0",
-		"@wordpress/notices": "^5.31.0",
-		"@wordpress/patterns": "^2.31.0",
-		"@wordpress/plugins": "^7.31.0",
-		"@wordpress/preferences": "^4.31.0",
-		"@wordpress/primitives": "^4.31.0",
-		"@wordpress/private-apis": "^1.31.0",
-		"@wordpress/reusable-blocks": "^5.31.0",
-		"@wordpress/router": "^1.31.0",
-		"@wordpress/style-engine": "^2.31.0",
-		"@wordpress/url": "^4.31.0",
-		"@wordpress/viewport": "^6.31.0",
-		"@wordpress/widgets": "^4.31.0",
-		"@wordpress/wordcount": "^4.31.0",
+		"@wordpress/a11y": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/api-fetch": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/blob": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/block-editor": "^15.4.1-next.233ccab9b.0",
+		"@wordpress/block-library": "^9.31.1-next.233ccab9b.0",
+		"@wordpress/blocks": "^15.4.1-next.233ccab9b.0",
+		"@wordpress/commands": "^1.31.1-next.233ccab9b.0",
+		"@wordpress/components": "^30.5.1-next.233ccab9b.0",
+		"@wordpress/compose": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/core-data": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/data": "^10.31.1-next.233ccab9b.0",
+		"@wordpress/dataviews": "^9.1.1-next.233ccab9b.0",
+		"@wordpress/date": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/deprecated": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/dom": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/editor": "^14.31.1-next.233ccab9b.0",
+		"@wordpress/element": "^6.31.1-next.233ccab9b.0",
+		"@wordpress/escape-html": "^3.31.1-next.233ccab9b.0",
+		"@wordpress/fields": "^0.23.1-next.233ccab9b.0",
+		"@wordpress/hooks": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/html-entities": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/i18n": "^6.4.1-next.233ccab9b.0",
+		"@wordpress/icons": "^10.31.1-next.233ccab9b.0",
+		"@wordpress/keyboard-shortcuts": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/keycodes": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/media-utils": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/notices": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/patterns": "^2.31.1-next.233ccab9b.0",
+		"@wordpress/plugins": "^7.31.1-next.233ccab9b.0",
+		"@wordpress/preferences": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/primitives": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/private-apis": "^1.31.1-next.233ccab9b.0",
+		"@wordpress/reusable-blocks": "^5.31.1-next.233ccab9b.0",
+		"@wordpress/router": "^1.31.1-next.233ccab9b.0",
+		"@wordpress/style-engine": "^2.31.1-next.233ccab9b.0",
+		"@wordpress/url": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/viewport": "^6.31.1-next.233ccab9b.0",
+		"@wordpress/widgets": "^4.31.1-next.233ccab9b.0",
+		"@wordpress/wordcount": "^4.31.1-next.233ccab9b.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d7601d30d49462ea942168e8ab6bf449fb93097e"
+	"gitHead": "d11f971521e4b39b07124d5c5516890ff98b0e31"
 }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -17,6 +17,7 @@ import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useDebouncedInput } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
+import { safeDecodeURI } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -67,7 +68,7 @@ function SuggestionListItem( {
 					lineHeight={ 1.53846153846 } // 20px
 					className={ `${ baseCssClass }__info` }
 				>
-					{ suggestion.link }
+					{ safeDecodeURI( suggestion.link ) }
 				</Text>
 			) }
 		</Composite.Item>

package/src/components/add-new-template/utils.js

@@ -7,6 +7,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { useMemo, useCallback } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
+import { safeDecodeURI } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -29,6 +30,20 @@ const getValueFromObjectPath = ( object, path ) => {
 	return value;
 };
 
+/**
+ * Helper that adds a prefix to a post slug. The slug needs to be URL-decoded first,
+ * so that we have raw Unicode characters there. The server will truncate the slug to
+ * 200 characters, respecing Unicode char boundary. On the other hand, the server
+ * doesn't detect urlencoded octet boundary and can possibly construct slugs that
+ * are not valid urlencoded strings.
+ * @param {string} prefix The prefix to add to the slug.
+ * @param {string} slug   The slug to add the prefix to.
+ * @return {string} The slug with the prefix.
+ */
+function prefixSlug( prefix, slug ) {
+	return `${ prefix }-${ safeDecodeURI( slug ) }`;
+}
+
 /**
  * Helper util to map records to add a `name` prop from a
  * provided path, in order to handle all entities in the same
@@ -306,7 +321,10 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 								};
 							},
 							getSpecificTemplate: ( suggestion ) => {
-								const templateSlug = `${ templatePrefixes[ slug ] }-${ suggestion.slug }`;
+								const templateSlug = prefixSlug(
+									templatePrefixes[ slug ],
+									suggestion.slug
+								);
 								return {
 									title: templateSlug,
 									slug: templateSlug,
@@ -460,7 +478,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 								};
 							},
 							getSpecificTemplate: ( suggestion ) => {
-								const templateSlug = `${ templatePrefixes[ slug ] }-${ suggestion.slug }`;
+								const templateSlug = prefixSlug(
+									templatePrefixes[ slug ],
+									suggestion.slug
+								);
 								return {
 									title: templateSlug,
 									slug: templateSlug,
@@ -545,7 +566,10 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 						};
 					},
 					getSpecificTemplate: ( suggestion ) => {
-						const templateSlug = `author-${ suggestion.slug }`;
+						const templateSlug = prefixSlug(
+							'author',
+							suggestion.slug
+						);
 						return {
 							title: sprintf(
 								// translators: %s: Name of the author e.g: "Admin".

package/src/components/global-styles/screen-css.js

@@ -18,9 +18,6 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 );
 
 function ScreenCSS() {
-	const description = __(
-		'Add your own CSS to customize the appearance and layout of your site.'
-	);
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
@@ -35,10 +32,12 @@ function ScreenCSS() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'CSS' ) }
+				title={ __( 'Additional CSS' ) }
 				description={
 					<>
-						{ description }
+						{ __(
+							'You can add custom CSS to further customize the appearance and layout of your site.'
+						) }
 						<br />
 						<ExternalLink
 							href={ __(

package/src/components/global-styles/screen-root.js

@@ -26,24 +26,10 @@ import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
 
 function ScreenRoot() {
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
+	const hasVariations = useSelect( ( select ) => {
+		const { __experimentalGetCurrentThemeGlobalStylesVariations } =
+			select( coreStore );
+		return !! __experimentalGetCurrentThemeGlobalStylesVariations()?.length;
 	}, [] );
 
 	return (
@@ -92,7 +78,7 @@ function ScreenRoot() {
 					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"
-					marginBottom={ 4 }
+					marginBottom={ 2 }
 				>
 					{ __(
 						'Customize the appearance of specific blocks for the whole site.'
@@ -109,38 +95,6 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<Spacer
-							as="p"
-							paddingTop={ 2 }
-							paddingX="13px"
-							marginBottom={ 4 }
-						>
-							{ __(
-								'Add your own CSS to customize the appearance and layout of your site.'
-							) }
-						</Spacer>
-						<ItemGroup>
-							<NavigationButtonAsItem path="/css">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }

package/src/components/sidebar-global-styles-wrapper/index.js

@@ -2,12 +2,20 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { seen } from '@wordpress/icons';
+import { seen, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,21 +32,59 @@ const GlobalStylesPageActions = ( {
 	path,
 } ) => {
 	const history = useHistory();
+	const canEditCSS = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return !! globalStyles?._links?.[ 'wp:action-edit-css' ];
+	}, [] );
+
 	return (
-		<Button
-			isPressed={ isStyleBookOpened }
-			icon={ seen }
-			label={ __( 'Style Book' ) }
-			onClick={ () => {
-				setIsStyleBookOpened( ! isStyleBookOpened );
-				const updatedPath = ! isStyleBookOpened
-					? addQueryArgs( path, { preview: 'stylebook' } )
-					: removeQueryArgs( path, 'preview' );
-				// Navigate to the updated path.
-				history.navigate( updatedPath );
-			} }
-			size="compact"
-		/>
+		<HStack>
+			<Button
+				isPressed={ isStyleBookOpened }
+				icon={ seen }
+				label={ __( 'Style Book' ) }
+				onClick={ () => {
+					setIsStyleBookOpened( ! isStyleBookOpened );
+					const updatedPath = ! isStyleBookOpened
+						? addQueryArgs( path, { preview: 'stylebook' } )
+						: removeQueryArgs( path, 'preview' );
+					// Navigate to the updated path.
+					history.navigate( updatedPath );
+				} }
+				size="compact"
+			/>
+			{ canEditCSS && (
+				<DropdownMenu
+					icon={ moreVertical }
+					label={ __( 'More' ) }
+					toggleProps={ { size: 'compact' } }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ canEditCSS && (
+								<MenuItem
+									onClick={ () => {
+										onClose();
+										history.navigate(
+											addQueryArgs( path, {
+												section: '/css',
+											} )
+										);
+									} }
+								>
+									{ __( 'Additional CSS' ) }
+								</MenuItem>
+							) }
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			) }
+		</HStack>
 	);
 };