@wordpress/block-editor 15.20.0 → 15.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.20.0",
+	"version": "15.21.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.47.0",
-		"@wordpress/base-styles": "^9.0.0",
-		"@wordpress/blob": "^4.47.0",
-		"@wordpress/block-serialization-default-parser": "^5.47.0",
-		"@wordpress/blocks": "^15.20.0",
-		"@wordpress/commands": "^1.47.0",
-		"@wordpress/components": "^34.0.0",
-		"@wordpress/compose": "^8.0.0",
-		"@wordpress/data": "^10.47.0",
-		"@wordpress/dataviews": "^15.0.0",
-		"@wordpress/date": "^5.47.0",
-		"@wordpress/deprecated": "^4.47.0",
-		"@wordpress/dom": "^4.47.0",
-		"@wordpress/element": "^7.0.0",
-		"@wordpress/escape-html": "^3.47.0",
-		"@wordpress/global-styles-engine": "^1.14.0",
-		"@wordpress/hooks": "^4.47.0",
-		"@wordpress/html-entities": "^4.47.0",
-		"@wordpress/i18n": "^6.20.0",
-		"@wordpress/icons": "^13.2.0",
-		"@wordpress/image-cropper": "^1.11.0",
-		"@wordpress/interactivity": "^6.47.0",
-		"@wordpress/is-shallow-equal": "^5.47.0",
-		"@wordpress/keyboard-shortcuts": "^5.47.0",
-		"@wordpress/keycodes": "^4.47.0",
-		"@wordpress/notices": "^5.47.0",
-		"@wordpress/preferences": "^4.47.0",
-		"@wordpress/priority-queue": "^3.47.0",
-		"@wordpress/private-apis": "^1.47.0",
-		"@wordpress/rich-text": "^7.47.0",
-		"@wordpress/style-engine": "^2.47.0",
-		"@wordpress/token-list": "^3.47.0",
-		"@wordpress/ui": "^0.14.0",
-		"@wordpress/upload-media": "^0.32.0",
-		"@wordpress/url": "^4.47.0",
-		"@wordpress/warning": "^3.47.0",
-		"@wordpress/wordcount": "^4.47.0",
+		"@wordpress/a11y": "^4.48.0",
+		"@wordpress/base-styles": "^9.1.0",
+		"@wordpress/blob": "^4.48.0",
+		"@wordpress/block-serialization-default-parser": "^5.48.0",
+		"@wordpress/blocks": "^15.21.0",
+		"@wordpress/commands": "^1.48.0",
+		"@wordpress/components": "^35.0.0",
+		"@wordpress/compose": "^8.1.0",
+		"@wordpress/data": "^10.48.0",
+		"@wordpress/dataviews": "^16.0.0",
+		"@wordpress/date": "^5.48.0",
+		"@wordpress/deprecated": "^4.48.0",
+		"@wordpress/dom": "^4.48.0",
+		"@wordpress/element": "^8.0.0",
+		"@wordpress/escape-html": "^3.48.0",
+		"@wordpress/global-styles-engine": "^1.15.0",
+		"@wordpress/hooks": "^4.48.0",
+		"@wordpress/html-entities": "^4.48.0",
+		"@wordpress/i18n": "^6.21.0",
+		"@wordpress/icons": "^13.3.0",
+		"@wordpress/image-cropper": "^1.12.0",
+		"@wordpress/interactivity": "^6.48.0",
+		"@wordpress/is-shallow-equal": "^5.48.0",
+		"@wordpress/keyboard-shortcuts": "^5.48.0",
+		"@wordpress/keycodes": "^4.48.0",
+		"@wordpress/notices": "^5.48.0",
+		"@wordpress/preferences": "^4.48.0",
+		"@wordpress/priority-queue": "^3.48.0",
+		"@wordpress/private-apis": "^1.48.0",
+		"@wordpress/rich-text": "^7.48.0",
+		"@wordpress/style-engine": "^2.48.0",
+		"@wordpress/token-list": "^3.48.0",
+		"@wordpress/ui": "^0.15.0",
+		"@wordpress/upload-media": "^0.33.0",
+		"@wordpress/url": "^4.48.0",
+		"@wordpress/warning": "^3.48.0",
+		"@wordpress/wordcount": "^4.48.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -118,11 +118,11 @@
 		"deep-freeze": "0.0.1"
 	},
 	"peerDependencies": {
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
+	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
 }

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

@@ -185,7 +185,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
-		inert: isSubtreeDisabled ? true : undefined,
+		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: clsx(
 			'block-editor-block-list__block',
 			{

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

@@ -40,13 +40,14 @@ function helpText( selfStretch, parentLayout ) {
 /**
  * Form to edit the child layout value.
  *
- * @param {Object}   props                  Props.
- * @param {Object}   props.value            The child layout value.
- * @param {Function} props.onChange         Function to update the child layout value.
- * @param {Object}   props.parentLayout     The parent layout value.
+ * @param {Object}   props                      Props.
+ * @param {Object}   props.value                The child layout value.
+ * @param {Function} props.onChange             Function to update the child layout value.
+ * @param {Object}   props.parentLayout         The parent layout value.
  *
- * @param {boolean}  props.isShownByDefault
- * @param {string}   props.panelId
+ * @param {boolean}  props.isShownByDefault     Whether the control is shown by default.
+ * @param {string}   props.panelId              The panel ID.
+ * @param {boolean}  props.showGridSpanDefaults Whether unset grid span controls should show default values.
  * @return {Element} child layout edit element.
  */
 export default function ChildLayoutControl( {
@@ -55,6 +56,7 @@ export default function ChildLayoutControl( {
 	parentLayout,
 	isShownByDefault,
 	panelId,
+	showGridSpanDefaults = true,
 } ) {
 	const {
 		type: parentType,
@@ -80,6 +82,7 @@ export default function ChildLayoutControl( {
 				parentLayout={ parentLayout }
 				isShownByDefault={ isShownByDefault }
 				panelId={ panelId }
+				showGridSpanDefaults={ showGridSpanDefaults }
 			/>
 		);
 	}
@@ -206,6 +209,7 @@ function GridControls( {
 	parentLayout,
 	isShownByDefault,
 	panelId,
+	showGridSpanDefaults,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
 	const { columnCount, rowCount } = parentLayout ?? {};
@@ -243,6 +247,9 @@ function GridControls( {
 		window.__experimentalEnableGridInteractivity && rowCount
 			? rowCount - ( rowStart ?? 1 ) + 1
 			: undefined;
+	const columnSpanValue =
+		columnSpan ?? ( showGridSpanDefaults ? 1 : undefined );
+	const rowSpanValue = rowSpan ?? ( showGridSpanDefaults ? 1 : undefined );
 
 	return (
 		<>
@@ -274,7 +281,7 @@ function GridControls( {
 								columnSpan: constrainedValue,
 							} );
 						} }
-						value={ columnSpan ?? 1 }
+						value={ columnSpanValue }
 						min={ 1 }
 						max={ maxColumnSpan }
 					/>
@@ -298,7 +305,7 @@ function GridControls( {
 								rowSpan: constrainedValue,
 							} );
 						} }
-						value={ rowSpan ?? 1 }
+						value={ rowSpanValue }
 						min={ 1 }
 						max={ maxRowSpan }
 					/>

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

@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ChildLayoutControl from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () =>
+	jest.fn( ( mapSelect ) => {
+		if ( typeof mapSelect === 'function' ) {
+			return mapSelect( () => ( {
+				getBlockRootClientId: () => 'root-client-id',
+			} ) );
+		}
+
+		return {
+			getBlockAttributes: () => ( {} ),
+			getBlockOrder: () => [],
+		};
+	} )
+);
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: () => ( {
+		__unstableMarkNextChangeAsNotPersistent: jest.fn(),
+		moveBlocksToPosition: jest.fn(),
+	} ),
+} ) );
+
+describe( 'ChildLayoutControl', () => {
+	const baseProps = {
+		onChange: jest.fn(),
+		parentLayout: {
+			type: 'grid',
+		},
+		isShownByDefault: true,
+		panelId: 'client-id',
+	};
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	function renderControl( props ) {
+		return render(
+			<ToolsPanel
+				label="Dimensions"
+				resetAll={ jest.fn() }
+				panelId="client-id"
+			>
+				<ChildLayoutControl { ...baseProps } { ...props } />
+			</ToolsPanel>
+		);
+	}
+
+	it( 'shows default grid span values for unset span controls by default', () => {
+		renderControl( { value: {} } );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } )
+		).toHaveValue( 1 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Row span' } )
+		).toHaveValue( 1 );
+	} );
+
+	it( 'shows empty grid span values when defaults are hidden', () => {
+		renderControl( { value: {}, showGridSpanDefaults: false } );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } )
+		).toHaveValue( null );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Row span' } )
+		).toHaveValue( null );
+	} );
+
+	it( 'shows explicitly set grid span values when defaults are hidden', () => {
+		renderControl( {
+			value: {
+				columnSpan: 1,
+				rowSpan: 2,
+			},
+			showGridSpanDefaults: false,
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } )
+		).toHaveValue( 1 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Row span' } )
+		).toHaveValue( 2 );
+	} );
+
+	it( 'sets a numeric span when entering 1 into an empty span control', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		renderControl( {
+			value: {},
+			onChange,
+			showGridSpanDefaults: false,
+		} );
+
+		await user.type(
+			screen.getByRole( 'spinbutton', { name: 'Column span' } ),
+			'1'
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( {
+			columnStart: undefined,
+			rowStart: undefined,
+			rowSpan: undefined,
+			columnSpan: 1,
+		} );
+	} );
+} );

package/src/components/colors/test/with-colors.js

@@ -37,7 +37,7 @@ describe( 'createCustomColorsHOC', () => {
 				colors: undefined,
 				setBackgroundColor: expect.any( Function ),
 			} ),
-			undefined
+			expect.anything()
 		);
 	} );
 

package/src/components/global-styles/dimensions-panel.js

@@ -32,6 +32,8 @@ import { setImmutably } from '../../utils/object';
 import {
 	DEFAULT_BLOCK_STYLE_STATE,
 	hasPseudoBlockStyleState,
+	isDefaultBlockStyleState,
+	hasViewportBlockStyleState,
 } from '../../hooks/block-style-state';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
@@ -51,7 +53,7 @@ export function useHasDimensionsPanel(
 			hasMinHeight( settings ) ||
 			hasMinWidth( settings ) ||
 			hasWidth( settings ) ||
-			hasAspectRatio( settings ) ||
+			hasAspectRatio( settings, styleState ) ||
 			hasChildLayout( settings, styleState ) )
 	);
 }
@@ -92,8 +94,11 @@ function hasWidth( settings ) {
 	return settings?.dimensions?.width;
 }
 
-function hasAspectRatio( settings ) {
-	return settings?.dimensions?.aspectRatio;
+function hasAspectRatio( settings, styleState = DEFAULT_BLOCK_STYLE_STATE ) {
+	return (
+		isDefaultBlockStyleState( styleState ) &&
+		settings?.dimensions?.aspectRatio
+	);
 }
 
 function hasChildLayout( settings, styleState = DEFAULT_BLOCK_STYLE_STATE ) {
@@ -484,7 +489,7 @@ export default function DimensionsPanel( {
 	const hasWidthValue = () => !! value?.dimensions?.width;
 
 	// Aspect Ratio
-	const showAspectRatioControl = hasAspectRatio( settings );
+	const showAspectRatioControl = hasAspectRatio( settings, styleState );
 	const aspectRatioValue = decodeValue(
 		inheritedValue?.dimensions?.aspectRatio
 	);
@@ -737,6 +742,9 @@ export default function DimensionsPanel( {
 					onChange={ setChildLayout }
 					parentLayout={ settings?.parentLayout }
 					panelId={ panelId }
+					showGridSpanDefaults={
+						! hasViewportBlockStyleState( styleState )
+					}
 					isShownByDefault={
 						defaultControls.childLayout ??
 						DEFAULT_CONTROLS.childLayout

package/src/components/iframe/index.js

@@ -125,6 +125,9 @@ function getIframeSrc( resolvedAssets ) {
 		${ resolvedAssets.styles ?? '' }
 		${ resolvedAssets.scripts ?? '' }
 	</head>
+	<body>
+		<script>document.currentScript.parentElement.remove()</script>
+	</body>
 </html>`;
 
 	src = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );

package/src/components/inserter/media-tab/utils.js

@@ -34,7 +34,7 @@ export function getBlockAndPreviewFromMedia( media, mediaType ) {
 			src={ media.previewUrl || mediaSrc }
 			alt={ alt }
 			controls={ mediaType === 'audio' ? true : undefined }
-			inert
+			inert="true"
 			onError={ ( { currentTarget } ) => {
 				// Fall back to the media source if the preview cannot be loaded.
 				if ( currentTarget.src === media.previewUrl ) {

package/src/store/private-selectors.js

@@ -1079,6 +1079,23 @@ export function getSelectedBlockStyleState( state, clientId ) {
 	return state.selectedBlockStyleState.value ?? DEFAULT_BLOCK_STYLE_STATE;
 }
 
+/**
+ * Returns whether a non-default style state is selected for a block.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether a non-default block style state is selected.
+ */
+export function hasSelectedStyleState( state, clientId ) {
+	const selectedState = getSelectedBlockStyleState( state, clientId );
+
+	return (
+		selectedState.viewport !== DEFAULT_BLOCK_STYLE_STATE.viewport ||
+		selectedState.pseudo !== DEFAULT_BLOCK_STYLE_STATE.pseudo
+	);
+}
+
 /**
  * Returns whether the selected style state is shown on the canvas.
  *

package/src/store/test/private-selectors.js

@@ -25,6 +25,7 @@ import {
 	isSectionBlock,
 	getParentSectionBlock,
 	getSelectedBlockStyleState,
+	hasSelectedStyleState,
 	isSelectedBlockStyleStateShownOnCanvas,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
@@ -126,6 +127,58 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
+	describe( 'hasSelectedStyleState', () => {
+		it( 'returns false when the block has no selected state', () => {
+			const state = {};
+
+			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( false );
+		} );
+
+		it( 'returns false when another block has the selected state', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-2',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+			};
+
+			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when a viewport state is selected', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: 'default' },
+				},
+			};
+
+			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when a pseudo state is selected', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+			};
+
+			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when viewport and pseudo states are selected', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: ':hover' },
+				},
+			};
+
+			expect( hasSelectedStyleState( state, 'client-1' ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'isSelectedBlockStyleStateShownOnCanvas', () => {
 		it( 'returns true when the block has no canvas preview state', () => {
 			const state = {};