@wordpress/block-editor 15.20.0 → 15.21.1

package/src/components/block-types-list/README.md

@@ -30,25 +30,6 @@ The blocks that will be displayed in the block list.
 
 -   Type: `Array<Block>`
 -   Required: Yes
--   Platform: Web | Mobile
-
-#### name
-
-Name of the list to be used as part of component's key.
-
--   Type: `String`
--   Required: Yes
--   Platform: Mobile
-
-#### listProps
-
-Extra `FlatList` props for customizing the list.
-
-On Mobile usually this component is rendered inside `BottomSheet` component, which already [generates these props](<(https://github.com/WordPress/gutenberg/blob/1ca1fe0c64dfe1a385221399fc94b0fb14f34199/packages/components/src/mobile/bottom-sheet/index.native.js#L355-L372)>) for this component.
-
--   Type: `String`
--   Required: No
--   Platform: Mobile
 
 ## Related components
 

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/advanced-panel.js

@@ -85,7 +85,11 @@ export default function AdvancedPanel( {
 	}
 
 	return (
-		<Stack direction="column" gap="md">
+		<Stack
+			direction="column"
+			gap="md"
+			className="block-editor-global-styles-advanced-panel"
+		>
 			{ cssError && (
 				<Notice status="error" onRemove={ () => setCSSError( null ) }>
 					{ cssError }

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

@@ -5,7 +5,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useCallback, Platform } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
@@ -31,7 +31,7 @@ const DEFAULT_CONTROLS = {
  * @return {boolean}        Whether site settings has activated background panel.
  */
 export function useHasBackgroundControl( settings, feature ) {
-	return Platform.OS === 'web' && settings?.background?.[ feature ];
+	return settings?.background?.[ feature ];
 }
 
 /**
@@ -44,7 +44,7 @@ export function useHasBackgroundControl( settings, feature ) {
  */
 export function useHasBackgroundPanel( settings ) {
 	const { backgroundImage, gradient } = settings?.background || {};
-	return Platform.OS === 'web' && ( backgroundImage || gradient );
+	return backgroundImage || gradient;
 }
 
 /**

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

@@ -105,6 +105,7 @@ export default function BorderPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 } ) {
 	const colors = useColorsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
 	const decodeValue = useCallback(
 		( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
 		[ settings ]
@@ -270,6 +271,7 @@ export default function BorderPanel( {
 				>
 					<BorderBoxControl
 						colors={ colors }
+						disableCustomColors={ ! areCustomSolidsEnabled }
 						enableAlpha
 						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }

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

@@ -16,7 +16,7 @@ import {
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 } from '@wordpress/components';
 import { Icon, alignNone, stretchWide } from '@wordpress/icons';
-import { useCallback, useState, Platform } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
@@ -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' ];
@@ -41,18 +43,17 @@ export function useHasDimensionsPanel(
 	styleState = DEFAULT_BLOCK_STYLE_STATE
 ) {
 	return (
-		Platform.OS === 'web' &&
-		( hasContentSize( settings ) ||
-			hasWideSize( settings ) ||
-			hasPadding( settings ) ||
-			hasMargin( settings ) ||
-			hasGap( settings ) ||
-			hasHeight( settings ) ||
-			hasMinHeight( settings ) ||
-			hasMinWidth( settings ) ||
-			hasWidth( settings ) ||
-			hasAspectRatio( settings ) ||
-			hasChildLayout( settings, styleState ) )
+		hasContentSize( settings ) ||
+		hasWideSize( settings ) ||
+		hasPadding( settings ) ||
+		hasMargin( settings ) ||
+		hasGap( settings ) ||
+		hasHeight( settings ) ||
+		hasMinHeight( settings ) ||
+		hasMinWidth( settings ) ||
+		hasWidth( settings ) ||
+		hasAspectRatio( settings, styleState ) ||
+		hasChildLayout( settings, styleState )
 	);
 }
 
@@ -92,8 +93,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 +488,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 +741,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/inner-blocks/use-inner-block-template-sync.js

@@ -91,7 +91,9 @@ export default function useInnerBlockTemplateSync(
 			);
 
 			if ( ! fastDeepEqual( nextBlocks, currentInnerBlocks ) ) {
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				replaceInnerBlocks(
 					clientId,
 					nextBlocks,

package/src/components/inserter/hooks/use-patterns-state.js

@@ -142,7 +142,7 @@ const usePatternsState = (
 			createSuccessNotice(
 				sprintf(
 					/* translators: %s: block pattern title. */
-					__( 'Block pattern "%s" inserted.' ),
+					__( 'Pattern "%s" inserted.' ),
 					pattern.title
 				),
 				{