@wordpress/block-editor 12.19.2 → 12.20.0

package/build-module/store/utils.js

@@ -1,3 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { selectBlockPatternsKey } from './private-keys';
 export const checkAllowList = (list, item, defaultResult = null) => {
   if (typeof list === 'boolean') {
     return list;
@@ -30,7 +34,7 @@ export const checkAllowListRecursive = (blocks, allowedBlockTypes) => {
   }
   return true;
 };
-export const getAllPatternsDependants = state => {
-  return [state.settings.__experimentalBlockPatterns, state.settings.__experimentalUserPatternCategories, state.settings.__experimentalReusableBlocks, state.settings.__experimentalFetchBlockPatterns, state.blockPatterns];
+export const getAllPatternsDependants = select => state => {
+  return [state.settings.__experimentalBlockPatterns, state.settings.__experimentalUserPatternCategories, state.settings.__experimentalReusableBlocks, state.settings[selectBlockPatternsKey]?.(select), state.blockPatterns];
 };
 //# sourceMappingURL=utils.js.map

package/build-module/store/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["checkAllowList","list","item","defaultResult","Array","isArray","includes","checkAllowListRecursive","blocks","allowedBlockTypes","blocksQueue","length","block","shift","isAllowed","name","blockName","innerBlocks","forEach","innerBlock","push","getAllPatternsDependants","state","settings","__experimentalBlockPatterns","__experimentalUserPatternCategories","__experimentalReusableBlocks","__experimentalFetchBlockPatterns","blockPatterns"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["export const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings.__experimentalFetchBlockPatterns,\n\t\tstate.blockPatterns,\n\t];\n};\n"],"mappings":"AAAA,OAAO,MAAMA,cAAc,GAAGA,CAAEC,IAAI,EAAEC,IAAI,EAAEC,aAAa,GAAG,IAAI,KAAM;EACrE,IAAK,OAAOF,IAAI,KAAK,SAAS,EAAG;IAChC,OAAOA,IAAI;EACZ;EACA,IAAKG,KAAK,CAACC,OAAO,CAAEJ,IAAK,CAAC,EAAG;IAC5B;IACA;IACA;IACA,IAAKA,IAAI,CAACK,QAAQ,CAAE,mBAAoB,CAAC,IAAIJ,IAAI,KAAK,IAAI,EAAG;MAC5D,OAAO,IAAI;IACZ;IACA,OAAOD,IAAI,CAACK,QAAQ,CAAEJ,IAAK,CAAC;EAC7B;EACA,OAAOC,aAAa;AACrB,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGA,CAAEC,MAAM,EAAEC,iBAAiB,KAAM;EACvE,IAAK,OAAOA,iBAAiB,KAAK,SAAS,EAAG;IAC7C,OAAOA,iBAAiB;EACzB;EAEA,MAAMC,WAAW,GAAG,CAAE,GAAGF,MAAM,CAAE;EACjC,OAAQE,WAAW,CAACC,MAAM,GAAG,CAAC,EAAG;IAChC,MAAMC,KAAK,GAAGF,WAAW,CAACG,KAAK,CAAC,CAAC;IAEjC,MAAMC,SAAS,GAAGd,cAAc,CAC/BS,iBAAiB,EACjBG,KAAK,CAACG,IAAI,IAAIH,KAAK,CAACI,SAAS,EAC7B,IACD,CAAC;IACD,IAAK,CAAEF,SAAS,EAAG;MAClB,OAAO,KAAK;IACb;IAEAF,KAAK,CAACK,WAAW,EAAEC,OAAO,CAAIC,UAAU,IAAM;MAC7CT,WAAW,CAACU,IAAI,CAAED,UAAW,CAAC;IAC/B,CAAE,CAAC;EACJ;EAEA,OAAO,IAAI;AACZ,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAKC,KAAK,IAAM;EACpD,OAAO,CACNA,KAAK,CAACC,QAAQ,CAACC,2BAA2B,EAC1CF,KAAK,CAACC,QAAQ,CAACE,mCAAmC,EAClDH,KAAK,CAACC,QAAQ,CAACG,4BAA4B,EAC3CJ,KAAK,CAACC,QAAQ,CAACI,gCAAgC,EAC/CL,KAAK,CAACM,aAAa,CACnB;AACF,CAAC"}
+{"version":3,"names":["selectBlockPatternsKey","checkAllowList","list","item","defaultResult","Array","isArray","includes","checkAllowListRecursive","blocks","allowedBlockTypes","blocksQueue","length","block","shift","isAllowed","name","blockName","innerBlocks","forEach","innerBlock","push","getAllPatternsDependants","select","state","settings","__experimentalBlockPatterns","__experimentalUserPatternCategories","__experimentalReusableBlocks","blockPatterns"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { selectBlockPatternsKey } from './private-keys';\n\nexport const checkAllowList = ( list, item, defaultResult = null ) => {\n\tif ( typeof list === 'boolean' ) {\n\t\treturn list;\n\t}\n\tif ( Array.isArray( list ) ) {\n\t\t// TODO: when there is a canonical way to detect that we are editing a post\n\t\t// the following check should be changed to something like:\n\t\t// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )\n\t\tif ( list.includes( 'core/post-content' ) && item === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn list.includes( item );\n\t}\n\treturn defaultResult;\n};\n\nexport const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {\n\tif ( typeof allowedBlockTypes === 'boolean' ) {\n\t\treturn allowedBlockTypes;\n\t}\n\n\tconst blocksQueue = [ ...blocks ];\n\twhile ( blocksQueue.length > 0 ) {\n\t\tconst block = blocksQueue.shift();\n\n\t\tconst isAllowed = checkAllowList(\n\t\t\tallowedBlockTypes,\n\t\t\tblock.name || block.blockName,\n\t\t\ttrue\n\t\t);\n\t\tif ( ! isAllowed ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tblock.innerBlocks?.forEach( ( innerBlock ) => {\n\t\t\tblocksQueue.push( innerBlock );\n\t\t} );\n\t}\n\n\treturn true;\n};\n\nexport const getAllPatternsDependants = ( select ) => ( state ) => {\n\treturn [\n\t\tstate.settings.__experimentalBlockPatterns,\n\t\tstate.settings.__experimentalUserPatternCategories,\n\t\tstate.settings.__experimentalReusableBlocks,\n\t\tstate.settings[ selectBlockPatternsKey ]?.( select ),\n\t\tstate.blockPatterns,\n\t];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,gBAAgB;AAEvD,OAAO,MAAMC,cAAc,GAAGA,CAAEC,IAAI,EAAEC,IAAI,EAAEC,aAAa,GAAG,IAAI,KAAM;EACrE,IAAK,OAAOF,IAAI,KAAK,SAAS,EAAG;IAChC,OAAOA,IAAI;EACZ;EACA,IAAKG,KAAK,CAACC,OAAO,CAAEJ,IAAK,CAAC,EAAG;IAC5B;IACA;IACA;IACA,IAAKA,IAAI,CAACK,QAAQ,CAAE,mBAAoB,CAAC,IAAIJ,IAAI,KAAK,IAAI,EAAG;MAC5D,OAAO,IAAI;IACZ;IACA,OAAOD,IAAI,CAACK,QAAQ,CAAEJ,IAAK,CAAC;EAC7B;EACA,OAAOC,aAAa;AACrB,CAAC;AAED,OAAO,MAAMI,uBAAuB,GAAGA,CAAEC,MAAM,EAAEC,iBAAiB,KAAM;EACvE,IAAK,OAAOA,iBAAiB,KAAK,SAAS,EAAG;IAC7C,OAAOA,iBAAiB;EACzB;EAEA,MAAMC,WAAW,GAAG,CAAE,GAAGF,MAAM,CAAE;EACjC,OAAQE,WAAW,CAACC,MAAM,GAAG,CAAC,EAAG;IAChC,MAAMC,KAAK,GAAGF,WAAW,CAACG,KAAK,CAAC,CAAC;IAEjC,MAAMC,SAAS,GAAGd,cAAc,CAC/BS,iBAAiB,EACjBG,KAAK,CAACG,IAAI,IAAIH,KAAK,CAACI,SAAS,EAC7B,IACD,CAAC;IACD,IAAK,CAAEF,SAAS,EAAG;MAClB,OAAO,KAAK;IACb;IAEAF,KAAK,CAACK,WAAW,EAAEC,OAAO,CAAIC,UAAU,IAAM;MAC7CT,WAAW,CAACU,IAAI,CAAED,UAAW,CAAC;IAC/B,CAAE,CAAC;EACJ;EAEA,OAAO,IAAI;AACZ,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAKC,MAAM,IAAQC,KAAK,IAAM;EAClE,OAAO,CACNA,KAAK,CAACC,QAAQ,CAACC,2BAA2B,EAC1CF,KAAK,CAACC,QAAQ,CAACE,mCAAmC,EAClDH,KAAK,CAACC,QAAQ,CAACG,4BAA4B,EAC3CJ,KAAK,CAACC,QAAQ,CAAEzB,sBAAsB,CAAE,GAAIuB,MAAO,CAAC,EACpDC,KAAK,CAACK,aAAa,CACnB;AACF,CAAC"}

package/build-style/style-rtl.css

@@ -782,7 +782,7 @@ iframe[name=editor-canvas].has-editor-padding {
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
 }
 
@@ -957,14 +957,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1000001;
 }
 
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.block-editor-block-styles + .default-style-picker__default-switcher {
-  margin-top: 16px;
-}
-
 .block-editor-block-styles__preview-panel {
   display: none;
   z-index: 90;
@@ -1002,7 +994,7 @@ iframe[name=editor-canvas].has-editor-padding {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
@@ -1587,16 +1579,6 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-  position: absolute;
-  bottom: 16px;
-  left: 24px;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-  fill: #cc1818;
-}
-
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2015,7 +1997,7 @@ iframe[name=editor-canvas].has-editor-padding {
   box-shadow: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
   text-decoration: none;
 }
@@ -3160,7 +3142,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .html-anchor-control .components-external-link {
-  display: block;
+  display: inline-block;
   margin-top: 8px;
 }
 
@@ -3531,16 +3513,14 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
+  position: relative;
 }
 @media (min-width: 600px) {
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
-    position: relative;
-  }
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
     content: "";
     height: 1px;
     width: 100%;
-    background: #1e1e1e;
+    background: #e0e0e0;
     position: absolute;
     top: 50%;
     right: 50%;
@@ -3548,6 +3528,11 @@ iframe[name=editor-canvas].has-editor-padding {
     margin-top: -0.5px;
   }
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+    background: #1e1e1e;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-right: 6px;

package/build-style/style.css

@@ -782,7 +782,7 @@ iframe[name=editor-canvas].has-editor-padding {
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
 }
 
@@ -957,14 +957,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1000001;
 }
 
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.block-editor-block-styles + .default-style-picker__default-switcher {
-  margin-top: 16px;
-}
-
 .block-editor-block-styles__preview-panel {
   display: none;
   z-index: 90;
@@ -1002,7 +994,7 @@ iframe[name=editor-canvas].has-editor-padding {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
@@ -1588,16 +1580,6 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-  position: absolute;
-  bottom: 16px;
-  right: 24px;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-  fill: #cc1818;
-}
-
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -2016,7 +1998,7 @@ iframe[name=editor-canvas].has-editor-padding {
   box-shadow: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  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;
   text-decoration: none;
 }
@@ -3161,7 +3143,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .html-anchor-control .components-external-link {
-  display: block;
+  display: inline-block;
   margin-top: 8px;
 }
 
@@ -3532,16 +3514,14 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
+  position: relative;
 }
 @media (min-width: 600px) {
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
-    position: relative;
-  }
-  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
     content: "";
     height: 1px;
     width: 100%;
-    background: #1e1e1e;
+    background: #e0e0e0;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -3549,6 +3529,11 @@ iframe[name=editor-canvas].has-editor-padding {
     margin-top: -0.5px;
   }
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+    background: #1e1e1e;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-left: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.19.2",
+	"version": "12.20.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,41 +35,40 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/blob": "^3.51.1",
-		"@wordpress/blocks": "^12.28.2",
-		"@wordpress/commands": "^0.22.2",
-		"@wordpress/components": "^26.0.2",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/escape-html": "^2.51.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.1",
-		"@wordpress/is-shallow-equal": "^4.51.1",
-		"@wordpress/keyboard-shortcuts": "^4.28.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/preferences": "^3.28.2",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/rich-text": "^6.28.2",
-		"@wordpress/style-engine": "^1.34.1",
-		"@wordpress/token-list": "^2.51.1",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/warning": "^2.51.1",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.52.0",
+		"@wordpress/api-fetch": "^6.49.0",
+		"@wordpress/blob": "^3.52.0",
+		"@wordpress/blocks": "^12.29.0",
+		"@wordpress/commands": "^0.23.0",
+		"@wordpress/components": "^27.0.0",
+		"@wordpress/compose": "^6.29.0",
+		"@wordpress/data": "^9.22.0",
+		"@wordpress/date": "^4.52.0",
+		"@wordpress/deprecated": "^3.52.0",
+		"@wordpress/dom": "^3.52.0",
+		"@wordpress/element": "^5.29.0",
+		"@wordpress/escape-html": "^2.52.0",
+		"@wordpress/hooks": "^3.52.0",
+		"@wordpress/html-entities": "^3.52.0",
+		"@wordpress/i18n": "^4.52.0",
+		"@wordpress/icons": "^9.43.0",
+		"@wordpress/is-shallow-equal": "^4.52.0",
+		"@wordpress/keyboard-shortcuts": "^4.29.0",
+		"@wordpress/keycodes": "^3.52.0",
+		"@wordpress/notices": "^4.20.0",
+		"@wordpress/preferences": "^3.29.0",
+		"@wordpress/private-apis": "^0.34.0",
+		"@wordpress/rich-text": "^6.29.0",
+		"@wordpress/style-engine": "^1.35.0",
+		"@wordpress/token-list": "^2.52.0",
+		"@wordpress/url": "^3.53.0",
+		"@wordpress/warning": "^2.52.0",
+		"@wordpress/wordcount": "^3.52.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
-		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
@@ -87,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
+	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
 }

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

@@ -14,6 +14,7 @@ import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
+import { useBlockCommands } from '../use-block-commands';
 
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
@@ -23,6 +24,7 @@ export function ExperimentalBlockCanvas( {
 	contentRef: contentRefProp,
 	iframeProps,
 } ) {
+	useBlockCommands();
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();

package/src/components/block-heading-level-dropdown/index.js

@@ -46,31 +46,23 @@ export default function HeadingLevelDropdown( {
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
 			controls={ options.map( ( targetLevel ) => {
-				{
-					const isActive = targetLevel === value;
-
-					return {
-						icon: (
-							<HeadingLevelIcon
-								level={ targetLevel }
-								isPressed={ isActive }
-							/>
-						),
-						title:
-							targetLevel === 0
-								? __( 'Paragraph' )
-								: sprintf(
-										// translators: %s: heading level e.g: "1", "2", "3"
-										__( 'Heading %d' ),
-										targetLevel
-								  ),
-						isActive,
-						onClick() {
-							onChange( targetLevel );
-						},
-						role: 'menuitemradio',
-					};
-				}
+				const isActive = targetLevel === value;
+				return {
+					icon: <HeadingLevelIcon level={ targetLevel } />,
+					title:
+						targetLevel === 0
+							? __( 'Paragraph' )
+							: sprintf(
+									// translators: %s: heading level e.g: "1", "2", "3"
+									__( 'Heading %d' ),
+									targetLevel
+							  ),
+					isActive,
+					onClick() {
+						onChange( targetLevel );
+					},
+					role: 'menuitemradio',
+				};
 			} ) }
 		/>
 	);

package/src/components/block-inspector/index.js

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
@@ -21,7 +20,6 @@ import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
@@ -275,15 +273,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						<div>
 							<PanelBody title={ __( 'Styles' ) }>
 								<BlockStyles clientId={ clientId } />
-								{ hasBlockSupport(
-									blockName,
-									'defaultStylePicker',
-									true
-								) && (
-									<DefaultStylePicker
-										blockName={ blockName }
-									/>
-								) }
 							</PanelBody>
 						</div>
 					) }

package/src/components/block-list/index.js

@@ -46,19 +46,26 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetEditorMode } =
-				select( blockEditorStore );
-			const { outlineMode, focusMode } = getSettings();
-			return {
-				isOutlineMode: outlineMode,
-				isFocusMode: focusMode,
-				editorMode: __unstableGetEditorMode(),
-			};
-		},
-		[]
-	);
+	const {
+		isOutlineMode,
+		isFocusMode,
+		editorMode,
+		temporarilyEditingAsBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getSettings,
+			__unstableGetEditorMode,
+			__unstableGetTemporarilyEditingAsBlocks,
+		} = select( blockEditorStore );
+		const { outlineMode, focusMode } = getSettings();
+		return {
+			isOutlineMode: outlineMode,
+			isFocusMode: focusMode,
+			editorMode: __unstableGetEditorMode(),
+			temporarilyEditingAsBlocks:
+				__unstableGetTemporarilyEditingAsBlocks(),
+		};
+	}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,6 +122,11 @@ function Root( { className, ...settings } ) {
 	return (
 		<IntersectionObserver.Provider value={ intersectionObserver }>
 			<div { ...innerBlocksProps } />
+			{ !! temporarilyEditingAsBlocks && (
+				<StopEditingAsBlocksOnOutsideSelect
+					clientId={ temporarilyEditingAsBlocks }
+				/>
+			) }
 		</IntersectionObserver.Provider>
 	);
 }
@@ -159,43 +171,36 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const {
-		order,
-		selectedBlocks,
-		visibleBlocks,
-		temporarilyEditingAsBlocks,
-		shouldRenderAppender,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockOrder,
-				getSelectedBlockClientId,
-				getSelectedBlockClientIds,
-				__unstableGetVisibleBlocks,
-				__unstableGetTemporarilyEditingAsBlocks,
-				getTemplateLock,
-				getBlockEditingMode,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
-			const selectedBlockClientId = getSelectedBlockClientId();
-			return {
-				order: getBlockOrder( rootClientId ),
-				selectedBlocks: getSelectedBlockClientIds(),
-				visibleBlocks: __unstableGetVisibleBlocks(),
-				temporarilyEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks(),
-				shouldRenderAppender:
-					hasAppender &&
-					( hasCustomAppender
-						? ! getTemplateLock( rootClientId ) &&
-						  getBlockEditingMode( rootClientId ) !== 'disabled' &&
-						  __unstableGetEditorMode() !== 'zoom-out'
-						: rootClientId === selectedBlockClientId ||
-						  ( ! rootClientId && ! selectedBlockClientId ) ),
-			};
-		},
-		[ rootClientId, hasAppender, hasCustomAppender ]
-	);
+	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockOrder,
+					getSelectedBlockClientId,
+					getSelectedBlockClientIds,
+					__unstableGetVisibleBlocks,
+					getTemplateLock,
+					getBlockEditingMode,
+					__unstableGetEditorMode,
+				} = select( blockEditorStore );
+				const selectedBlockClientId = getSelectedBlockClientId();
+				return {
+					order: getBlockOrder( rootClientId ),
+					selectedBlocks: getSelectedBlockClientIds(),
+					visibleBlocks: __unstableGetVisibleBlocks(),
+					shouldRenderAppender:
+						hasAppender &&
+						( hasCustomAppender
+							? ! getTemplateLock( rootClientId ) &&
+							  getBlockEditingMode( rootClientId ) !==
+									'disabled' &&
+							  __unstableGetEditorMode() !== 'zoom-out'
+							: rootClientId === selectedBlockClientId ||
+							  ( ! rootClientId && ! selectedBlockClientId ) ),
+				};
+			},
+			[ rootClientId, hasAppender, hasCustomAppender ]
+		);
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -216,11 +221,6 @@ function Items( {
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
-			{ !! temporarilyEditingAsBlocks && (
-				<StopEditingAsBlocksOnOutsideSelect
-					clientId={ temporarilyEditingAsBlocks }
-				/>
-			) }
 			{ shouldRenderAppender && (
 				<BlockListAppender
 					tagName={ __experimentalAppenderTagName }

package/src/components/block-preview/index.js

@@ -54,7 +54,11 @@ export function BlockPreview( {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const renderedBlocks = useMemo(
@@ -117,6 +121,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		() => ( {
 			...originalSettings,
 			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			focusMode: false, // Disable "Spotlight mode".
 			__unstableIsPreviewMode: true,
 		} ),
 		[ originalSettings ]

package/src/components/block-settings-menu/block-parent-selector-menu-item.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockParentSelectorMenuItem( {
+	parentClientId,
+	parentBlockType,
+} ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}