@wordpress/block-editor 14.0.0 → 14.1.0

package/build-module/utils/block-bindings.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit';
+export function useBlockBindingsUtils() {
+  const {
+    clientId
+  } = useBlockEditContext();
+  const {
+    updateBlockAttributes
+  } = useDispatch(blockEditorStore);
+  const {
+    getBlockAttributes
+  } = useSelect(blockEditorStore);
+
+  /**
+   * Updates the value of the bindings connected to block attributes.
+   * It removes the binding when the new value is `undefined`.
+   *
+   * @param {Object} bindings        Bindings including the attributes to update and the new object.
+   * @param {string} bindings.source The source name to connect to.
+   * @param {Object} [bindings.args] Object containing the arguments needed by the source.
+   *
+   * @example
+   * ```js
+   * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+   *
+   * const { updateBlockBindings } = useBlockBindingsUtils();
+   * updateBlockBindings( {
+   *     url: {
+   *         source: 'core/post-meta',
+   *         args: {
+   *             key: 'url_custom_field',
+   *         },
+   * 	   },
+   *     alt: {
+   *         source: 'core/post-meta',
+   *         args: {
+   *             key: 'text_custom_field',
+   *         },
+   * 	   }
+   * } );
+   * ```
+   */
+  const updateBlockBindings = bindings => {
+    const {
+      metadata
+    } = getBlockAttributes(clientId);
+    const newBindings = {
+      ...metadata?.bindings
+    };
+    Object.entries(bindings).forEach(([attribute, binding]) => {
+      if (!binding && newBindings[attribute]) {
+        delete newBindings[attribute];
+        return;
+      }
+      newBindings[attribute] = binding;
+    });
+    const newMetadata = {
+      ...metadata,
+      bindings: newBindings
+    };
+    if (Object.keys(newMetadata.bindings).length === 0) {
+      delete newMetadata.bindings;
+    }
+    updateBlockAttributes(clientId, {
+      metadata: Object.keys(newMetadata).length === 0 ? undefined : newMetadata
+    });
+  };
+
+  /**
+   * Removes the bindings property of the `metadata` attribute.
+   *
+   * @example
+   * ```js
+   * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+   *
+   * const { removeAllBlockBindings } = useBlockBindingsUtils();
+   * removeAllBlockBindings();
+   * ```
+   */
+  const removeAllBlockBindings = () => {
+    const {
+      metadata
+    } = getBlockAttributes(clientId);
+    const newMetadata = {
+      ...metadata
+    };
+    delete newMetadata.bindings;
+    updateBlockAttributes(clientId, {
+      metadata: Object.keys(newMetadata).length === 0 ? undefined : newMetadata
+    });
+  };
+  return {
+    updateBlockBindings,
+    removeAllBlockBindings
+  };
+}
+//# sourceMappingURL=block-bindings.js.map

package/build-module/utils/block-bindings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDispatch","useSelect","store","blockEditorStore","useBlockEditContext","useBlockBindingsUtils","clientId","updateBlockAttributes","getBlockAttributes","updateBlockBindings","bindings","metadata","newBindings","Object","entries","forEach","attribute","binding","newMetadata","keys","length","undefined","removeAllBlockBindings"],"sources":["@wordpress/block-editor/src/utils/block-bindings.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { useBlockEditContext } from '../components/block-edit';\n\nexport function useBlockBindingsUtils() {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { getBlockAttributes } = useSelect( blockEditorStore );\n\n\t/**\n\t * Updates the value of the bindings connected to block attributes.\n\t * It removes the binding when the new value is `undefined`.\n\t *\n\t * @param {Object} bindings        Bindings including the attributes to update and the new object.\n\t * @param {string} bindings.source The source name to connect to.\n\t * @param {Object} [bindings.args] Object containing the arguments needed by the source.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { updateBlockBindings } = useBlockBindingsUtils();\n\t * updateBlockBindings( {\n\t *     url: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'url_custom_field',\n\t *         },\n\t * \t   },\n\t *     alt: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'text_custom_field',\n\t *         },\n\t * \t   }\n\t * } );\n\t * ```\n\t */\n\tconst updateBlockBindings = ( bindings ) => {\n\t\tconst { metadata } = getBlockAttributes( clientId );\n\t\tconst newBindings = { ...metadata?.bindings };\n\t\tObject.entries( bindings ).forEach( ( [ attribute, binding ] ) => {\n\t\t\tif ( ! binding && newBindings[ attribute ] ) {\n\t\t\t\tdelete newBindings[ attribute ];\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tnewBindings[ attribute ] = binding;\n\t\t} );\n\n\t\tconst newMetadata = {\n\t\t\t...metadata,\n\t\t\tbindings: newBindings,\n\t\t};\n\n\t\tif ( Object.keys( newMetadata.bindings ).length === 0 ) {\n\t\t\tdelete newMetadata.bindings;\n\t\t}\n\n\t\tupdateBlockAttributes( clientId, {\n\t\t\tmetadata:\n\t\t\t\tObject.keys( newMetadata ).length === 0\n\t\t\t\t\t? undefined\n\t\t\t\t\t: newMetadata,\n\t\t} );\n\t};\n\n\t/**\n\t * Removes the bindings property of the `metadata` attribute.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { removeAllBlockBindings } = useBlockBindingsUtils();\n\t * removeAllBlockBindings();\n\t * ```\n\t */\n\tconst removeAllBlockBindings = () => {\n\t\tconst { metadata } = getBlockAttributes( clientId );\n\t\tconst newMetadata = { ...metadata };\n\t\tdelete newMetadata.bindings;\n\t\tupdateBlockAttributes( clientId, {\n\t\t\tmetadata:\n\t\t\t\tObject.keys( newMetadata ).length === 0\n\t\t\t\t\t? undefined\n\t\t\t\t\t: newMetadata,\n\t\t} );\n\t};\n\n\treturn { updateBlockBindings, removeAllBlockBindings };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D,OAAO,SAASC,qBAAqBA,CAAA,EAAG;EACvC,MAAM;IAAEC;EAAS,CAAC,GAAGF,mBAAmB,CAAC,CAAC;EAC1C,MAAM;IAAEG;EAAsB,CAAC,GAAGP,WAAW,CAAEG,gBAAiB,CAAC;EACjE,MAAM;IAAEK;EAAmB,CAAC,GAAGP,SAAS,CAAEE,gBAAiB,CAAC;;EAE5D;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMM,mBAAmB,GAAKC,QAAQ,IAAM;IAC3C,MAAM;MAAEC;IAAS,CAAC,GAAGH,kBAAkB,CAAEF,QAAS,CAAC;IACnD,MAAMM,WAAW,GAAG;MAAE,GAAGD,QAAQ,EAAED;IAAS,CAAC;IAC7CG,MAAM,CAACC,OAAO,CAAEJ,QAAS,CAAC,CAACK,OAAO,CAAE,CAAE,CAAEC,SAAS,EAAEC,OAAO,CAAE,KAAM;MACjE,IAAK,CAAEA,OAAO,IAAIL,WAAW,CAAEI,SAAS,CAAE,EAAG;QAC5C,OAAOJ,WAAW,CAAEI,SAAS,CAAE;QAC/B;MACD;MACAJ,WAAW,CAAEI,SAAS,CAAE,GAAGC,OAAO;IACnC,CAAE,CAAC;IAEH,MAAMC,WAAW,GAAG;MACnB,GAAGP,QAAQ;MACXD,QAAQ,EAAEE;IACX,CAAC;IAED,IAAKC,MAAM,CAACM,IAAI,CAAED,WAAW,CAACR,QAAS,CAAC,CAACU,MAAM,KAAK,CAAC,EAAG;MACvD,OAAOF,WAAW,CAACR,QAAQ;IAC5B;IAEAH,qBAAqB,CAAED,QAAQ,EAAE;MAChCK,QAAQ,EACPE,MAAM,CAACM,IAAI,CAAED,WAAY,CAAC,CAACE,MAAM,KAAK,CAAC,GACpCC,SAAS,GACTH;IACL,CAAE,CAAC;EACJ,CAAC;;EAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMI,sBAAsB,GAAGA,CAAA,KAAM;IACpC,MAAM;MAAEX;IAAS,CAAC,GAAGH,kBAAkB,CAAEF,QAAS,CAAC;IACnD,MAAMY,WAAW,GAAG;MAAE,GAAGP;IAAS,CAAC;IACnC,OAAOO,WAAW,CAACR,QAAQ;IAC3BH,qBAAqB,CAAED,QAAQ,EAAE;MAChCK,QAAQ,EACPE,MAAM,CAACM,IAAI,CAAED,WAAY,CAAC,CAACE,MAAM,KAAK,CAAC,GACpCC,SAAS,GACTH;IACL,CAAE,CAAC;EACJ,CAAC;EAED,OAAO;IAAET,mBAAmB;IAAEa;EAAuB,CAAC;AACvD","ignoreList":[]}

package/build-style/content-rtl.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -202,11 +202,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   outline-offset: calc(1 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1;
 }
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
-  outline-color: #fff;
-}
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
@@ -308,11 +303,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   float: none;
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
-  cursor: unset;
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected .rich-text, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered.rich-text,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered .rich-text {
+  cursor: auto;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected::after {
   content: "";
@@ -338,10 +335,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
   outline-color: var(--wp-block-synced-color);
 }
-.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
-.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
-  outline-color: #fff;
-}
 
 @keyframes block-editor-is-editable__animation {
   from {

package/build-style/content.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -202,11 +202,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   outline-offset: calc(1 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1;
 }
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
-  outline-color: #fff;
-}
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
   position: absolute;
@@ -308,11 +303,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   float: none;
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
-  cursor: unset;
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected .rich-text, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered.rich-text,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered .rich-text {
+  cursor: auto;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected::after {
   content: "";
@@ -338,10 +335,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
   outline-color: var(--wp-block-synced-color);
 }
-.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
-.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
-  outline-color: #fff;
-}
 
 @keyframes block-editor-is-editable__animation {
   from {

package/build-style/default-editor-styles-rtl.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.

package/build-style/default-editor-styles.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.

package/build-style/style-rtl.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -1416,14 +1416,6 @@ iframe[name=editor-canvas] {
   flex: 1;
   margin-left: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
-  height: 40px;
-  display: flex;
-  align-items: center;
-}
-.components-border-radius-control .components-border-radius-control__wrapper > span {
-  flex: 0 0 auto;
-}
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
   display: grid;
   gap: 16px;
@@ -1666,6 +1658,16 @@ iframe[name=editor-canvas] {
 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
+  margin: 0;
+}
 
 .block-editor-global-styles-background-panel__image-preview-content,
 .block-editor-global-styles-background-panel__dropdown-toggle {
@@ -2077,6 +2079,8 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }
 
 .show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
@@ -3175,19 +3179,6 @@ iframe[name=editor-canvas] {
   content: attr(aria-label);
 }
 
-.block-editor-segmented-text-control {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.block-editor-segmented-text-control .block-editor-segmented-text-control__buttons {
-  padding: 4px 0;
-  display: flex;
-}
-.block-editor-segmented-text-control .components-button.has-icon {
-  margin-left: 4px;
-}
-
 .block-editor-skip-to-selected-block {
   position: absolute;
   top: -9999em;
@@ -3546,7 +3537,7 @@ iframe[name=editor-canvas] {
 }
 
 div.block-editor-bindings__panel {
-  grid-template-columns: auto;
+  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
   color: inherit;
@@ -4513,32 +4504,39 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
+.spacing-sizes-control .is-marked .components-range-control__track {
+  transition: width ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__track {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+  transition: right ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
-  height: 40px;
-  /* Vertically center the RangeControl until it has true 40px height. */
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-  flex: 1;
-}
-.spacing-sizes-control .spacing-sizes-control__range-control > .components-base-control__field,
-.spacing-sizes-control .spacing-sizes-control__custom-value-range > .components-base-control__field {
-  /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
 .spacing-sizes-control .components-range-control__mark {
+  transform: translateX(50%);
   height: 4px;
-  width: 3px;
+  width: 2px;
   background-color: #fff;
   z-index: 1;
+  top: -4px;
 }
 .spacing-sizes-control .components-range-control__marks {
   margin-top: 17px;
 }
-.spacing-sizes-control .components-range-control__marks :first-child {
-  display: none;
-}
 .spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }

package/build-style/style.css

@@ -37,10 +37,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -1416,14 +1416,6 @@ iframe[name=editor-canvas] {
   flex: 1;
   margin-right: 12px;
 }
-.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control > div {
-  height: 40px;
-  display: flex;
-  align-items: center;
-}
-.components-border-radius-control .components-border-radius-control__wrapper > span {
-  flex: 0 0 auto;
-}
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
   display: grid;
   gap: 16px;
@@ -1667,6 +1659,16 @@ iframe[name=editor-canvas] {
 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
+  margin: 0;
+}
 
 .block-editor-global-styles-background-panel__image-preview-content,
 .block-editor-global-styles-background-panel__dropdown-toggle {
@@ -2078,6 +2080,8 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
+  -webkit-hyphens: auto;
+          hyphens: auto;
 }
 
 .show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
@@ -3176,19 +3180,6 @@ iframe[name=editor-canvas] {
   content: attr(aria-label);
 }
 
-.block-editor-segmented-text-control {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.block-editor-segmented-text-control .block-editor-segmented-text-control__buttons {
-  padding: 4px 0;
-  display: flex;
-}
-.block-editor-segmented-text-control .components-button.has-icon {
-  margin-right: 4px;
-}
-
 .block-editor-skip-to-selected-block {
   position: absolute;
   top: -9999em;
@@ -3547,7 +3538,7 @@ iframe[name=editor-canvas] {
 }
 
 div.block-editor-bindings__panel {
-  grid-template-columns: auto;
+  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
   color: inherit;
@@ -4514,32 +4505,39 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
+.spacing-sizes-control .is-marked .components-range-control__track {
+  transition: width ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__track {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+  transition: left ease 0.1s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spacing-sizes-control .is-marked .components-range-control__thumb-wrapper {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
-  height: 40px;
-  /* Vertically center the RangeControl until it has true 40px height. */
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-  flex: 1;
-}
-.spacing-sizes-control .spacing-sizes-control__range-control > .components-base-control__field,
-.spacing-sizes-control .spacing-sizes-control__custom-value-range > .components-base-control__field {
-  /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
 .spacing-sizes-control .components-range-control__mark {
+  transform: translateX(-50%);
   height: 4px;
-  width: 3px;
+  width: 2px;
   background-color: #fff;
   z-index: 1;
+  top: -4px;
 }
 .spacing-sizes-control .components-range-control__marks {
   margin-top: 17px;
 }
-.spacing-sizes-control .components-range-control__marks :first-child {
-  display: none;
-}
 .spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.0.0",
+	"version": "14.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.5.0",
-		"@wordpress/api-fetch": "^7.5.0",
-		"@wordpress/blob": "^4.5.0",
-		"@wordpress/blocks": "^13.5.0",
-		"@wordpress/commands": "^1.5.0",
-		"@wordpress/components": "^28.5.0",
-		"@wordpress/compose": "^7.5.0",
-		"@wordpress/data": "^10.5.0",
-		"@wordpress/date": "^5.5.0",
-		"@wordpress/deprecated": "^4.5.0",
-		"@wordpress/dom": "^4.5.0",
-		"@wordpress/element": "^6.5.0",
-		"@wordpress/escape-html": "^3.5.0",
-		"@wordpress/hooks": "^4.5.0",
-		"@wordpress/html-entities": "^4.5.0",
-		"@wordpress/i18n": "^5.5.0",
-		"@wordpress/icons": "^10.5.0",
-		"@wordpress/is-shallow-equal": "^5.5.0",
-		"@wordpress/keyboard-shortcuts": "^5.5.0",
-		"@wordpress/keycodes": "^4.5.0",
-		"@wordpress/notices": "^5.5.0",
-		"@wordpress/preferences": "^4.5.0",
-		"@wordpress/private-apis": "^1.5.0",
-		"@wordpress/rich-text": "^7.5.0",
-		"@wordpress/style-engine": "^2.5.0",
-		"@wordpress/token-list": "^3.5.0",
-		"@wordpress/url": "^4.5.0",
-		"@wordpress/warning": "^3.5.0",
-		"@wordpress/wordcount": "^4.5.0",
+		"@wordpress/a11y": "^4.6.0",
+		"@wordpress/api-fetch": "^7.6.0",
+		"@wordpress/blob": "^4.6.0",
+		"@wordpress/blocks": "^13.6.0",
+		"@wordpress/commands": "^1.6.0",
+		"@wordpress/components": "^28.6.0",
+		"@wordpress/compose": "^7.6.0",
+		"@wordpress/data": "^10.6.0",
+		"@wordpress/date": "^5.6.0",
+		"@wordpress/deprecated": "^4.6.0",
+		"@wordpress/dom": "^4.6.0",
+		"@wordpress/element": "^6.6.0",
+		"@wordpress/escape-html": "^3.6.0",
+		"@wordpress/hooks": "^4.6.0",
+		"@wordpress/html-entities": "^4.6.0",
+		"@wordpress/i18n": "^5.6.0",
+		"@wordpress/icons": "^10.6.0",
+		"@wordpress/is-shallow-equal": "^5.6.0",
+		"@wordpress/keyboard-shortcuts": "^5.6.0",
+		"@wordpress/keycodes": "^4.6.0",
+		"@wordpress/notices": "^5.6.0",
+		"@wordpress/preferences": "^4.6.0",
+		"@wordpress/private-apis": "^1.6.0",
+		"@wordpress/rich-text": "^7.6.0",
+		"@wordpress/style-engine": "^2.6.0",
+		"@wordpress/token-list": "^3.6.0",
+		"@wordpress/url": "^4.6.0",
+		"@wordpress/warning": "^3.6.0",
+		"@wordpress/wordcount": "^4.6.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -73,7 +73,7 @@
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
-		"postcss-prefixwrap": "^1.41.0",
+		"postcss-prefixwrap": "^1.51.0",
 		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
+	"gitHead": "ab9564947967bb3f00343130954b9efacba6cdd7"
 }

package/src/autocompleters/block.js

@@ -60,7 +60,8 @@ function createBlockCompleter() {
 				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
-				noop
+				noop,
+				true
 			);
 
 			const filteredItems = useMemo( () => {

package/src/components/block-list/content.scss

@@ -89,11 +89,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&::after {
 			@include selected-block-focus();
 			z-index: 1;
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 
@@ -255,11 +250,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
-	&.is-selected {
+	&.is-selected,
+	&.is-hovered {
 		cursor: default;
 
-		&.rich-text {
-			cursor: unset;
+		&.rich-text,
+		.rich-text {
+			cursor: auto;
 		}
 	}
 
@@ -285,11 +282,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
 			outline-color: var(--wp-block-synced-color);
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 }

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

@@ -49,13 +49,13 @@ import { canBindBlock } from '../../../hooks/use-bindings-attributes';
  *
  * export default function Edit() {
  *
- *   const blockProps = useBlockProps(
+ *   const blockProps = useBlockProps( {
  *     className: 'my-custom-class',
  *     style: {
  *       color: '#222222',
  *       backgroundColor: '#eeeeee'
  *     }
- *   )
+ *   } )
  *
  *   return (
  *	    <div { ...blockProps }>