@wordpress/block-editor 12.0.0 → 12.1.0

package/build-module/utils/use-should-contextual-toolbar-show.js

@@ -13,16 +13,15 @@ import { unlock } from '../lock-unlock';
 /**
  * Returns true if the contextual block toolbar should show, or false if it should be hidden.
  *
- * @param {string} clientId The client ID of the block.
- *
  * @return {boolean} Whether the block toolbar is hidden.
  */
 
-export function useShouldContextualToolbarShow(clientId) {
+export function useShouldContextualToolbarShow() {
   const isLargeViewport = useViewportMatch('medium');
   const {
     shouldShowContextualToolbar,
-    canFocusHiddenToolbar
+    canFocusHiddenToolbar,
+    fixedToolbarCanBeFocused
   } = useSelect(select => {
     const {
       __unstableGetEditorMode,
@@ -31,26 +30,31 @@ export function useShouldContextualToolbarShow(clientId) {
       isBlockInterfaceHidden,
       getBlock,
       getSettings,
-      isNavigationMode
+      isNavigationMode,
+      getSelectedBlockClientId,
+      getFirstMultiSelectedBlockClientId
     } = unlock(select(blockEditorStore));
     const isEditMode = __unstableGetEditorMode() === 'edit';
     const hasFixedToolbar = getSettings().hasFixedToolbar;
     const isDistractionFree = getSettings().isDistractionFree;
-    const hasClientId = !!clientId;
-    const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(getBlock(clientId) || {});
+    const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
+    const hasSelectedBlockId = !!selectedBlockId;
+    const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(getBlock(selectedBlockId) || {});
 
-    const _shouldShowContextualToolbar = isEditMode && !hasFixedToolbar && (!isDistractionFree || isNavigationMode()) && isLargeViewport && !isMultiSelecting() && !isTyping() && hasClientId && !isEmptyDefaultBlock && !isBlockInterfaceHidden();
+    const _shouldShowContextualToolbar = isEditMode && !hasFixedToolbar && (!isDistractionFree || isNavigationMode()) && isLargeViewport && !isMultiSelecting() && !isTyping() && hasSelectedBlockId && !isEmptyDefaultBlock && !isBlockInterfaceHidden();
 
-    const _canFocusHiddenToolbar = isEditMode && hasClientId && !_shouldShowContextualToolbar && !hasFixedToolbar && !isDistractionFree && !isEmptyDefaultBlock;
+    const _canFocusHiddenToolbar = isEditMode && hasSelectedBlockId && !_shouldShowContextualToolbar && !hasFixedToolbar && !isDistractionFree && !isEmptyDefaultBlock;
 
     return {
       shouldShowContextualToolbar: _shouldShowContextualToolbar,
-      canFocusHiddenToolbar: _canFocusHiddenToolbar
+      canFocusHiddenToolbar: _canFocusHiddenToolbar,
+      fixedToolbarCanBeFocused: (hasFixedToolbar || !isLargeViewport) && selectedBlockId
     };
-  }, [clientId, isLargeViewport]);
+  }, [isLargeViewport]);
   return {
     shouldShowContextualToolbar,
-    canFocusHiddenToolbar
+    canFocusHiddenToolbar,
+    fixedToolbarCanBeFocused
   };
 }
 //# sourceMappingURL=use-should-contextual-toolbar-show.js.map

package/build-module/utils/use-should-contextual-toolbar-show.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/use-should-contextual-toolbar-show.js"],"names":["useSelect","isUnmodifiedDefaultBlock","useViewportMatch","store","blockEditorStore","unlock","useShouldContextualToolbarShow","clientId","isLargeViewport","shouldShowContextualToolbar","canFocusHiddenToolbar","select","__unstableGetEditorMode","isMultiSelecting","isTyping","isBlockInterfaceHidden","getBlock","getSettings","isNavigationMode","isEditMode","hasFixedToolbar","isDistractionFree","hasClientId","isEmptyDefaultBlock","_shouldShowContextualToolbar","_canFocusHiddenToolbar"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,wBAAT,QAAyC,mBAAzC;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,UAA1C;AACA,SAASC,MAAT,QAAuB,gBAAvB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,8BAAT,CAAyCC,QAAzC,EAAoD;AAC1D,QAAMC,eAAe,GAAGN,gBAAgB,CAAE,QAAF,CAAxC;AAEA,QAAM;AAAEO,IAAAA,2BAAF;AAA+BC,IAAAA;AAA/B,MAAyDV,SAAS,CACrEW,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,uBADK;AAELC,MAAAA,gBAFK;AAGLC,MAAAA,QAHK;AAILC,MAAAA,sBAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,WANK;AAOLC,MAAAA;AAPK,QAQFb,MAAM,CAAEM,MAAM,CAAEP,gBAAF,CAAR,CARV;AAUA,UAAMe,UAAU,GAAGP,uBAAuB,OAAO,MAAjD;AACA,UAAMQ,eAAe,GAAGH,WAAW,GAAGG,eAAtC;AACA,UAAMC,iBAAiB,GAAGJ,WAAW,GAAGI,iBAAxC;AACA,UAAMC,WAAW,GAAG,CAAC,CAAEf,QAAvB;AACA,UAAMgB,mBAAmB,GAAGtB,wBAAwB,CACnDe,QAAQ,CAAET,QAAF,CAAR,IAAwB,EAD2B,CAApD;;AAIA,UAAMiB,4BAA4B,GACjCL,UAAU,IACV,CAAEC,eADF,KAEE,CAAEC,iBAAF,IAAuBH,gBAAgB,EAFzC,KAGAV,eAHA,IAIA,CAAEK,gBAAgB,EAJlB,IAKA,CAAEC,QAAQ,EALV,IAMAQ,WANA,IAOA,CAAEC,mBAPF,IAQA,CAAER,sBAAsB,EATzB;;AAWA,UAAMU,sBAAsB,GAC3BN,UAAU,IACVG,WADA,IAEA,CAAEE,4BAFF,IAGA,CAAEJ,eAHF,IAIA,CAAEC,iBAJF,IAKA,CAAEE,mBANH;;AAQA,WAAO;AACNd,MAAAA,2BAA2B,EAAEe,4BADvB;AAENd,MAAAA,qBAAqB,EAAEe;AAFjB,KAAP;AAIA,GA3CsE,EA4CvE,CAAElB,QAAF,EAAYC,eAAZ,CA5CuE,CAAxE;AA+CA,SAAO;AACNC,IAAAA,2BADM;AAENC,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the contextual block toolbar should show, or false if it should be hidden.\n *\n * @param {string} clientId The client ID of the block.\n *\n * @return {boolean} Whether the block toolbar is hidden.\n */\nexport function useShouldContextualToolbarShow( clientId ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst { shouldShowContextualToolbar, canFocusHiddenToolbar } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t\tisMultiSelecting,\n\t\t\t\tisTyping,\n\t\t\t\tisBlockInterfaceHidden,\n\t\t\t\tgetBlock,\n\t\t\t\tgetSettings,\n\t\t\t\tisNavigationMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst isEditMode = __unstableGetEditorMode() === 'edit';\n\t\t\tconst hasFixedToolbar = getSettings().hasFixedToolbar;\n\t\t\tconst isDistractionFree = getSettings().isDistractionFree;\n\t\t\tconst hasClientId = !! clientId;\n\t\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\t\tgetBlock( clientId ) || {}\n\t\t\t);\n\n\t\t\tconst _shouldShowContextualToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t( ! isDistractionFree || isNavigationMode() ) &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\t! isMultiSelecting() &&\n\t\t\t\t! isTyping() &&\n\t\t\t\thasClientId &&\n\t\t\t\t! isEmptyDefaultBlock &&\n\t\t\t\t! isBlockInterfaceHidden();\n\n\t\t\tconst _canFocusHiddenToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\thasClientId &&\n\t\t\t\t! _shouldShowContextualToolbar &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\t! isEmptyDefaultBlock;\n\n\t\t\treturn {\n\t\t\t\tshouldShowContextualToolbar: _shouldShowContextualToolbar,\n\t\t\t\tcanFocusHiddenToolbar: _canFocusHiddenToolbar,\n\t\t\t};\n\t\t},\n\t\t[ clientId, isLargeViewport ]\n\t);\n\n\treturn {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/use-should-contextual-toolbar-show.js"],"names":["useSelect","isUnmodifiedDefaultBlock","useViewportMatch","store","blockEditorStore","unlock","useShouldContextualToolbarShow","isLargeViewport","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","select","__unstableGetEditorMode","isMultiSelecting","isTyping","isBlockInterfaceHidden","getBlock","getSettings","isNavigationMode","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","isEditMode","hasFixedToolbar","isDistractionFree","selectedBlockId","hasSelectedBlockId","isEmptyDefaultBlock","_shouldShowContextualToolbar","_canFocusHiddenToolbar"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,wBAAT,QAAyC,mBAAzC;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,UAA1C;AACA,SAASC,MAAT,QAAuB,gBAAvB;AAEA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,8BAAT,GAA0C;AAChD,QAAMC,eAAe,GAAGL,gBAAgB,CAAE,QAAF,CAAxC;AAEA,QAAM;AACLM,IAAAA,2BADK;AAELC,IAAAA,qBAFK;AAGLC,IAAAA;AAHK,MAIFV,SAAS,CACVW,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,uBADK;AAELC,MAAAA,gBAFK;AAGLC,MAAAA,QAHK;AAILC,MAAAA,sBAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,WANK;AAOLC,MAAAA,gBAPK;AAQLC,MAAAA,wBARK;AASLC,MAAAA;AATK,QAUFf,MAAM,CAAEM,MAAM,CAAEP,gBAAF,CAAR,CAVV;AAYA,UAAMiB,UAAU,GAAGT,uBAAuB,OAAO,MAAjD;AACA,UAAMU,eAAe,GAAGL,WAAW,GAAGK,eAAtC;AACA,UAAMC,iBAAiB,GAAGN,WAAW,GAAGM,iBAAxC;AACA,UAAMC,eAAe,GACpBJ,kCAAkC,MAClCD,wBAAwB,EAFzB;AAGA,UAAMM,kBAAkB,GAAG,CAAC,CAAED,eAA9B;AACA,UAAME,mBAAmB,GAAGzB,wBAAwB,CACnDe,QAAQ,CAAEQ,eAAF,CAAR,IAA+B,EADoB,CAApD;;AAIA,UAAMG,4BAA4B,GACjCN,UAAU,IACV,CAAEC,eADF,KAEE,CAAEC,iBAAF,IAAuBL,gBAAgB,EAFzC,KAGAX,eAHA,IAIA,CAAEM,gBAAgB,EAJlB,IAKA,CAAEC,QAAQ,EALV,IAMAW,kBANA,IAOA,CAAEC,mBAPF,IAQA,CAAEX,sBAAsB,EATzB;;AAWA,UAAMa,sBAAsB,GAC3BP,UAAU,IACVI,kBADA,IAEA,CAAEE,4BAFF,IAGA,CAAEL,eAHF,IAIA,CAAEC,iBAJF,IAKA,CAAEG,mBANH;;AAQA,WAAO;AACNlB,MAAAA,2BAA2B,EAAEmB,4BADvB;AAENlB,MAAAA,qBAAqB,EAAEmB,sBAFjB;AAGNlB,MAAAA,wBAAwB,EACvB,CAAEY,eAAe,IAAI,CAAEf,eAAvB,KAA4CiB;AAJvC,KAAP;AAMA,GAlDW,EAmDZ,CAAEjB,eAAF,CAnDY,CAJb;AA0DA,SAAO;AACNC,IAAAA,2BADM;AAENC,IAAAA,qBAFM;AAGNC,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the contextual block toolbar should show, or false if it should be hidden.\n *\n * @return {boolean} Whether the block toolbar is hidden.\n */\nexport function useShouldContextualToolbarShow() {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t\tisMultiSelecting,\n\t\t\t\tisTyping,\n\t\t\t\tisBlockInterfaceHidden,\n\t\t\t\tgetBlock,\n\t\t\t\tgetSettings,\n\t\t\t\tisNavigationMode,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\tgetFirstMultiSelectedBlockClientId,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst isEditMode = __unstableGetEditorMode() === 'edit';\n\t\t\tconst hasFixedToolbar = getSettings().hasFixedToolbar;\n\t\t\tconst isDistractionFree = getSettings().isDistractionFree;\n\t\t\tconst selectedBlockId =\n\t\t\t\tgetFirstMultiSelectedBlockClientId() ||\n\t\t\t\tgetSelectedBlockClientId();\n\t\t\tconst hasSelectedBlockId = !! selectedBlockId;\n\t\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\t\tgetBlock( selectedBlockId ) || {}\n\t\t\t);\n\n\t\t\tconst _shouldShowContextualToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t( ! isDistractionFree || isNavigationMode() ) &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\t! isMultiSelecting() &&\n\t\t\t\t! isTyping() &&\n\t\t\t\thasSelectedBlockId &&\n\t\t\t\t! isEmptyDefaultBlock &&\n\t\t\t\t! isBlockInterfaceHidden();\n\n\t\t\tconst _canFocusHiddenToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\thasSelectedBlockId &&\n\t\t\t\t! _shouldShowContextualToolbar &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\t! isEmptyDefaultBlock;\n\n\t\t\treturn {\n\t\t\t\tshouldShowContextualToolbar: _shouldShowContextualToolbar,\n\t\t\t\tcanFocusHiddenToolbar: _canFocusHiddenToolbar,\n\t\t\t\tfixedToolbarCanBeFocused:\n\t\t\t\t\t( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId,\n\t\t\t};\n\t\t},\n\t\t[ isLargeViewport ]\n\t);\n\n\treturn {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t};\n}\n"]}

package/build-style/content-rtl.css

@@ -151,7 +151,6 @@
 }
 .block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
   border-radius: 2px;
-  overflow: hidden;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;

package/build-style/content.css

@@ -151,7 +151,6 @@
 }
 .block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
   border-radius: 2px;
-  overflow: hidden;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;

package/build-style/style-rtl.css

@@ -407,6 +407,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     background-color: #ddd;
     position: relative;
   }
+  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 153.6px;
+  }
+  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-right: 268.8px;
+  }
   .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
     position: relative;
     top: -1px;
@@ -628,7 +634,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   left: 1px;
   bottom: 1px;
   right: 1px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
 }
 
 .block-editor-block-breadcrumb__current {
@@ -917,8 +924,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-block-patterns-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);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title {
   color: var(--wp-admin-theme-color);
@@ -1031,25 +1039,26 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   justify-content: space-between;
   gap: 8px;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #ccc;
   display: inline-block;
   width: calc(50% - 4px);
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item:focus, .block-editor-block-styles__variants .block-editor-block-styles__item:hover {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
   color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px #ccc;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item.is-active, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover {
   background-color: #1e1e1e;
   box-shadow: none;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
   color: #fff;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
+.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: 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 {
   word-break: break-all;
@@ -1270,8 +1279,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-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);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
   color: var(--wp-admin-theme-color);
@@ -1632,6 +1642,20 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 24px;
 }
 
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+  font-family: Menlo, Consolas, monaco, monospace;
+}
+
+.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;
@@ -2289,10 +2313,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-list-view-leaf {
   position: relative;
 }
-.block-editor-list-view-leaf .components-button[aria-expanded=true] {
-  color: #1e1e1e;
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
+  color: inherit;
 }
-.block-editor-list-view-leaf .components-button:hover {
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
   color: var(--wp-admin-theme-color);
 }
 .block-editor-list-view-leaf.is-selected td {

package/build-style/style.css

@@ -407,6 +407,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     background-color: #ddd;
     position: relative;
   }
+  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 153.6px;
+  }
+  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-left: 268.8px;
+  }
   .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
     position: relative;
     top: -1px;
@@ -628,7 +634,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   right: 1px;
   bottom: 1px;
   left: 1px;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
 }
 
 .block-editor-block-breadcrumb__current {
@@ -917,8 +924,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-block-patterns-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);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title {
   color: var(--wp-admin-theme-color);
@@ -1031,25 +1039,26 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   justify-content: space-between;
   gap: 8px;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #ccc;
   display: inline-block;
   width: calc(50% - 4px);
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item:focus, .block-editor-block-styles__variants .block-editor-block-styles__item:hover {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
   color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px #ccc;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item.is-active, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover {
   background-color: #1e1e1e;
   box-shadow: none;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
+.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
   color: #fff;
 }
-.block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
+.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: 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 {
   word-break: break-all;
@@ -1270,8 +1279,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-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);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
   color: var(--wp-admin-theme-color);
@@ -1632,6 +1642,20 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 24px;
 }
 
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+  font-family: Menlo, Consolas, monaco, monospace;
+}
+
+.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;
@@ -2289,10 +2313,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-list-view-leaf {
   position: relative;
 }
-.block-editor-list-view-leaf .components-button[aria-expanded=true] {
-  color: #1e1e1e;
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
+  color: inherit;
 }
-.block-editor-list-view-leaf .components-button:hover {
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
   color: var(--wp-admin-theme-color);
 }
 .block-editor-list-view-leaf.is-selected td {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.0.0",
+	"version": "12.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.32.0",
-		"@wordpress/api-fetch": "^6.29.0",
-		"@wordpress/blob": "^3.32.0",
-		"@wordpress/blocks": "^12.9.0",
-		"@wordpress/components": "^23.9.0",
-		"@wordpress/compose": "^6.9.0",
-		"@wordpress/data": "^9.2.0",
-		"@wordpress/date": "^4.32.0",
-		"@wordpress/deprecated": "^3.32.0",
-		"@wordpress/dom": "^3.32.0",
-		"@wordpress/element": "^5.9.0",
-		"@wordpress/escape-html": "^2.32.0",
-		"@wordpress/hooks": "^3.32.0",
-		"@wordpress/html-entities": "^3.32.0",
-		"@wordpress/i18n": "^4.32.0",
-		"@wordpress/icons": "^9.23.0",
-		"@wordpress/is-shallow-equal": "^4.32.0",
-		"@wordpress/keyboard-shortcuts": "^4.9.0",
-		"@wordpress/keycodes": "^3.32.0",
-		"@wordpress/notices": "^4.0.0",
-		"@wordpress/preferences": "^3.9.0",
-		"@wordpress/private-apis": "^0.14.0",
-		"@wordpress/rich-text": "^6.9.0",
-		"@wordpress/shortcode": "^3.32.0",
-		"@wordpress/style-engine": "^1.15.0",
-		"@wordpress/token-list": "^2.32.0",
-		"@wordpress/url": "^3.33.0",
-		"@wordpress/warning": "^2.32.0",
-		"@wordpress/wordcount": "^3.32.0",
+		"@wordpress/a11y": "^3.33.0",
+		"@wordpress/api-fetch": "^6.30.0",
+		"@wordpress/blob": "^3.33.0",
+		"@wordpress/blocks": "^12.10.0",
+		"@wordpress/components": "^24.0.0",
+		"@wordpress/compose": "^6.10.0",
+		"@wordpress/data": "^9.3.0",
+		"@wordpress/date": "^4.33.0",
+		"@wordpress/deprecated": "^3.33.0",
+		"@wordpress/dom": "^3.33.0",
+		"@wordpress/element": "^5.10.0",
+		"@wordpress/escape-html": "^2.33.0",
+		"@wordpress/hooks": "^3.33.0",
+		"@wordpress/html-entities": "^3.33.0",
+		"@wordpress/i18n": "^4.33.0",
+		"@wordpress/icons": "^9.24.0",
+		"@wordpress/is-shallow-equal": "^4.33.0",
+		"@wordpress/keyboard-shortcuts": "^4.10.0",
+		"@wordpress/keycodes": "^3.33.0",
+		"@wordpress/notices": "^4.1.0",
+		"@wordpress/preferences": "^3.10.0",
+		"@wordpress/private-apis": "^0.15.0",
+		"@wordpress/rich-text": "^6.10.0",
+		"@wordpress/shortcode": "^3.33.0",
+		"@wordpress/style-engine": "^1.16.0",
+		"@wordpress/token-list": "^2.33.0",
+		"@wordpress/url": "^3.34.0",
+		"@wordpress/warning": "^2.33.0",
+		"@wordpress/wordcount": "^3.33.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }

package/src/components/block-breadcrumb/style.scss

@@ -46,7 +46,8 @@
 		right: $border-width;
 		bottom: $border-width;
 		left: $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		@include button-style__focus();
 	}
 }
 

package/src/components/block-controls/slot.js

@@ -7,6 +7,7 @@ import {
 	ToolbarGroup,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -15,11 +16,14 @@ import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
-	const fills = useSlotFills( Slot.__unstableName );
-	const hasFills = Boolean( fills && fills.length );
+	const Slot = groups[ group ]?.Slot;
+	const fills = useSlotFills( Slot?.__unstableName );
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
 
-	if ( ! hasFills ) {
+	if ( ! fills?.length ) {
 		return null;
 	}
 

package/src/components/block-controls/slot.native.js

@@ -6,6 +6,7 @@ import {
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 } from '@wordpress/components';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -14,7 +15,11 @@ import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
+	const Slot = groups[ group ]?.Slot;
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
 
 	if ( group === 'default' ) {
 		return <Slot { ...props } fillProps={ accessibleToolbarState } />;

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

@@ -67,14 +67,18 @@ const BlockDraggable = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				startDraggingBlocks( clientIds );
-				isDragging.current = true;
+				// Defer hiding the dragged source element to the next
+				// frame to enable dragging.
+				window.requestAnimationFrame( () => {
+					startDraggingBlocks( clientIds );
+					isDragging.current = true;
 
-				startScrolling( event );
+					startScrolling( event );
 
-				if ( onDragStart ) {
-					onDragStart();
-				}
+					if ( onDragStart ) {
+						onDragStart();
+					}
+				} );
 			} }
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {

package/src/components/block-draggable/use-scroll-when-dragging.js

@@ -78,7 +78,10 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
 			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
@@ -92,7 +95,10 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
 			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
 			velocityY.current = 0;

package/src/components/block-list/block-invalid-warning.native.js

@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,22 +16,30 @@ import { createBlock } from '@wordpress/blocks';
 import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
-		__( '%s block. This block has invalid content' ),
-		blockTitle
-	);
-
+export default function BlockInvalidWarning( { clientId } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const block = getBlock( clientId );
+		const { name } = block || {};
+
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType?.title;
+		const blockIcon = blockType?.icon;
+
 		return {
 			block,
+			blockTitle: title,
+			icon: blockIcon,
 		};
 	};
 
-	const { block } = useSelect( selector, [ clientId ] );
+	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
+
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		__( '%s block. This block has invalid content' ),
+		blockTitle
+	);
 
 	const { replaceBlock } = useDispatch( blockEditorStore );
 

package/src/components/block-list/block-list-item-cell.native.js

@@ -7,14 +7,23 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
 
-function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
+function BlockListItemCell( { children, item: clientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
+	const { rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return { rootClientId: getBlockRootClientId( clientId ) };
+		},
+		[ clientId ]
+	);
 
 	useEffect( () => {
 		return () => {