@wordpress/block-editor 14.21.1-next.719a03cbe.0 → 15.0.0

package/build-style/style-rtl.css

@@ -666,12 +666,20 @@ iframe[name=editor-canvas] {
   z-index: 1000001;
 }
 
+.block-editor-block-lock-modal__options {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__options legend {
   margin-bottom: 16px;
   padding: 0;
 }
 
 .block-editor-block-lock-modal__checklist {
+  list-style: none;
+  padding: 0;
   margin: 0;
 }
 
@@ -1612,6 +1620,12 @@ iframe[name=editor-canvas] {
   width: 100%;
 }
 
+.block-editor-block-variation-transforms:where(fieldset) {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor-block-variation-transforms {
   padding: 0 52px 16px 16px;
   width: 100%;
@@ -1646,6 +1660,9 @@ iframe[name=editor-canvas] {
 }
 
 .components-border-radius-control {
+  border: 0;
+  padding: 0;
+  margin: 0;
   margin-bottom: 12px;
 }
 .components-border-radius-control legend {
@@ -1686,6 +1703,9 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-color-gradient-control__fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
   min-width: 0;
 }
 
@@ -2216,18 +2236,18 @@ iframe[name=editor-canvas] {
     transition: all 0.05s ease-in-out;
   }
 }
-.components-button.block-editor-block-types-list__item:disabled {
+.components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
   opacity: 0.6;
   cursor: default;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
   color: var(--wp-admin-theme-color) !important;
   filter: brightness(0.95);
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
   color: var(--wp-admin-theme-color) !important;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover::after {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
   content: "";
   position: absolute;
   top: 0;
@@ -2239,15 +2259,15 @@ iframe[name=editor-canvas] {
   background: var(--wp-admin-theme-color);
   pointer-events: none;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.components-button.block-editor-block-types-list__item:not(:disabled).is-active {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
   color: #fff;
   background: #1e1e1e;
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
+.components-button.block-editor-block-types-list__item:not(:disabled):focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
 
 .block-editor-block-types-list__item-icon {
   padding: 12px 20px;
@@ -2579,6 +2599,12 @@ iframe[name=editor-canvas] {
   position: relative;
 }
 
+.block-editor-link-control__settings {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor-link-control__setting {
   margin-bottom: 0;
   flex: 1;
@@ -3632,6 +3658,13 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 8px;
 }
 
+.block-editor-hooks__grid-layout-columns-and-rows-controls,
+.block-editor-hooks__grid-layout-minimum-width-control {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -4475,6 +4508,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   }
 }
 
+.spacing-sizes-control {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/build-style/style.css

@@ -666,12 +666,20 @@ iframe[name=editor-canvas] {
   z-index: 1000001;
 }
 
+.block-editor-block-lock-modal__options {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__options legend {
   margin-bottom: 16px;
   padding: 0;
 }
 
 .block-editor-block-lock-modal__checklist {
+  list-style: none;
+  padding: 0;
   margin: 0;
 }
 
@@ -1612,6 +1620,12 @@ iframe[name=editor-canvas] {
   width: 100%;
 }
 
+.block-editor-block-variation-transforms:where(fieldset) {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor-block-variation-transforms {
   padding: 0 16px 16px 52px;
   width: 100%;
@@ -1646,6 +1660,9 @@ iframe[name=editor-canvas] {
 }
 
 .components-border-radius-control {
+  border: 0;
+  padding: 0;
+  margin: 0;
   margin-bottom: 12px;
 }
 .components-border-radius-control legend {
@@ -1686,6 +1703,9 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-color-gradient-control__fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
   min-width: 0;
 }
 
@@ -2217,18 +2237,18 @@ iframe[name=editor-canvas] {
     transition: all 0.05s ease-in-out;
   }
 }
-.components-button.block-editor-block-types-list__item:disabled {
+.components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
   opacity: 0.6;
   cursor: default;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
   color: var(--wp-admin-theme-color) !important;
   filter: brightness(0.95);
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
   color: var(--wp-admin-theme-color) !important;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):hover::after {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
   content: "";
   position: absolute;
   top: 0;
@@ -2240,15 +2260,15 @@ iframe[name=editor-canvas] {
   background: var(--wp-admin-theme-color);
   pointer-events: none;
 }
-.components-button.block-editor-block-types-list__item:not(:disabled):focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.components-button.block-editor-block-types-list__item:not(:disabled).is-active {
+.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
   color: #fff;
   background: #1e1e1e;
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
+.components-button.block-editor-block-types-list__item:not(:disabled):focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
 
 .block-editor-block-types-list__item-icon {
   padding: 12px 20px;
@@ -2580,6 +2600,12 @@ iframe[name=editor-canvas] {
   position: relative;
 }
 
+.block-editor-link-control__settings {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor-link-control__setting {
   margin-bottom: 0;
   flex: 1;
@@ -3634,6 +3660,13 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 8px;
 }
 
+.block-editor-hooks__grid-layout-columns-and-rows-controls,
+.block-editor-hooks__grid-layout-minimum-width-control {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -4477,6 +4510,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   }
 }
 
+.spacing-sizes-control {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.21.1-next.719a03cbe.0",
+	"version": "15.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/api-fetch": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/blob": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/block-serialization-default-parser": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/blocks": "^14.15.1-next.719a03cbe.0",
-		"@wordpress/commands": "^1.26.1-next.719a03cbe.0",
-		"@wordpress/components": "^29.13.1-next.719a03cbe.0",
-		"@wordpress/compose": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/data": "^10.26.1-next.719a03cbe.0",
-		"@wordpress/date": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/deprecated": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/dom": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/element": "^6.26.1-next.719a03cbe.0",
-		"@wordpress/escape-html": "^3.26.1-next.719a03cbe.0",
-		"@wordpress/hooks": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/html-entities": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/i18n": "^6.0.1-next.719a03cbe.0",
-		"@wordpress/icons": "^10.26.2-next.719a03cbe.0",
-		"@wordpress/is-shallow-equal": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/keyboard-shortcuts": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/keycodes": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/notices": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/preferences": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/priority-queue": "^3.26.1-next.719a03cbe.0",
-		"@wordpress/private-apis": "^1.26.1-next.719a03cbe.0",
-		"@wordpress/rich-text": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/style-engine": "^2.26.1-next.719a03cbe.0",
-		"@wordpress/token-list": "^3.26.1-next.719a03cbe.0",
-		"@wordpress/upload-media": "^0.11.1-next.719a03cbe.0",
-		"@wordpress/url": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/warning": "^3.26.1-next.719a03cbe.0",
-		"@wordpress/wordcount": "^4.26.1-next.719a03cbe.0",
+		"@wordpress/a11y": "^4.27.0",
+		"@wordpress/api-fetch": "^7.27.0",
+		"@wordpress/blob": "^4.27.0",
+		"@wordpress/block-serialization-default-parser": "^5.27.0",
+		"@wordpress/blocks": "^15.0.0",
+		"@wordpress/commands": "^1.27.0",
+		"@wordpress/components": "^30.0.0",
+		"@wordpress/compose": "^7.27.0",
+		"@wordpress/data": "^10.27.0",
+		"@wordpress/date": "^5.27.0",
+		"@wordpress/deprecated": "^4.27.0",
+		"@wordpress/dom": "^4.27.0",
+		"@wordpress/element": "^6.27.0",
+		"@wordpress/escape-html": "^3.27.0",
+		"@wordpress/hooks": "^4.27.0",
+		"@wordpress/html-entities": "^4.27.0",
+		"@wordpress/i18n": "^6.0.0",
+		"@wordpress/icons": "^10.27.0",
+		"@wordpress/is-shallow-equal": "^5.27.0",
+		"@wordpress/keyboard-shortcuts": "^5.27.0",
+		"@wordpress/keycodes": "^4.27.0",
+		"@wordpress/notices": "^5.27.0",
+		"@wordpress/preferences": "^4.27.0",
+		"@wordpress/priority-queue": "^3.27.0",
+		"@wordpress/private-apis": "^1.27.0",
+		"@wordpress/rich-text": "^7.27.0",
+		"@wordpress/style-engine": "^2.27.0",
+		"@wordpress/token-list": "^3.27.0",
+		"@wordpress/upload-media": "^0.12.0",
+		"@wordpress/url": "^4.27.0",
+		"@wordpress/warning": "^3.27.0",
+		"@wordpress/wordcount": "^4.27.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5e146e949c2765411a8310bcc2641a88d036a6d9"
+	"gitHead": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
 }

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

@@ -114,7 +114,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useIsHovered( { clientId } ),
+		useIsHovered(),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -2,37 +2,24 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
+function listener( event ) {
+	if ( event.defaultPrevented ) {
+		return;
+	}
+
+	event.preventDefault();
+	event.currentTarget.classList.toggle(
+		'is-hovered',
+		event.type === 'mouseover'
+	);
+}
 
 /*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered( { clientId } ) {
-	const { hoverBlock } = useDispatch( blockEditorStore );
-
-	function listener( event ) {
-		if ( event.defaultPrevented ) {
-			return;
-		}
-
-		const action = event.type === 'mouseover' ? 'add' : 'remove';
-
-		event.preventDefault();
-		event.currentTarget.classList[ action ]( 'is-hovered' );
-
-		if ( action === 'add' ) {
-			hoverBlock( clientId );
-		} else {
-			hoverBlock( null );
-		}
-	}
-
+export function useIsHovered() {
 	return useRefEffect( ( node ) => {
 		node.addEventListener( 'mouseout', listener );
 		node.addEventListener( 'mouseover', listener );
@@ -43,7 +30,6 @@ export function useIsHovered( { clientId } ) {
 
 			// Remove class in case it lingers.
 			node.classList.remove( 'is-hovered' );
-			hoverBlock( null );
 		};
 	}, [] );
 }

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

@@ -2,12 +2,22 @@
 	z-index: z-index(".block-editor-block-lock-modal");
 }
 
+.block-editor-block-lock-modal__options {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .block-editor-block-lock-modal__options legend {
 	margin-bottom: $grid-unit-20;
 	padding: 0;
 }
 
 .block-editor-block-lock-modal__checklist {
+	// Reset `ul` browser defaults.
+	list-style: none;
+	padding: 0;
 	margin: 0;
 }
 

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -88,6 +88,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
+		isZoomOut,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -98,6 +99,7 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
+				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -122,6 +124,7 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
+				isZoomOut: _isZoomOut(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -301,7 +304,7 @@ export function BlockSettingsDropdown( {
 											{ __( 'Duplicate' ) }
 										</MenuItem>
 									) }
-									{ canInsertBlock && ! isContentOnly && (
+									{ canInsertBlock && ! isZoomOut && (
 										<>
 											<MenuItem
 												onClick={ pipe(

package/src/components/block-variation-transforms/style.scss

@@ -1,3 +1,10 @@
+.block-editor-block-variation-transforms:where(fieldset) {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .block-editor-block-variation-transforms {
 	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 	width: 100%;

package/src/components/border-radius-control/style.scss

@@ -1,4 +1,9 @@
 .components-border-radius-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	margin-bottom: $grid-unit-15;
 
 	legend {

package/src/components/child-layout-control/index.js

@@ -6,7 +6,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
-	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -210,7 +209,7 @@ function GridControls( {
 	panelId,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
-	const { columnCount = 3, rowCount } = parentLayout ?? {};
+	const { columnCount, rowCount } = parentLayout ?? {};
 	const rootClientId = useSelect( ( select ) =>
 		select( blockEditorStore ).getBlockRootClientId( panelId )
 	);
@@ -218,7 +217,7 @@ function GridControls( {
 		useDispatch( blockEditorStore );
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		rootClientId,
-		columnCount
+		columnCount || 3
 	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
@@ -235,9 +234,20 @@ function GridControls( {
 		} );
 	};
 
+	// Calculate max column span based on current position and grid width
+	const maxColumnSpan = columnCount
+		? columnCount - ( columnStart ?? 1 ) + 1
+		: undefined;
+
+	// Calculate max row span based on current position and grid height
+	const maxRowSpan =
+		window.__experimentalEnableGridInteractivity && rowCount
+			? rowCount - ( rowStart ?? 1 ) + 1
+			: undefined;
+
 	return (
 		<>
-			<HStack
+			<Flex
 				as={ ToolsPanelItem }
 				hasValue={ hasSpanValue }
 				label={ __( 'Grid span' ) }
@@ -245,44 +255,58 @@ function GridControls( {
 				isShownByDefault={ isShownByDefault }
 				panelId={ panelId }
 			>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Column span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newColumnSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							rowSpan,
-							columnSpan: newColumnSpan,
-						} );
-					} }
-					value={ columnSpan ?? 1 }
-					min={ 1 }
-				/>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Row span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newRowSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							columnSpan,
-							rowSpan: newRowSpan,
-						} );
-					} }
-					value={ rowSpan ?? 1 }
-					min={ 1 }
-				/>
-			</HStack>
-			{ window.__experimentalEnableGridInteractivity && columnCount && (
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Column span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							// Don't allow unsetting.
+							const newColumnSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxColumnSpan
+								? Math.min( newColumnSpan, maxColumnSpan )
+								: newColumnSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								rowSpan,
+								columnSpan: constrainedValue,
+							} );
+						} }
+						value={ columnSpan ?? 1 }
+						min={ 1 }
+						max={ maxColumnSpan }
+					/>
+				</FlexItem>
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Row span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const newRowSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxRowSpan
+								? Math.min( newRowSpan, maxRowSpan )
+								: newRowSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								columnSpan,
+								rowSpan: constrainedValue,
+							} );
+						} }
+						value={ rowSpan ?? 1 }
+						min={ 1 }
+						max={ maxRowSpan }
+					/>
+				</FlexItem>
+			</Flex>
+
+			{ window.__experimentalEnableGridInteractivity && (
 				// Use Flex with an explicit width on the FlexItem instead of HStack to
 				// work around an issue in webkit where inputs with a max attribute are
 				// sized incorrectly.

package/src/components/colors-gradients/style.scss

@@ -10,6 +10,11 @@ $swatch-gap: 12px;
 }
 
 .block-editor-color-gradient-control__fieldset {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	// Prevents the `fieldset` from growing beyond its parent's size
 	// in order to fit its content.
 	min-width: 0;