@wordpress/block-editor 12.6.0 → 12.8.0

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

@@ -4,18 +4,18 @@
 import { useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useViewportMatch } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
-
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+
 /**
  * Returns true if the contextual block toolbar should show, or false if it should be hidden.
  *
  * @return {boolean} Whether the block toolbar is hidden.
  */
-
 export function useShouldContextualToolbarShow() {
   const isLargeViewport = useViewportMatch('medium');
   const {
@@ -40,11 +40,8 @@ export function useShouldContextualToolbarShow() {
     const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
     const hasSelectedBlockId = !!selectedBlockId;
     const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(getBlock(selectedBlockId) || {});
-
     const _shouldShowContextualToolbar = isEditMode && !hasFixedToolbar && (!isDistractionFree || isNavigationMode()) && isLargeViewport && !isMultiSelecting() && !isTyping() && hasSelectedBlockId && !isEmptyDefaultBlock && !isBlockInterfaceHidden();
-
     const _canFocusHiddenToolbar = isEditMode && hasSelectedBlockId && !_shouldShowContextualToolbar && !hasFixedToolbar && !isDistractionFree && !isEmptyDefaultBlock;
-
     return {
       shouldShowContextualToolbar: _shouldShowContextualToolbar,
       canFocusHiddenToolbar: _canFocusHiddenToolbar,

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","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"]}
+{"version":3,"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"],"sources":["@wordpress/block-editor/src/utils/use-should-contextual-toolbar-show.js"],"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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,MAAM,QAAQ,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,8BAA8BA,CAAA,EAAG;EAChD,MAAMC,eAAe,GAAGL,gBAAgB,CAAE,QAAS,CAAC;EAEpD,MAAM;IACLM,2BAA2B;IAC3BC,qBAAqB;IACrBC;EACD,CAAC,GAAGV,SAAS,CACVW,MAAM,IAAM;IACb,MAAM;MACLC,uBAAuB;MACvBC,gBAAgB;MAChBC,QAAQ;MACRC,sBAAsB;MACtBC,QAAQ;MACRC,WAAW;MACXC,gBAAgB;MAChBC,wBAAwB;MACxBC;IACD,CAAC,GAAGf,MAAM,CAAEM,MAAM,CAAEP,gBAAiB,CAAE,CAAC;IAExC,MAAMiB,UAAU,GAAGT,uBAAuB,CAAC,CAAC,KAAK,MAAM;IACvD,MAAMU,eAAe,GAAGL,WAAW,CAAC,CAAC,CAACK,eAAe;IACrD,MAAMC,iBAAiB,GAAGN,WAAW,CAAC,CAAC,CAACM,iBAAiB;IACzD,MAAMC,eAAe,GACpBJ,kCAAkC,CAAC,CAAC,IACpCD,wBAAwB,CAAC,CAAC;IAC3B,MAAMM,kBAAkB,GAAG,CAAC,CAAED,eAAe;IAC7C,MAAME,mBAAmB,GAAGzB,wBAAwB,CACnDe,QAAQ,CAAEQ,eAAgB,CAAC,IAAI,CAAC,CACjC,CAAC;IAED,MAAMG,4BAA4B,GACjCN,UAAU,IACV,CAAEC,eAAe,KACf,CAAEC,iBAAiB,IAAIL,gBAAgB,CAAC,CAAC,CAAE,IAC7CX,eAAe,IACf,CAAEM,gBAAgB,CAAC,CAAC,IACpB,CAAEC,QAAQ,CAAC,CAAC,IACZW,kBAAkB,IAClB,CAAEC,mBAAmB,IACrB,CAAEX,sBAAsB,CAAC,CAAC;IAE3B,MAAMa,sBAAsB,GAC3BP,UAAU,IACVI,kBAAkB,IAClB,CAAEE,4BAA4B,IAC9B,CAAEL,eAAe,IACjB,CAAEC,iBAAiB,IACnB,CAAEG,mBAAmB;IAEtB,OAAO;MACNlB,2BAA2B,EAAEmB,4BAA4B;MACzDlB,qBAAqB,EAAEmB,sBAAsB;MAC7ClB,wBAAwB,EACvB,CAAEY,eAAe,IAAI,CAAEf,eAAe,KAAMiB;IAC9C,CAAC;EACF,CAAC,EACD,CAAEjB,eAAe,CAClB,CAAC;EAED,OAAO;IACNC,2BAA2B;IAC3BC,qBAAqB;IACrBC;EACD,CAAC;AACF"}

package/build-style/style-rtl.css

@@ -321,41 +321,59 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   z-index: 31;
   display: block;
   width: 100%;
+  overflow: hidden;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar {
+  overflow: auto;
+  overflow-y: hidden;
+}
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-left-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
-  display: none;
+.block-editor-block-contextual-toolbar.is-collapsed::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  width: 48px;
+  height: 100%;
+  background: linear-gradient(to left, #fff, transparent);
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 180px;
     position: fixed;
-    top: 39px;
+    top: 32px;
     min-height: initial;
     border-bottom: none;
     display: flex;
+    height: 60px;
+    align-items: center;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
+  .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 240px;
-    top: 7px;
+    top: 0;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
@@ -468,12 +486,21 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: 100%;
+    width: calc(100% - 180px);
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% + 40px - 180px);
   }
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 240px - 256px);
+    width: auto;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
   }
 }
 
@@ -1011,6 +1038,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content {
+  width: 100%;
   top: 0;
   right: 0;
   transform-origin: top right;
@@ -1972,7 +2000,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 16px 16px;
   order: 20;
 }
 
@@ -2058,6 +2086,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-header {
   align-items: center;
 }
+.block-editor-link-control__search-item.is-url-title .block-editor-link-control__search-item-title {
+  word-break: break-all;
+}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
   margin-left: 8px;
@@ -2077,9 +2108,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
-  margin-bottom: 0.2em;
   font-weight: 500;
   position: relative;
+  line-height: 24px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 600;
@@ -2141,6 +2172,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: row;
   width: 100%;
+  align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {
@@ -2236,6 +2268,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
+.is-preview .block-editor-link-control__setting {
+  padding: 20px 0 8px 8px;
+}
 
 .block-editor-link-control__tools {
   padding: 8px 8px 0 8px;
@@ -2554,6 +2589,24 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
+  display: flex;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
+  background-size: cover;
+  width: 18px;
+  height: 18px;
+  border-radius: 2px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
+  box-shadow: 0 0 0 2px #fff;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
+  margin-right: -6px;
+}
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
 
 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
@@ -3459,6 +3512,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .show-icon-labels .components-toolbar-group {
   flex-shrink: 1;
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar,
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar-group {
+    flex-shrink: 0;
+  }
+}
 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
   margin-right: 6px;
 }

package/build-style/style.css

@@ -321,41 +321,59 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   z-index: 31;
   display: block;
   width: 100%;
+  overflow: hidden;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar {
+  overflow: auto;
+  overflow-y: hidden;
+}
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-right-color: #e0e0e0;
 }
-.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
-  display: none;
+.block-editor-block-contextual-toolbar.is-collapsed::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  width: 48px;
+  height: 100%;
+  background: linear-gradient(to right, #fff, transparent);
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 180px;
     position: fixed;
-    top: 39px;
+    top: 32px;
     min-height: initial;
     border-bottom: none;
     display: flex;
+    height: 60px;
+    align-items: center;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
+  .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 240px;
-    top: 7px;
+    top: 0;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
@@ -468,12 +486,21 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: 100%;
+    width: calc(100% - 180px);
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% + 40px - 180px);
   }
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 240px - 256px);
+    width: auto;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
   }
 }
 
@@ -1011,6 +1038,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content {
+  width: 100%;
   top: 0;
   left: 0;
   transform-origin: top left;
@@ -1973,7 +2001,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 16px 16px;
   order: 20;
 }
 
@@ -2059,6 +2087,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-header {
   align-items: center;
 }
+.block-editor-link-control__search-item.is-url-title .block-editor-link-control__search-item-title {
+  word-break: break-all;
+}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
   margin-right: 8px;
@@ -2078,9 +2109,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
-  margin-bottom: 0.2em;
   font-weight: 500;
   position: relative;
+  line-height: 24px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 600;
@@ -2142,6 +2173,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: row;
   width: 100%;
+  align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {
@@ -2237,6 +2269,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
+.is-preview .block-editor-link-control__setting {
+  padding: 20px 8px 8px 0;
+}
 
 .block-editor-link-control__tools {
   padding: 8px 8px 0 8px;
@@ -2555,6 +2590,24 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
   line-height: 0;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
+  display: flex;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
+  background-size: cover;
+  width: 18px;
+  height: 18px;
+  border-radius: 2px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
+  box-shadow: 0 0 0 2px #fff;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
+  margin-left: -6px;
+}
+.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
 
 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
@@ -3460,6 +3513,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .show-icon-labels .components-toolbar-group {
   flex-shrink: 1;
 }
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar,
+.show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .components-toolbar-group {
+    flex-shrink: 0;
+  }
+}
 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
   margin-left: 6px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.6.0",
+	"version": "12.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.38.0",
-		"@wordpress/api-fetch": "^6.35.0",
-		"@wordpress/blob": "^3.38.0",
-		"@wordpress/blocks": "^12.15.0",
-		"@wordpress/components": "^25.4.0",
-		"@wordpress/compose": "^6.15.0",
-		"@wordpress/data": "^9.8.0",
-		"@wordpress/date": "^4.38.0",
-		"@wordpress/deprecated": "^3.38.0",
-		"@wordpress/dom": "^3.38.0",
-		"@wordpress/element": "^5.15.0",
-		"@wordpress/escape-html": "^2.38.0",
-		"@wordpress/hooks": "^3.38.0",
-		"@wordpress/html-entities": "^3.38.0",
-		"@wordpress/i18n": "^4.38.0",
-		"@wordpress/icons": "^9.29.0",
-		"@wordpress/is-shallow-equal": "^4.38.0",
-		"@wordpress/keyboard-shortcuts": "^4.15.0",
-		"@wordpress/keycodes": "^3.38.0",
-		"@wordpress/notices": "^4.6.0",
-		"@wordpress/preferences": "^3.15.0",
-		"@wordpress/private-apis": "^0.20.0",
-		"@wordpress/rich-text": "^6.15.0",
-		"@wordpress/shortcode": "^3.38.0",
-		"@wordpress/style-engine": "^1.21.0",
-		"@wordpress/token-list": "^2.38.0",
-		"@wordpress/url": "^3.39.0",
-		"@wordpress/warning": "^2.38.0",
-		"@wordpress/wordcount": "^3.38.0",
+		"@wordpress/a11y": "^3.40.0",
+		"@wordpress/api-fetch": "^6.37.0",
+		"@wordpress/blob": "^3.40.0",
+		"@wordpress/blocks": "^12.17.0",
+		"@wordpress/commands": "^0.11.0",
+		"@wordpress/components": "^25.6.0",
+		"@wordpress/compose": "^6.17.0",
+		"@wordpress/data": "^9.10.0",
+		"@wordpress/date": "^4.40.0",
+		"@wordpress/deprecated": "^3.40.0",
+		"@wordpress/dom": "^3.40.0",
+		"@wordpress/element": "^5.17.0",
+		"@wordpress/escape-html": "^2.40.0",
+		"@wordpress/hooks": "^3.40.0",
+		"@wordpress/html-entities": "^3.40.0",
+		"@wordpress/i18n": "^4.40.0",
+		"@wordpress/icons": "^9.31.0",
+		"@wordpress/is-shallow-equal": "^4.40.0",
+		"@wordpress/keyboard-shortcuts": "^4.17.0",
+		"@wordpress/keycodes": "^3.40.0",
+		"@wordpress/notices": "^4.8.0",
+		"@wordpress/preferences": "^3.17.0",
+		"@wordpress/private-apis": "^0.22.0",
+		"@wordpress/rich-text": "^6.17.0",
+		"@wordpress/shortcode": "^3.40.0",
+		"@wordpress/style-engine": "^1.23.0",
+		"@wordpress/token-list": "^2.40.0",
+		"@wordpress/url": "^3.41.0",
+		"@wordpress/warning": "^2.40.0",
+		"@wordpress/wordcount": "^3.40.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -75,7 +76,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.2",
-		"remove-accents": "^0.4.2",
+		"remove-accents": "^0.5.0",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -85,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6f14d11ed4cb59df110a28ebaa23ecba95eb673a"
+	"gitHead": "78a288d55b83a713b2f7d98d5a855c0771a2afc6"
 }

package/src/autocompleters/block.js

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	parse,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -116,14 +117,28 @@ function createBlockCompleter() {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
 		getOptionCompletion( inserterItem ) {
-			const { name, initialAttributes, innerBlocks } = inserterItem;
+			const {
+				name,
+				initialAttributes,
+				innerBlocks,
+				syncStatus,
+				content,
+			} = inserterItem;
+
 			return {
 				action: 'replace',
-				value: createBlock(
-					name,
-					initialAttributes,
-					createBlocksFromInnerBlocksTemplate( innerBlocks )
-				),
+				value:
+					syncStatus === 'unsynced'
+						? parse( content, {
+								__unstableSkipMigrationLogs: true,
+						  } )
+						: createBlock(
+								name,
+								initialAttributes,
+								createBlocksFromInnerBlocksTemplate(
+									innerBlocks
+								)
+						  ),
 			};
 		},
 	};

package/src/components/block-caption/README.md

@@ -0,0 +1,109 @@
+## Block Caption
+
+The `BlockCaption` component renders block-level UI for adding and editing captions. It wraps logic around the more generic `Caption` component to provide an editable caption field that is designed specifically for block-level use.
+
+`BlockCaption` is used in several native blocks, including `Video`, `Image`, `Audio`, etc.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders an editable caption field designed specifically for block-level use.
+
+```jsx
+import { BlockCaption } from '@wordpress/block-editor';
+
+const MyBlockCaption = (
+	clientId,
+	isCaptionSelected,
+	onFocusCaption,
+	onBlur,
+	insertBlocksAfter
+) => (
+	<BlockCaption
+		clientId={ clientId }
+		accessible={ true }
+		accessibilityLabelCreator={ ( caption ) =>
+			! caption
+				? /* translators: accessibility text. Empty caption. */
+				  'Caption. Empty'
+				: sprintf(
+						/* translators: accessibility text. %s: caption. */
+						__( 'Caption. %s' ),
+						caption
+				  )
+		}
+		isSelected={ isCaptionSelected }
+		onFocus={ onFocusCaption }
+		onBlur={ onBlur }
+		insertBlocksAfter={ insertBlocksAfter }
+	/>
+);
+```
+
+### Props
+
+The `clientId` prop is the only required prop.
+
+The `onBlur`, `onFocus`, `isSelected`, and `insertBlocksAfter` props are all passed directly to the `Caption` component, which then passes them to the inner `RichText` component. ([See detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)). These props are not strictly required, but necessary for many implementations of the component to function as expected.
+
+The `accessible` prop is `false` by default and must be set to `true` in order to set an accessibility label via the `accessibilityLabelCreator` prop.
+
+### `clientId`
+
+-   **Type:** `String`
+-   **Required:** `Yes`
+
+The client ID of the block that the caption is associated with. This is prop is required in order for the component to perform key functionality, including retrieving the current caption from the block attributes.
+
+### `accessible`
+
+-   **Type:** `Boolean`
+-   **Default:** `false`
+-   **Required:** `No`
+
+Boolean to indicate whether component is an accessibility element. When set to true, the component and all of its children will be treated as a single accessible element. Refer to [the relevant React Native documentation](https://reactnative.dev/docs/accessibility#accessible) for the most up-to-date information on this prop.
+
+### `accessibilityLabelCreator`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Function that returns an accessibility label, which screen readers will use for the component. The `accessible` prop must be set to `true` in order for this prop to have any effect.
+
+### `onBlur`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Handler for `onBlur` events, called when the component loses focus. Although not required, it's highly recommended to pass down the component's `onBlur` function to ensure that loss of focus is always handled correctly.
+
+### `onFocus`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Handler for `onFocus` events, called when the component is brought into focus. Similar to `onBlur`, it's not required but recommended. Passing down this prop helps to ensure focus is always handled as expected on the native side.
+
+### `isSelected`
+
+-   **Type:** `Boolean`
+-   **Required:** `No`
+
+Boolean that indicates whether the caption is currently selected. This is used by the child `RichText` component to determine whether to display formatting controls.
+
+### `insertBlocksAfter`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Function to handle how blocks are inserted after pressing enter at the end of the component.
+
+## Related components
+
+`BlockCaption` passes props directly to the [`Caption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/caption) component. In turn, the `Caption` component uses the [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/) component. It is recommended to refer to each of those components' documentation for more information on their props and usage.