@wordpress/block-editor 13.4.0 → 14.1.0

package/build-style/style.css

@@ -34,10 +34,13 @@
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
 /**
- * Dimensions.
+ * Radius scale.
  */
 /**
- * Shadows.
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -110,6 +113,9 @@
 .block-editor-autocompleters__block .block-editor-block-icon {
   margin-right: 8px;
 }
+.block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
+  color: inherit !important;
+}
 
 .block-editor-autocompleters__link {
   white-space: nowrap;
@@ -128,6 +134,13 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
+  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  iframe[name=editor-canvas] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-block-icon {
@@ -1403,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;
@@ -1654,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 {
@@ -1707,10 +1722,6 @@ iframe[name=editor-canvas] {
   min-width: 260px;
   overflow-x: hidden;
 }
-.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-base-control__help,
-.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-toggle-control {
-  margin-bottom: 0;
-}
 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
   background-color: #f0f0f0;
   width: 100%;
@@ -1724,12 +1735,6 @@ iframe[name=editor-canvas] {
   content: none;
 }
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-  height: 0;
-  width: 0;
-  position: absolute;
-}
-
 .modal-open .block-editor-global-styles-background-panel__popover {
   z-index: 159890;
 }
@@ -1827,7 +1832,6 @@ iframe[name=editor-canvas] {
 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
   width: 24px;
   min-width: 0 !important;
-  overflow: hidden;
   padding-left: 0;
   padding-right: 0;
 }
@@ -1871,7 +1875,7 @@ iframe[name=editor-canvas] {
     justify-content: space-around;
   }
   .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
-    height: 20px;
+    height: 20px !important;
     width: 100%;
     min-width: 0 !important;
   }
@@ -1885,13 +1889,43 @@ iframe[name=editor-canvas] {
   }
 }
 
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
-  border-right: 1px solid #757575;
-  padding-right: 12px;
+@media (min-width: 600px) {
+  .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
+    height: 40px;
+    position: relative;
+    top: -5px;
+  }
 }
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-  border-left: 1px solid #757575;
-  padding-left: 12px;
+
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
+  position: relative;
+}
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    background: #e0e0e0;
+    position: absolute;
+    top: 0;
+  }
+}
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    background: #1e1e1e;
+  }
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
+  padding-right: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
+  right: 0;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
+  padding-left: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
+  left: 0;
 }
 @media (min-width: 600px) {
   .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
@@ -1911,6 +1945,18 @@ iframe[name=editor-canvas] {
     background: #1e1e1e;
   }
 }
+.show-icon-labels .block-editor-grid-item-mover-button {
+  white-space: nowrap;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
+  height: 24px;
+  background: #ddd;
+  top: 4px;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
+  background: #ddd;
+  width: calc(100% - 24px);
+}
 
 .block-editor-height-control {
   border: 0;
@@ -2034,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 {
@@ -3132,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;
@@ -3166,17 +3201,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar {
+  background-color: #fff;
   height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
 }
-@media (min-width: 782px) {
-  .block-editor-tabbed-sidebar {
-    width: 350px;
-  }
-}
 
 .block-editor-tabbed-sidebar__tablist-and-close-button {
   border-bottom: 1px solid #ddd;
@@ -3193,20 +3224,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar__tablist {
-  box-sizing: border-box;
-  flex-grow: 1;
   margin-bottom: -1px;
-  width: 100%;
-}
-
-.block-editor-tabbed-sidebar__tab {
-  flex-grow: 1;
-  margin-bottom: -1px;
-}
-.block-editor-tabbed-sidebar__tab[id$=reusable] {
-  flex-grow: inherit;
-  padding-left: 16px;
-  padding-right: 16px;
 }
 
 .block-editor-tabbed-sidebar__tabpanel {
@@ -3497,10 +3515,6 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-  color: #757575;
-}
-
 .block-editor-hooks__block-hooks {
   /**
    * Since we're displaying the block icon alongside the block name,
@@ -3511,6 +3525,7 @@ iframe[name=editor-canvas] {
    */
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
   flex-direction: row-reverse;
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
@@ -3522,6 +3537,18 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
+div.block-editor-bindings__panel {
+  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+}
+div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
+  color: inherit;
+}
+
+.block-editor-bindings__popover .block-editor-bindings__source-label {
+  grid-column: 2;
+  margin: 8px 0;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3860,6 +3887,11 @@ iframe[name=editor-canvas] {
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3917,6 +3949,11 @@ iframe[name=editor-canvas] {
   position: relative;
   overflow: visible;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__menu.show-panel {
+    width: 630px;
+  }
+}
 
 .block-editor-inserter__inline-elements {
   margin-top: -1px;
@@ -4111,14 +4148,13 @@ iframe[name=editor-canvas] {
   .block-editor-inserter__category-panel {
     border-left: 1px solid #e0e0e0;
     padding: 0;
-    left: 100%;
-    width: 300px;
+    left: 350px;
+    width: 280px;
     position: absolute;
     top: -1px;
     height: calc(100% + 1px);
     background: #f0f0f0;
     border-top: 1px solid #e0e0e0;
-    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
   }
   .block-editor-inserter__category-panel .block-editor-inserter__media-list,
 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
@@ -4447,9 +4483,6 @@ iframe[name=editor-canvas] {
     height: 100%;
   }
 }
-.block-editor-inserter__menu.is-zoom-out .block-editor-inserter__category-panel {
-  box-shadow: none;
-}
 
 @media (max-width: 959px) {
   .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
@@ -4472,32 +4505,39 @@ iframe[name=editor-canvas] {
 .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": "13.4.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.4.0",
-		"@wordpress/api-fetch": "^7.4.0",
-		"@wordpress/blob": "^4.4.0",
-		"@wordpress/blocks": "^13.4.0",
-		"@wordpress/commands": "^1.4.0",
-		"@wordpress/components": "^28.4.0",
-		"@wordpress/compose": "^7.4.0",
-		"@wordpress/data": "^10.4.0",
-		"@wordpress/date": "^5.4.0",
-		"@wordpress/deprecated": "^4.4.0",
-		"@wordpress/dom": "^4.4.0",
-		"@wordpress/element": "^6.4.0",
-		"@wordpress/escape-html": "^3.4.0",
-		"@wordpress/hooks": "^4.4.0",
-		"@wordpress/html-entities": "^4.4.0",
-		"@wordpress/i18n": "^5.4.0",
-		"@wordpress/icons": "^10.4.0",
-		"@wordpress/is-shallow-equal": "^5.4.0",
-		"@wordpress/keyboard-shortcuts": "^5.4.0",
-		"@wordpress/keycodes": "^4.4.0",
-		"@wordpress/notices": "^5.4.0",
-		"@wordpress/preferences": "^4.4.0",
-		"@wordpress/private-apis": "^1.4.0",
-		"@wordpress/rich-text": "^7.4.0",
-		"@wordpress/style-engine": "^2.4.0",
-		"@wordpress/token-list": "^3.4.0",
-		"@wordpress/url": "^4.4.0",
-		"@wordpress/warning": "^3.4.0",
-		"@wordpress/wordcount": "^4.4.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": "363edb39b8dda8727f652e42cbb8497732693ed2"
+	"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/autocompleters/style.scss

@@ -4,6 +4,10 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-10;
 	}
+
+	&[aria-selected="true"] .block-editor-block-icon {
+		color: inherit !important;
+	}
 }
 
 .block-editor-autocompleters__link {

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

@@ -5,6 +5,7 @@ import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
 import getEditorRegion from '../../utils/get-editor-region';
 
 /**
@@ -41,7 +42,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 
 	// We don't care about this specific ref, but this is a way
 	// to get a ref within the editor canvas so we can focus it later.
-	const blockRef = useBlockRef( clientId );
+	const blockRef = useRef();
+	useBlockElementRef( clientId, blockRef );
 
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but

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

@@ -4,4 +4,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	@include editor-canvas-resize-animation;
 }

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

@@ -13,7 +13,7 @@ import { throttle } from '@wordpress/compose';
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
@@ -82,8 +82,8 @@ const BlockDraggable = ( {
 	}, [] );
 
 	// Find the root of the editor iframe.
-	const blockRef = useBlockRef( clientIds[ 0 ] );
-	const editorRoot = blockRef.current?.closest( 'body' );
+	const blockEl = useBlockElement( clientIds[ 0 ] );
+	const editorRoot = blockEl?.closest( 'body' );
 
 	/*
 	 * Add a dragover event listener to the editor root to track the blocks being dragged over.

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 }>