@wordpress/block-editor 14.5.0 → 14.7.0

package/build-style/style-rtl.css

@@ -278,7 +278,14 @@ iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
   display: block;
-  background-color: transparent;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  background-color: #ddd;
+}
+@media (prefers-reduced-motion: reduce) {
+  iframe[name=editor-canvas] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-block-icon {
@@ -312,7 +319,8 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
-.block-editor-block-inspector .components-base-control:where(:not(:last-child)) {
+.block-editor-block-inspector .components-base-control:where(:not(:last-child)),
+.block-editor-block-inspector .components-radio-control:where(:not(:last-child)) {
   margin-bottom: 16px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
@@ -339,12 +347,6 @@ iframe[name=editor-canvas] {
   border-top: 1px solid #ddd;
 }
 
-.block-editor-block-inspector__tab-item {
-  flex: 1 1 0px;
-  display: flex;
-  justify-content: center;
-}
-
 /**
  * Insertion Point.
  */
@@ -397,6 +399,16 @@ iframe[name=editor-canvas] {
   pointer-events: all;
 }
 
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 0;
+}
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
+  display: none;
+}
+
 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -493,20 +505,6 @@ iframe[name=editor-canvas] {
   right: 50%;
 }
 
-.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
-.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
-.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.zoom-out-toolbar .block-editor-block-mover {
-  background: none;
-  border: none;
-}
-.zoom-out-toolbar .zoom-out-toolbar-button {
-  height: 40px;
-}
-
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -884,6 +882,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   scroll-margin-top: 24px;
   scroll-margin-bottom: 56px;
+  outline: 0;
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
   flex-grow: 1;
@@ -1841,7 +1840,6 @@ iframe[name=editor-canvas] {
 .block-editor-iframe__container {
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
 }
 
 .block-editor-iframe__scale-container {
@@ -1849,7 +1847,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {
-  width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+  width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
   position: absolute;
   left: 0;
 }
@@ -3038,7 +3036,7 @@ iframe[name=editor-canvas] {
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
-  padding-left: 12px;
+  padding-left: 8px;
 }
 
 .block-editor-tabbed-sidebar__close-button {
@@ -3596,6 +3594,22 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-right: 6px;
 }
 
+.block-editor-block-toolbar-change-design-content-wrapper {
+  padding: 12px;
+  width: 320px;
+}
+.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 12px;
+}
+.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  margin-bottom: 0;
+}
+.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
+  min-height: 100px;
+}
+
 .block-editor-inserter {
   display: inline-block;
   background: none;
@@ -3710,6 +3724,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 
 .block-editor-inserter__panel-header {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: 16px 16px 0;
@@ -3846,6 +3861,13 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-top: 24px;
 }
 
+.block-editor-inserter__patterns-filter-help {
+  padding: 16px;
+  border-top: 1px solid #ddd;
+  color: #757575;
+  min-width: 280px;
+}
+
 .block-editor-inserter__media-list,
 .block-editor-block-patterns-list {
   overflow-y: auto;

package/build-style/style.css

@@ -278,7 +278,14 @@ iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
   display: block;
-  background-color: transparent;
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  background-color: #ddd;
+}
+@media (prefers-reduced-motion: reduce) {
+  iframe[name=editor-canvas] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-block-icon {
@@ -312,7 +319,8 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
-.block-editor-block-inspector .components-base-control:where(:not(:last-child)) {
+.block-editor-block-inspector .components-base-control:where(:not(:last-child)),
+.block-editor-block-inspector .components-radio-control:where(:not(:last-child)) {
   margin-bottom: 16px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
@@ -339,12 +347,6 @@ iframe[name=editor-canvas] {
   border-top: 1px solid #ddd;
 }
 
-.block-editor-block-inspector__tab-item {
-  flex: 1 1 0px;
-  display: flex;
-  justify-content: center;
-}
-
 /**
  * Insertion Point.
  */
@@ -397,6 +399,16 @@ iframe[name=editor-canvas] {
   pointer-events: all;
 }
 
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  line-height: 0;
+}
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
+  display: none;
+}
+
 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
@@ -493,20 +505,6 @@ iframe[name=editor-canvas] {
   left: 50%;
 }
 
-.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
-.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
-.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.zoom-out-toolbar .block-editor-block-mover {
-  background: none;
-  border: none;
-}
-.zoom-out-toolbar .zoom-out-toolbar-button {
-  height: 40px;
-}
-
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -884,6 +882,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   scroll-margin-top: 24px;
   scroll-margin-bottom: 56px;
+  outline: 0;
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
   flex-grow: 1;
@@ -1842,7 +1841,6 @@ iframe[name=editor-canvas] {
 .block-editor-iframe__container {
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
 }
 
 .block-editor-iframe__scale-container {
@@ -1850,7 +1848,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {
-  width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+  width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
   position: absolute;
   right: 0;
 }
@@ -3039,7 +3037,7 @@ iframe[name=editor-canvas] {
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
-  padding-right: 12px;
+  padding-right: 8px;
 }
 
 .block-editor-tabbed-sidebar__close-button {
@@ -3597,6 +3595,22 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-left: 6px;
 }
 
+.block-editor-block-toolbar-change-design-content-wrapper {
+  padding: 12px;
+  width: 320px;
+}
+.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 12px;
+}
+.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  margin-bottom: 0;
+}
+.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
+  min-height: 100px;
+}
+
 .block-editor-inserter {
   display: inline-block;
   background: none;
@@ -3711,6 +3725,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 
 .block-editor-inserter__panel-header {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: 16px 16px 0;
@@ -3847,6 +3862,13 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-top: 24px;
 }
 
+.block-editor-inserter__patterns-filter-help {
+  padding: 16px;
+  border-top: 1px solid #ddd;
+  color: #757575;
+  min-width: 280px;
+}
+
 .block-editor-inserter__media-list,
 .block-editor-block-patterns-list {
   overflow-y: auto;

package/build-types/utils/dom.d.ts

@@ -36,20 +36,18 @@ export function getBlockClientId(node: Node | null): string | undefined;
  */
 export function rectUnion(rect1: DOMRect, rect2: DOMRect): DOMRect;
 /**
- * Returns the rect of the element including all visible nested elements.
- *
- * Visible nested elements, including elements that overflow the parent, are
- * taken into account.
- *
- * This function is useful for calculating the visible area of a block that
- * contains nested elements that overflow the block, e.g. the Navigation block,
- * which can contain overflowing Submenu blocks.
+ * Returns the bounding rectangle of an element, with special handling for blocks
+ * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).
  *
+ * For blocks like Navigation that can have overflowing elements (e.g. submenus),
+ * this function calculates the combined bounds of both the parent and its visible
+ * children. The returned rect may extend beyond the viewport.
  * The returned rect represents the full extent of the element and its visible
  * children, which may extend beyond the viewport.
  *
  * @param {Element} element Element.
  * @return {DOMRect} Bounding client rect of the element and its visible children.
  */
-export function getVisibleElementBounds(element: Element): DOMRect;
+export function getElementBounds(element: Element): DOMRect;
+export const WITH_OVERFLOW_ELEMENT_BLOCKS: string[];
 //# sourceMappingURL=dom.d.ts.map

package/build-types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AA8CD;;;;;;;;;;;;;;;GAeG;AACH,iDAHW,OAAO,GACN,OAAO,CAyClB"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/utils/dom.js"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,iCALW,OAAO,KACP,OAAO,GAEN,OAAO,CAIlB;AAED;;;;;;;;;GASG;AACH,gDANW,OAAO,WACP,OAAO,GAEN,OAAO,CAQlB;AAED;;;;;;;GAOG;AACH,uCALW,IAAI,OAAC,GAEJ,MAAM,GAAC,SAAS,CAoB3B;AAED;;;;;;GAMG;AACH,iCAJW,OAAO,SACP,OAAO,GACN,OAAO,CASlB;AA+DD;;;;;;;;;;;;GAYG;AACH,0CAHW,OAAO,GACN,OAAO,CAoDlB;AAhED,oDAAkE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.5.0",
+	"version": "14.7.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,6 +26,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
@@ -36,36 +37,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.10.0",
-		"@wordpress/api-fetch": "^7.10.0",
-		"@wordpress/blob": "^4.10.0",
-		"@wordpress/block-serialization-default-parser": "^5.10.0",
-		"@wordpress/blocks": "^13.10.0",
-		"@wordpress/commands": "^1.10.0",
-		"@wordpress/components": "^28.10.0",
-		"@wordpress/compose": "^7.10.0",
-		"@wordpress/data": "^10.10.0",
-		"@wordpress/date": "^5.10.0",
-		"@wordpress/deprecated": "^4.10.0",
-		"@wordpress/dom": "^4.10.0",
-		"@wordpress/element": "^6.10.0",
-		"@wordpress/escape-html": "^3.10.0",
-		"@wordpress/hooks": "^4.10.0",
-		"@wordpress/html-entities": "^4.10.0",
-		"@wordpress/i18n": "^5.10.0",
-		"@wordpress/icons": "^10.10.0",
-		"@wordpress/is-shallow-equal": "^5.10.0",
-		"@wordpress/keyboard-shortcuts": "^5.10.0",
-		"@wordpress/keycodes": "^4.10.0",
-		"@wordpress/notices": "^5.10.0",
-		"@wordpress/preferences": "^4.10.0",
-		"@wordpress/private-apis": "^1.10.0",
-		"@wordpress/rich-text": "^7.10.0",
-		"@wordpress/style-engine": "^2.10.0",
-		"@wordpress/token-list": "^3.10.0",
-		"@wordpress/url": "^4.10.0",
-		"@wordpress/warning": "^3.10.0",
-		"@wordpress/wordcount": "^4.10.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-serialization-default-parser": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/token-list": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -88,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
+	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
 }

package/src/autocompleters/block.js

@@ -6,6 +6,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	parse,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -36,22 +37,30 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName, prioritizedBlocks } =
+			const { rootClientId, selectedBlockId, prioritizedBlocks } =
 				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
-						getBlockName,
+						getBlock,
 						getBlockListSettings,
 						getBlockRootClientId,
 					} = select( blockEditorStore );
+					const { getActiveBlockVariation } = select( blocksStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const { name: blockName, attributes } = getBlock(
+						selectedBlockClientId
+					);
+					const activeBlockVariation = getActiveBlockVariation(
+						blockName,
+						attributes
+					);
 					const _rootClientId = getBlockRootClientId(
 						selectedBlockClientId
 					);
 					return {
-						selectedBlockName: selectedBlockClientId
-							? getBlockName( selectedBlockClientId )
-							: null,
+						selectedBlockId: activeBlockVariation
+							? `${ blockName }/${ activeBlockVariation.name }`
+							: blockName,
 						rootClientId: _rootClientId,
 						prioritizedBlocks:
 							getBlockListSettings( _rootClientId )
@@ -78,11 +87,11 @@ function createBlockCompleter() {
 					  );
 
 				return initialFilteredItems
-					.filter( ( item ) => item.name !== selectedBlockName )
+					.filter( ( item ) => item.id !== selectedBlockId )
 					.slice( 0, SHOWN_BLOCK_TYPES );
 			}, [
 				filterValue,
-				selectedBlockName,
+				selectedBlockId,
 				items,
 				categories,
 				collections,

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

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 // EditorStyles is a memoized component, so avoid passing a new
 // object reference on each render.
@@ -32,10 +35,22 @@ export function ExperimentalBlockCanvas( {
 	iframeProps,
 } ) {
 	useBlockCommands();
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();
 	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
+	const zoomLevel = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
+		[]
+	);
+	const zoomOutIframeProps =
+		zoomLevel !== 100 && ! isTabletViewport
+			? {
+					scale: zoomLevel,
+					frameSize: '40px',
+			  }
+			: {};
 
 	if ( ! shouldIframe ) {
 		return (
@@ -70,6 +85,7 @@ export function ExperimentalBlockCanvas( {
 		>
 			<Iframe
 				{ ...iframeProps }
+				{ ...zoomOutIframeProps }
 				ref={ resetTypingRef }
 				contentRef={ contentRef }
 				style={ {

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

@@ -3,5 +3,7 @@ iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
 	display: block;
-	background-color: transparent;
+	// Handles transitions between device previews
+	@include editor-canvas-resize-animation;
+	background-color: $gray-300;
 }

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

@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -68,8 +68,8 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 				<h2 className="block-editor-block-card__title">
 					{ name?.length
 						? sprintf(
-								// translators:  %1$s: Custom block name. %2$s: Block title.
-								__( '%1$s (%2$s)' ),
+								// translators:  1: Custom block name. 2: Block title.
+								_x( '%1$s (%2$s)', 'block label' ),
 								name,
 								title
 						  )

package/src/components/block-full-height-alignment-control/index.js

@@ -7,7 +7,7 @@ import { fullscreen } from '@wordpress/icons';
 
 function BlockFullHeightAlignmentControl( {
 	isActive,
-	label = __( 'Toggle full height' ),
+	label = __( 'Full height' ),
 	onToggle,
 	isDisabled,
 } ) {

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

@@ -10,7 +10,8 @@
 		margin-bottom: 1.5em;
 	}
 
-	.components-base-control {
+	.components-base-control,
+	.components-radio-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -46,9 +47,3 @@
 .block-editor-block-inspector__no-block-tools {
 	border-top: $border-width solid $gray-300;
 }
-
-.block-editor-block-inspector__tab-item {
-	flex: 1 1 0px;
-	display: flex;
-	justify-content: center;
-}