@wordpress/edit-site 5.3.3 → 5.4.0

package/build-module/hooks/push-changes-to-global-styles/index.js

@@ -21,7 +21,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 
-import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../private-apis';
 const {
   GlobalStylesContext
@@ -84,8 +84,9 @@ const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
   'typography.fontFamily': 'fontFamily'
 };
 
-function getChangesToPush(name, attributes) {
-  return getSupportedGlobalStylesPanels(name).flatMap(key => {
+function useChangesToPush(name, attributes) {
+  const supports = useSupportedStyles(name);
+  return useMemo(() => supports.flatMap(key => {
     if (!STYLE_PROPERTY[key]) {
       return [];
     }
@@ -100,7 +101,7 @@ function getChangesToPush(name, attributes) {
       path,
       value
     }] : [];
-  });
+  }), [supports, name, attributes]);
 }
 
 function cloneDeep(object) {
@@ -113,7 +114,7 @@ function PushChangesToGlobalStylesControl(_ref) {
     attributes,
     setAttributes
   } = _ref;
-  const changes = useMemo(() => getChangesToPush(name, attributes), [name, attributes]);
+  const changes = useChangesToPush(name, attributes);
   const {
     user: userConfig,
     setUserConfig

package/build-module/hooks/push-changes-to-global-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/hooks/push-changes-to-global-styles/index.js"],"names":["get","set","addFilter","createHigherOrderComponent","InspectorAdvancedControls","store","blockEditorStore","privateApis","blockEditorPrivateApis","BaseControl","Button","__","sprintf","__EXPERIMENTAL_STYLE_PROPERTY","STYLE_PROPERTY","getBlockType","useContext","useMemo","useCallback","useDispatch","noticesStore","getSupportedGlobalStylesPanels","unlock","GlobalStylesContext","STYLE_PATH_TO_CSS_VAR_INFIX","STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE","getChangesToPush","name","attributes","flatMap","key","value","path","presetAttributeKey","join","presetAttributeValue","style","cloneDeep","object","JSON","parse","stringify","PushChangesToGlobalStylesControl","setAttributes","changes","user","userConfig","setUserConfig","__unstableMarkNextChangeAsNotPersistent","createSuccessNotice","pushChanges","length","blockStyles","newBlockStyles","newUserConfig","undefined","undoIgnore","title","type","actions","label","onClick","withPushChangesToGlobalStyles","BlockEdit","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, set } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport {\n\tInspectorAdvancedControls,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { BaseControl, Button } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { useContext, useMemo, useCallback } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\n// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be\n// removed by moving PushChangesToGlobalStylesControl to\n// @wordpress/block-editor.\nconst STYLE_PATH_TO_CSS_VAR_INFIX = {\n\t'color.background': 'color',\n\t'color.text': 'color',\n\t'elements.link.color.text': 'color',\n\t'elements.link.:hover.color.text': 'color',\n\t'elements.link.typography.fontFamily': 'font-family',\n\t'elements.link.typography.fontSize': 'font-size',\n\t'elements.button.color.text': 'color',\n\t'elements.button.color.background': 'color',\n\t'elements.button.typography.fontFamily': 'font-family',\n\t'elements.button.typography.fontSize': 'font-size',\n\t'elements.heading.color': 'color',\n\t'elements.heading.color.background': 'color',\n\t'elements.heading.typography.fontFamily': 'font-family',\n\t'elements.heading.gradient': 'gradient',\n\t'elements.heading.color.gradient': 'gradient',\n\t'elements.h1.color': 'color',\n\t'elements.h1.color.background': 'color',\n\t'elements.h1.typography.fontFamily': 'font-family',\n\t'elements.h1.color.gradient': 'gradient',\n\t'elements.h2.color': 'color',\n\t'elements.h2.color.background': 'color',\n\t'elements.h2.typography.fontFamily': 'font-family',\n\t'elements.h2.color.gradient': 'gradient',\n\t'elements.h3.color': 'color',\n\t'elements.h3.color.background': 'color',\n\t'elements.h3.typography.fontFamily': 'font-family',\n\t'elements.h3.color.gradient': 'gradient',\n\t'elements.h4.color': 'color',\n\t'elements.h4.color.background': 'color',\n\t'elements.h4.typography.fontFamily': 'font-family',\n\t'elements.h4.color.gradient': 'gradient',\n\t'elements.h5.color': 'color',\n\t'elements.h5.color.background': 'color',\n\t'elements.h5.typography.fontFamily': 'font-family',\n\t'elements.h5.color.gradient': 'gradient',\n\t'elements.h6.color': 'color',\n\t'elements.h6.color.background': 'color',\n\t'elements.h6.typography.fontFamily': 'font-family',\n\t'elements.h6.color.gradient': 'gradient',\n\t'color.gradient': 'gradient',\n\t'typography.fontSize': 'font-size',\n\t'typography.fontFamily': 'font-family',\n};\n\n// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be\n// removed by moving PushChangesToGlobalStylesControl to\n// @wordpress/block-editor.\nconst STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {\n\t'color.background': 'backgroundColor',\n\t'color.text': 'textColor',\n\t'color.gradient': 'gradient',\n\t'typography.fontSize': 'fontSize',\n\t'typography.fontFamily': 'fontFamily',\n};\n\nfunction getChangesToPush( name, attributes ) {\n\treturn getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {\n\t\tif ( ! STYLE_PROPERTY[ key ] ) {\n\t\t\treturn [];\n\t\t}\n\t\tconst { value: path } = STYLE_PROPERTY[ key ];\n\t\tconst presetAttributeKey = path.join( '.' );\n\t\tconst presetAttributeValue =\n\t\t\tattributes[\n\t\t\t\tSTYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]\n\t\t\t];\n\t\tconst value = presetAttributeValue\n\t\t\t? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`\n\t\t\t: get( attributes.style, path );\n\t\treturn value ? [ { path, value } ] : [];\n\t} );\n}\n\nfunction cloneDeep( object ) {\n\treturn ! object ? {} : JSON.parse( JSON.stringify( object ) );\n}\n\nfunction PushChangesToGlobalStylesControl( {\n\tname,\n\tattributes,\n\tsetAttributes,\n} ) {\n\tconst changes = useMemo(\n\t\t() => getChangesToPush( name, attributes ),\n\t\t[ name, attributes ]\n\t);\n\n\tconst { user: userConfig, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\tconst pushChanges = useCallback( () => {\n\t\tif ( changes.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { style: blockStyles } = attributes;\n\n\t\tconst newBlockStyles = cloneDeep( blockStyles );\n\t\tconst newUserConfig = cloneDeep( userConfig );\n\n\t\tfor ( const { path, value } of changes ) {\n\t\t\tset( newBlockStyles, path, undefined );\n\t\t\tset( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );\n\t\t}\n\n\t\t// @wordpress/core-data doesn't support editing multiple entity types in\n\t\t// a single undo level. So for now, we disable @wordpress/core-data undo\n\t\t// tracking and implement our own Undo button in the snackbar\n\t\t// notification.\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tsetAttributes( { style: newBlockStyles } );\n\t\tsetUserConfig( () => newUserConfig, { undoIgnore: true } );\n\n\t\tcreateSuccessNotice(\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: Title of the block e.g. 'Heading'.\n\t\t\t\t__( '%s styles applied.' ),\n\t\t\t\tgetBlockType( name ).title\n\t\t\t),\n\t\t\t{\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tactions: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Undo' ),\n\t\t\t\t\t\tonClick() {\n\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\tsetAttributes( { style: blockStyles } );\n\t\t\t\t\t\t\tsetUserConfig( () => userConfig, {\n\t\t\t\t\t\t\t\tundoIgnore: true,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t}\n\t\t);\n\t}, [ changes, attributes, userConfig, name ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName=\"edit-site-push-changes-to-global-styles-control\"\n\t\t\thelp={ sprintf(\n\t\t\t\t// translators: %s: Title of the block e.g. 'Heading'.\n\t\t\t\t__(\n\t\t\t\t\t'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'\n\t\t\t\t),\n\t\t\t\tgetBlockType( name ).title\n\t\t\t) }\n\t\t>\n\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t{ __( 'Styles' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tdisabled={ changes.length === 0 }\n\t\t\t\tonClick={ pushChanges }\n\t\t\t>\n\t\t\t\t{ __( 'Apply globally' ) }\n\t\t\t</Button>\n\t\t</BaseControl>\n\t);\n}\n\nconst withPushChangesToGlobalStyles = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) =>\n\t\t(\n\t\t\t<>\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t\t<InspectorAdvancedControls>\n\t\t\t\t\t<PushChangesToGlobalStylesControl { ...props } />\n\t\t\t\t</InspectorAdvancedControls>\n\t\t\t</>\n\t\t)\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/edit-site/push-changes-to-global-styles',\n\twithPushChangesToGlobalStyles\n);\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/hooks/push-changes-to-global-styles/index.js"],"names":["get","set","addFilter","createHigherOrderComponent","InspectorAdvancedControls","store","blockEditorStore","privateApis","blockEditorPrivateApis","BaseControl","Button","__","sprintf","__EXPERIMENTAL_STYLE_PROPERTY","STYLE_PROPERTY","getBlockType","useContext","useMemo","useCallback","useDispatch","noticesStore","useSupportedStyles","unlock","GlobalStylesContext","STYLE_PATH_TO_CSS_VAR_INFIX","STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE","useChangesToPush","name","attributes","supports","flatMap","key","value","path","presetAttributeKey","join","presetAttributeValue","style","cloneDeep","object","JSON","parse","stringify","PushChangesToGlobalStylesControl","setAttributes","changes","user","userConfig","setUserConfig","__unstableMarkNextChangeAsNotPersistent","createSuccessNotice","pushChanges","length","blockStyles","newBlockStyles","newUserConfig","undefined","undoIgnore","title","type","actions","label","onClick","withPushChangesToGlobalStyles","BlockEdit","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get, set } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport {\n\tInspectorAdvancedControls,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { BaseControl, Button } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { useContext, useMemo, useCallback } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { useSupportedStyles } from '../../components/global-styles/hooks';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\n// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be\n// removed by moving PushChangesToGlobalStylesControl to\n// @wordpress/block-editor.\nconst STYLE_PATH_TO_CSS_VAR_INFIX = {\n\t'color.background': 'color',\n\t'color.text': 'color',\n\t'elements.link.color.text': 'color',\n\t'elements.link.:hover.color.text': 'color',\n\t'elements.link.typography.fontFamily': 'font-family',\n\t'elements.link.typography.fontSize': 'font-size',\n\t'elements.button.color.text': 'color',\n\t'elements.button.color.background': 'color',\n\t'elements.button.typography.fontFamily': 'font-family',\n\t'elements.button.typography.fontSize': 'font-size',\n\t'elements.heading.color': 'color',\n\t'elements.heading.color.background': 'color',\n\t'elements.heading.typography.fontFamily': 'font-family',\n\t'elements.heading.gradient': 'gradient',\n\t'elements.heading.color.gradient': 'gradient',\n\t'elements.h1.color': 'color',\n\t'elements.h1.color.background': 'color',\n\t'elements.h1.typography.fontFamily': 'font-family',\n\t'elements.h1.color.gradient': 'gradient',\n\t'elements.h2.color': 'color',\n\t'elements.h2.color.background': 'color',\n\t'elements.h2.typography.fontFamily': 'font-family',\n\t'elements.h2.color.gradient': 'gradient',\n\t'elements.h3.color': 'color',\n\t'elements.h3.color.background': 'color',\n\t'elements.h3.typography.fontFamily': 'font-family',\n\t'elements.h3.color.gradient': 'gradient',\n\t'elements.h4.color': 'color',\n\t'elements.h4.color.background': 'color',\n\t'elements.h4.typography.fontFamily': 'font-family',\n\t'elements.h4.color.gradient': 'gradient',\n\t'elements.h5.color': 'color',\n\t'elements.h5.color.background': 'color',\n\t'elements.h5.typography.fontFamily': 'font-family',\n\t'elements.h5.color.gradient': 'gradient',\n\t'elements.h6.color': 'color',\n\t'elements.h6.color.background': 'color',\n\t'elements.h6.typography.fontFamily': 'font-family',\n\t'elements.h6.color.gradient': 'gradient',\n\t'color.gradient': 'gradient',\n\t'typography.fontSize': 'font-size',\n\t'typography.fontFamily': 'font-family',\n};\n\n// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be\n// removed by moving PushChangesToGlobalStylesControl to\n// @wordpress/block-editor.\nconst STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {\n\t'color.background': 'backgroundColor',\n\t'color.text': 'textColor',\n\t'color.gradient': 'gradient',\n\t'typography.fontSize': 'fontSize',\n\t'typography.fontFamily': 'fontFamily',\n};\n\nfunction useChangesToPush( name, attributes ) {\n\tconst supports = useSupportedStyles( name );\n\n\treturn useMemo(\n\t\t() =>\n\t\t\tsupports.flatMap( ( key ) => {\n\t\t\t\tif ( ! STYLE_PROPERTY[ key ] ) {\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t\tconst { value: path } = STYLE_PROPERTY[ key ];\n\t\t\t\tconst presetAttributeKey = path.join( '.' );\n\t\t\t\tconst presetAttributeValue =\n\t\t\t\t\tattributes[\n\t\t\t\t\t\tSTYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[\n\t\t\t\t\t\t\tpresetAttributeKey\n\t\t\t\t\t\t]\n\t\t\t\t\t];\n\t\t\t\tconst value = presetAttributeValue\n\t\t\t\t\t? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`\n\t\t\t\t\t: get( attributes.style, path );\n\t\t\t\treturn value ? [ { path, value } ] : [];\n\t\t\t} ),\n\t\t[ supports, name, attributes ]\n\t);\n}\n\nfunction cloneDeep( object ) {\n\treturn ! object ? {} : JSON.parse( JSON.stringify( object ) );\n}\n\nfunction PushChangesToGlobalStylesControl( {\n\tname,\n\tattributes,\n\tsetAttributes,\n} ) {\n\tconst changes = useChangesToPush( name, attributes );\n\n\tconst { user: userConfig, setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\tconst pushChanges = useCallback( () => {\n\t\tif ( changes.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { style: blockStyles } = attributes;\n\n\t\tconst newBlockStyles = cloneDeep( blockStyles );\n\t\tconst newUserConfig = cloneDeep( userConfig );\n\n\t\tfor ( const { path, value } of changes ) {\n\t\t\tset( newBlockStyles, path, undefined );\n\t\t\tset( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );\n\t\t}\n\n\t\t// @wordpress/core-data doesn't support editing multiple entity types in\n\t\t// a single undo level. So for now, we disable @wordpress/core-data undo\n\t\t// tracking and implement our own Undo button in the snackbar\n\t\t// notification.\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tsetAttributes( { style: newBlockStyles } );\n\t\tsetUserConfig( () => newUserConfig, { undoIgnore: true } );\n\n\t\tcreateSuccessNotice(\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: Title of the block e.g. 'Heading'.\n\t\t\t\t__( '%s styles applied.' ),\n\t\t\t\tgetBlockType( name ).title\n\t\t\t),\n\t\t\t{\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tactions: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Undo' ),\n\t\t\t\t\t\tonClick() {\n\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\tsetAttributes( { style: blockStyles } );\n\t\t\t\t\t\t\tsetUserConfig( () => userConfig, {\n\t\t\t\t\t\t\t\tundoIgnore: true,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t}\n\t\t);\n\t}, [ changes, attributes, userConfig, name ] );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName=\"edit-site-push-changes-to-global-styles-control\"\n\t\t\thelp={ sprintf(\n\t\t\t\t// translators: %s: Title of the block e.g. 'Heading'.\n\t\t\t\t__(\n\t\t\t\t\t'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'\n\t\t\t\t),\n\t\t\t\tgetBlockType( name ).title\n\t\t\t) }\n\t\t>\n\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t{ __( 'Styles' ) }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<Button\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tdisabled={ changes.length === 0 }\n\t\t\t\tonClick={ pushChanges }\n\t\t\t>\n\t\t\t\t{ __( 'Apply globally' ) }\n\t\t\t</Button>\n\t\t</BaseControl>\n\t);\n}\n\nconst withPushChangesToGlobalStyles = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) =>\n\t\t(\n\t\t\t<>\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t\t<InspectorAdvancedControls>\n\t\t\t\t\t<PushChangesToGlobalStylesControl { ...props } />\n\t\t\t\t</InspectorAdvancedControls>\n\t\t\t</>\n\t\t)\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/edit-site/push-changes-to-global-styles',\n\twithPushChangesToGlobalStyles\n);\n"]}

package/build-style/style-rtl.css

@@ -1005,6 +1005,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   padding: 0 16px;
 }
 
+.edit-site-global-styles-header {
+  margin-bottom: 0 !important;
+}
+
 .edit-site-global-styles-subtitle {
   margin-bottom: 0 !important;
   text-transform: uppercase;
@@ -1833,6 +1837,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   min-width: auto;
 }
 
+.edit-site-template-revisions {
+  margin-right: -4px;
+}
+
 h3.edit-site-template-card__template-areas-title {
   font-weight: 500;
   margin: 0 0 8px;
@@ -2088,6 +2096,71 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   vertical-align: text-top;
 }
 
+@media (min-width: 600px) {
+  .edit-site-start-template-options__modal.components-modal__frame {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .edit-site-start-template-options__modal.components-modal__frame {
+    width: 50%;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-start-template-options__modal.components-modal__frame {
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+}
+
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+  display: grid;
+  width: 100%;
+  margin-top: 4px;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100% / 2, max(240px, 100% / 10)), 1fr));
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 0;
+  width: 100%;
+  aspect-ratio: 3/4;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  height: 100%;
+  box-shadow: 0 0 0 1px #ddd;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+  position: absolute;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
+  display: none;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:focus .block-editor-block-preview__container {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container {
+  position: absolute;
+  padding: 0;
+  background: #f0f0f0;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container::after {
+  width: 100%;
+  top: 50%;
+  margin-top: -1em;
+  content: var(--wp-edit-site-start-template-options-start-blank);
+  text-align: center;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) iframe {
+  display: none;
+}
+
 .edit-site-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
@@ -2489,10 +2562,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   overflow: hidden;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-block__menu-edit,
-.edit-site-sidebar-navigation-screen-navigation-menus .edit-site-navigation-inspector__select-menu {
-  display: none;
-}
 .edit-site-sidebar-navigation-screen-navigation-menus .offcanvas-editor-list-view-leaf {
   max-width: calc(100% - 4px);
 }

package/build-style/style.css

@@ -1005,6 +1005,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   padding: 0 16px;
 }
 
+.edit-site-global-styles-header {
+  margin-bottom: 0 !important;
+}
+
 .edit-site-global-styles-subtitle {
   margin-bottom: 0 !important;
   text-transform: uppercase;
@@ -1833,6 +1837,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   min-width: auto;
 }
 
+.edit-site-template-revisions {
+  margin-left: -4px;
+}
+
 h3.edit-site-template-card__template-areas-title {
   font-weight: 500;
   margin: 0 0 8px;
@@ -2088,6 +2096,71 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   vertical-align: text-top;
 }
 
+@media (min-width: 600px) {
+  .edit-site-start-template-options__modal.components-modal__frame {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .edit-site-start-template-options__modal.components-modal__frame {
+    width: 50%;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-start-template-options__modal.components-modal__frame {
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+}
+
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+  display: grid;
+  width: 100%;
+  margin-top: 4px;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100% / 2, max(240px, 100% / 10)), 1fr));
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+  margin-bottom: 0;
+  width: 100%;
+  aspect-ratio: 3/4;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
+  height: 100%;
+  box-shadow: 0 0 0 1px #ddd;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
+  width: 100%;
+  position: absolute;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
+  display: none;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:focus .block-editor-block-preview__container {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container {
+  position: absolute;
+  padding: 0;
+  background: #f0f0f0;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) .block-editor-block-preview__container::after {
+  width: 100%;
+  top: 50%;
+  margin-top: -1em;
+  content: var(--wp-edit-site-start-template-options-start-blank);
+  text-align: center;
+}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item:nth-last-child(2) iframe {
+  display: none;
+}
+
 .edit-site-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
@@ -2489,10 +2562,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   overflow: hidden;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus .block-editor-list-view-block__menu-edit,
-.edit-site-sidebar-navigation-screen-navigation-menus .edit-site-navigation-inspector__select-menu {
-  display: none;
-}
 .edit-site-sidebar-navigation-screen-navigation-menus .offcanvas-editor-list-view-leaf {
   max-width: calc(100% - 4px);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.3.3",
+	"version": "5.4.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,35 +27,35 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.26.1",
-		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/block-editor": "^11.3.3",
-		"@wordpress/block-library": "^8.3.3",
-		"@wordpress/blocks": "^12.3.2",
-		"@wordpress/components": "^23.3.2",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/core-data": "^6.3.2",
-		"@wordpress/data": "^8.3.2",
-		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/editor": "^13.3.3",
-		"@wordpress/element": "^5.3.1",
-		"@wordpress/hooks": "^3.26.1",
-		"@wordpress/html-entities": "^3.26.1",
-		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
-		"@wordpress/interface": "^5.3.3",
-		"@wordpress/keyboard-shortcuts": "^4.3.2",
-		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/media-utils": "^4.17.1",
-		"@wordpress/notices": "^3.26.2",
-		"@wordpress/plugins": "^5.3.2",
-		"@wordpress/preferences": "^3.3.2",
-		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/reusable-blocks": "^4.3.3",
-		"@wordpress/style-engine": "^1.9.1",
-		"@wordpress/url": "^3.27.1",
-		"@wordpress/viewport": "^5.3.2",
-		"@wordpress/widgets": "^3.3.3",
+		"@wordpress/a11y": "^3.27.0",
+		"@wordpress/api-fetch": "^6.24.0",
+		"@wordpress/block-editor": "^11.4.0",
+		"@wordpress/block-library": "^8.4.0",
+		"@wordpress/blocks": "^12.4.0",
+		"@wordpress/components": "^23.4.0",
+		"@wordpress/compose": "^6.4.0",
+		"@wordpress/core-data": "^6.4.0",
+		"@wordpress/data": "^8.4.0",
+		"@wordpress/deprecated": "^3.27.0",
+		"@wordpress/editor": "^13.4.0",
+		"@wordpress/element": "^5.4.0",
+		"@wordpress/hooks": "^3.27.0",
+		"@wordpress/html-entities": "^3.27.0",
+		"@wordpress/i18n": "^4.27.0",
+		"@wordpress/icons": "^9.18.0",
+		"@wordpress/interface": "^5.4.0",
+		"@wordpress/keyboard-shortcuts": "^4.4.0",
+		"@wordpress/keycodes": "^3.27.0",
+		"@wordpress/media-utils": "^4.18.0",
+		"@wordpress/notices": "^3.27.0",
+		"@wordpress/plugins": "^5.4.0",
+		"@wordpress/preferences": "^3.4.0",
+		"@wordpress/private-apis": "^0.9.0",
+		"@wordpress/reusable-blocks": "^4.4.0",
+		"@wordpress/style-engine": "^1.10.0",
+		"@wordpress/url": "^3.28.0",
+		"@wordpress/viewport": "^5.4.0",
+		"@wordpress/widgets": "^3.4.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
+	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
 }

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

@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -108,19 +106,7 @@ export default function NewTemplate( {
 		}
 		setIsCreatingTemplate( true );
 		try {
-			const { title, description, slug, templatePrefix } = template;
-			let templateContent = template.content;
-			// Try to find fallback content from existing templates.
-			if ( ! templateContent ) {
-				const fallbackTemplate = await apiFetch( {
-					path: addQueryArgs( '/wp/v2/templates/lookup', {
-						slug,
-						is_custom: ! isWPSuggestion,
-						template_prefix: templatePrefix,
-					} ),
-				} );
-				templateContent = fallbackTemplate.content.raw;
-			}
+			const { title, description, slug } = template;
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -130,7 +116,6 @@ export default function NewTemplate( {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
-					content: templateContent,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
 					is_wp_suggestion: isWPSuggestion,
 				},

package/src/components/app/index.js

@@ -35,7 +35,6 @@ export default function App() {
 			<SlotFillProvider>
 				<Popover.Slot />
 				<UnsavedChangesWarning />
-
 				<Routes>
 					<Layout />
 					<PluginArea onError={ onPluginAreaError } />

package/src/components/block-editor/editor-canvas.js

@@ -33,6 +33,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	return (
 		<Iframe
+			expand={ isZoomOutMode }
 			scale={ ( isZoomOutMode && 0.45 ) || undefined }
 			frameSize={ isZoomOutMode ? 100 : undefined }
 			style={ enableResizing ? {} : deviceStyles }

package/src/components/editor/index.js

@@ -29,6 +29,7 @@ import KeyboardShortcuts from '../keyboard-shortcuts';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
+import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
@@ -160,6 +161,7 @@ export default function Editor() {
 					<GlobalStylesProvider>
 						<BlockContextProvider value={ blockContext }>
 							<SidebarComplementaryAreaFills />
+							{ isEditMode && <StartTemplateOptions /> }
 							<InterfaceSkeleton
 								enableRegionNavigation={ false }
 								className={

package/src/components/global-styles/border-panel.js

@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { useSupportedStyles, useColorsPerOrigin } from './hooks';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -35,7 +35,7 @@ export function useHasBorderPanel( name ) {
 }
 
 function useHasBorderColorControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.color', name )[ 0 ] &&
 		supports.includes( 'borderColor' )
@@ -43,7 +43,7 @@ function useHasBorderColorControl( name ) {
 }
 
 function useHasBorderRadiusControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.radius', name )[ 0 ] &&
 		supports.includes( 'borderRadius' )
@@ -51,7 +51,7 @@ function useHasBorderRadiusControl( name ) {
 }
 
 function useHasBorderStyleControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.style', name )[ 0 ] &&
 		supports.includes( 'borderStyle' )
@@ -59,7 +59,7 @@ function useHasBorderStyleControl( name ) {
 }
 
 function useHasBorderWidthControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		useGlobalSetting( 'border.width', name )[ 0 ] &&
 		supports.includes( 'borderWidth' )

package/src/components/global-styles/color-palette-panel.js

@@ -55,6 +55,7 @@ export default function ColorPalettePanel( { name } ) {
 					colors={ themeColors }
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -66,12 +67,14 @@ export default function ColorPalettePanel( { name } ) {
 						colors={ defaultColors }
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelHeadingLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelHeadingLevel={ 3 }
 				emptyMessage={ __(
 					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }

package/src/components/global-styles/color-utils.js

@@ -1,11 +1,10 @@
 /**
  * Internal dependencies
  */
-
-import { getSupportedGlobalStylesPanels } from './hooks';
+import { useSupportedStyles } from './hooks';
 
 export function useHasColorPanel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
+	const supports = useSupportedStyles( name );
 	return (
 		supports.includes( 'color' ) ||
 		supports.includes( 'backgroundColor' ) ||

package/src/components/global-styles/context-menu.js

@@ -21,6 +21,8 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,15 +30,28 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasTypographyPanel } from './typography-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
 import { useHasShadowControl } from './shadow-panel';
+import { unlock } from '../../private-apis';
+import { useSupportedStyles } from './hooks';
+
+const {
+	useHasTypographyPanel,
+	useGlobalSetting,
+	overrideSettingsWithSupports,
+} = unlock( blockEditorPrivateApis );
 
 function ContextMenu( { name, parentMenu = '' } ) {
-	const hasTypographyPanel = useHasTypographyPanel( name );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const supports = useSupportedStyles( name );
+	const settings = useMemo(
+		() => overrideSettingsWithSupports( rawSettings, supports ),
+		[ rawSettings, supports ]
+	);
+	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasEffectsPanel = useHasShadowControl( name );

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

@@ -101,7 +101,7 @@ function CustomCSSControl( { blockName } ) {
 				</Panel>
 			) }
 			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
+				<Subtitle>{ __( 'Additional CSS' ) }</Subtitle>
 				<TextareaControl
 					__nextHasNoMarginBottom
 					value={