@wordpress/components 28.5.0 → 28.7.0

package/src/focal-point-picker/stories/index.story.tsx

@@ -49,6 +49,9 @@ const Template: StoryFn< typeof FocalPointPicker > = ( {
 };
 
 export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
 
 export const Image = Template.bind( {} );
 Image.args = {

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -22,7 +22,7 @@ export const MediaWrapper = styled.div`
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: ${ CONFIG.radiusSmall };
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;

package/src/focal-point-picker/styles/focal-point-style.ts

@@ -3,6 +3,11 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../../utils';
+
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
@@ -15,7 +20,7 @@ export const PointerCircle = styled.div`
 	z-index: 10000;
 	background: rgba( 255, 255, 255, 0.4 );
 	border: 1px solid rgba( 255, 255, 255, 0.4 );
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	backdrop-filter: blur( 16px ) saturate( 180% );
 	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
 

package/src/focal-point-picker/test/index.tsx

@@ -7,12 +7,16 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import Picker from '..';
+import _Picker from '..';
 import type { FocalPointPickerProps } from '../types';
 
 type Log = { name: string; args: unknown[] };
 type EventLogger = ( name: string, args: unknown[] ) => void;
 
+const Picker = ( props: React.ComponentProps< typeof _Picker > ) => {
+	return <_Picker { ...props } __nextHasNoMarginBottom />;
+};
+
 const props: FocalPointPickerProps = {
 	onChange: jest.fn(),
 	url: 'test-url',

package/src/focal-point-picker/types.ts

@@ -29,7 +29,8 @@ export type FocalPointPickerProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
@@ -68,7 +69,6 @@ export type FocalPointPickerProps = Pick<
 
 export type FocalPointPickerControlsProps = {
 	__nextHasNoMarginBottom?: boolean;
-	__next40pxDefaultSize?: boolean;
 	/**
 	 * A bit of extra bottom margin will be added if a `help` text
 	 * needs to be rendered under it.

package/src/font-size-picker/README.md

@@ -113,3 +113,10 @@ If `true`, a slider will be displayed alongside the input field when a custom fo
 
 -   Required: no
 -   Default: `false`
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`

package/src/form-file-upload/README.md

@@ -85,3 +85,11 @@ Optional callback function used to render the UI. If passed, the component does
 
 -   Type: `Function`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

package/src/form-file-upload/types.ts

@@ -10,6 +10,12 @@ import type Icon from '../icon';
 
 // TODO: Replace `children` and `icon` types with props from Button once Button is typed.
 export type FormFileUploadProps = {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A string passed to `input` element that tells the browser which file types can be
 	 * upload to the upload by the user use. e.g: `image/*,video/*`.

package/src/form-toggle/style.scss

@@ -54,7 +54,7 @@ $transition-duration: 0.2s;
 		left: math.div($toggle-thumb-size, 6);
 		width: $toggle-thumb-size;
 		height: $toggle-thumb-size;
-		border-radius: 50%;
+		border-radius: $radius-round;
 		transition:
 			$transition-duration transform ease,
 			$transition-duration background-color ease-out;

package/src/form-token-field/README.md

@@ -61,6 +61,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
+-   `__next40pxDefaultSize` - Start opting into the larger default height that will become the default size in a future version.
 -   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
 -   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 

package/src/form-token-field/style.scss

@@ -102,7 +102,6 @@
 		&.is-error {
 			.components-form-token-field__token-text {
 				color: $alert-red;
-				border-radius: 4px 0 0 4px;
 				padding: 0 4px 0 6px;
 			}
 		}
@@ -133,7 +132,7 @@
 }
 
 .components-form-token-field__token-text {
-	border-radius: 2px 0 0 2px;
+	border-radius: $radius-x-small 0 0 $radius-x-small;
 	padding: 0 0 0 8px;
 	white-space: nowrap;
 	overflow: hidden;
@@ -142,7 +141,7 @@
 
 .components-form-token-field__remove-token.components-button {
 	cursor: pointer;
-	border-radius: 0 2px 2px 0;
+	border-radius: 0 $radius-x-small $radius-x-small 0;
 	padding: 0 2px;
 	color: $gray-900;
 	line-height: 10px;

package/src/form-token-field/types.ts

@@ -157,6 +157,7 @@ export interface FormTokenFieldProps
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**

package/src/guide/style.scss

@@ -9,7 +9,6 @@
 	.components-modal__content {
 		padding: 0;
 		margin-top: 0;
-		border-radius: $radius-block-ui;
 
 		&::before {
 			content: none;

package/src/index.ts

@@ -12,7 +12,11 @@ export {
 } from '@wordpress/primitives';
 
 // Components.
-export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
+export {
+	/** @deprecated Import `AlignmentMatrixControl` instead. */
+	default as __experimentalAlignmentMatrixControl,
+	default as AlignmentMatrixControl,
+} from './alignment-matrix-control';
 export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
@@ -61,7 +65,7 @@ export {
 	CompositeGroup as __unstableCompositeGroup,
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
-} from './composite';
+} from './composite/legacy';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';

package/src/input-control/README.md

@@ -107,3 +107,11 @@ The current value of the input.
 
 -   Type: `String`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

package/src/input-control/index.tsx

@@ -100,8 +100,8 @@ export function UnforwardedInputControl(
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
-					paddingInlineStart={ prefix ? space( 2 ) : undefined }
-					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
+					paddingInlineStart={ prefix ? space( 1 ) : undefined }
+					paddingInlineEnd={ suffix ? space( 1 ) : undefined }
 					ref={ ref }
 					size={ size }
 					stateReducer={ stateReducer }

package/src/input-control/input-base.tsx

@@ -14,13 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import Backdrop from './backdrop';
 import Label from './label';
-import {
-	Container,
-	Root,
-	Prefix,
-	Suffix,
-	getSizeConfig,
-} from './styles/input-control-styles';
+import { Container, Root, Prefix, Suffix } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
 import type { WordPressComponentProps } from '../context';
 import {
@@ -90,16 +84,12 @@ function InputBase(
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
-	const { paddingLeft, paddingRight } = getSizeConfig( {
-		inputSize: size,
-		__next40pxDefaultSize,
-	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
-			InputControlPrefixWrapper: { paddingLeft },
-			InputControlSuffixWrapper: { paddingRight },
+			InputControlPrefixWrapper: { __next40pxDefaultSize, size },
+			InputControlSuffixWrapper: { __next40pxDefaultSize, size },
 		};
-	}, [ paddingLeft, paddingRight ] );
+	}, [ __next40pxDefaultSize, size ] );
 
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.

package/src/input-control/input-prefix-wrapper.tsx

@@ -6,19 +6,23 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import type { InputControlPrefixWrapperProps } from './types';
+import type { PrefixSuffixWrapperProps } from './types';
+import { PrefixSuffixWrapper } from './styles/input-control-styles';
 
 function UnconnectedInputControlPrefixWrapper(
-	props: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,
+	props: WordPressComponentProps< PrefixSuffixWrapperProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );
 
 	return (
-		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+		<PrefixSuffixWrapper
+			{ ...derivedProps }
+			isPrefix
+			ref={ forwardedRef }
+		/>
 	);
 }
 

package/src/input-control/input-suffix-wrapper.tsx

@@ -6,20 +6,18 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import type { InputControlSuffixWrapperProps } from './types';
+import type { PrefixSuffixWrapperProps } from './types';
+import { PrefixSuffixWrapper } from './styles/input-control-styles';
 
 function UnconnectedInputControlSuffixWrapper(
-	props: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,
+	props: WordPressComponentProps< PrefixSuffixWrapperProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );
 
-	return (
-		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
-	);
+	return <PrefixSuffixWrapper { ...derivedProps } ref={ forwardedRef } />;
 }
 
 /**

package/src/input-control/reducer/reducer.ts

@@ -192,25 +192,28 @@ export function useInputControlStateReducer(
 	const pressDown = createKeyEvent( actions.PRESS_DOWN );
 	const pressEnter = createKeyEvent( actions.PRESS_ENTER );
 
-	const currentState = useRef( state );
-	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+	const currentStateRef = useRef( state );
+	const refPropsRef = useRef( {
+		value: initialState.value,
+		onChangeHandler,
+	} );
 
 	// Freshens refs to props and state so that subsequent effects have access
 	// to their latest values without their changes causing effect runs.
 	useLayoutEffect( () => {
-		currentState.current = state;
-		refProps.current = { value: initialState.value, onChangeHandler };
+		currentStateRef.current = state;
+		refPropsRef.current = { value: initialState.value, onChangeHandler };
 	} );
 
 	// Propagates the latest state through onChange.
 	useLayoutEffect( () => {
 		if (
-			currentState.current._event !== undefined &&
-			state.value !== refProps.current.value &&
+			currentStateRef.current._event !== undefined &&
+			state.value !== refPropsRef.current.value &&
 			! state.isDirty
 		) {
-			refProps.current.onChangeHandler( state.value ?? '', {
-				event: currentState.current._event as
+			refPropsRef.current.onChangeHandler( state.value ?? '', {
+				event: currentStateRef.current._event as
 					| ChangeEvent< HTMLInputElement >
 					| PointerEvent< HTMLInputElement >,
 			} );
@@ -220,8 +223,8 @@ export function useInputControlStateReducer(
 	// Updates the state from props.
 	useLayoutEffect( () => {
 		if (
-			initialState.value !== currentState.current.value &&
-			! currentState.current.isDirty
+			initialState.value !== currentStateRef.current.value &&
+			! currentStateRef.current.isDirty
 		) {
 			dispatch( {
 				type: actions.CONTROL,

package/src/input-control/stories/index.story.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { seen, unseen } from '@wordpress/icons';
+import { closeSmall, Icon, link, seen, unseen } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -75,6 +75,29 @@ WithSuffix.args = {
 	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
 };
 
+/**
+ * `<InputControlPrefixWrapper>` and `<InputControlSuffixWrapper>` have a `variant` prop that can be used to
+ * adjust the wrapper based on the prefix or suffix content.
+ *
+ * - `'default'`: Standard padding for text content.
+ * - `'icon'`: For icons.
+ * - `'control'`: For controls, like buttons or selects.
+ */
+export const WithIconOrControl = Template.bind( {} );
+WithIconOrControl.args = {
+	...Default.args,
+	prefix: (
+		<InputControlPrefixWrapper variant="icon">
+			<Icon icon={ link } />
+		</InputControlPrefixWrapper>
+	),
+	suffix: (
+		<InputControlSuffixWrapper variant="control">
+			<Button icon={ closeSmall } size="small" label="Clear" />
+		</InputControlSuffixWrapper>
+	),
+};
+
 export const WithSideLabel = Template.bind( {} );
 WithSideLabel.args = {
 	...Default.args,
@@ -95,17 +118,13 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 			type={ visible ? 'text' : 'password' }
 			label="Password"
 			suffix={
-				<InputControlSuffixWrapper>
-					<div style={ { display: 'flex' } }>
-						<Button
-							size="small"
-							icon={ visible ? unseen : seen }
-							onClick={ () => setVisible( ( value ) => ! value ) }
-							label={
-								visible ? 'Hide password' : 'Show password'
-							}
-						/>
-					</div>
+				<InputControlSuffixWrapper variant="control">
+					<Button
+						size="small"
+						icon={ visible ? unseen : seen }
+						onClick={ () => setVisible( ( value ) => ! value ) }
+						label={ visible ? 'Hide password' : 'Show password' }
+					/>
 				</InputControlSuffixWrapper>
 			}
 			{ ...args }

package/src/input-control/styles/input-control-styles.tsx

@@ -13,8 +13,7 @@ import type { WordPressComponentProps } from '../../context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
-import type { LabelPosition, Size } from '../types';
-import { space } from '../../utils/space';
+import type { LabelPosition, Size, PrefixSuffixWrapperProps } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -78,7 +77,7 @@ export const BackdropUI = styled.div< BackdropProps >`
 export const Root = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	padding-top: 0;
 
 	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
@@ -188,29 +187,29 @@ export const getSizeConfig = ( {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		compact: {
 			height: 32,
 			lineHeight: 1,
 			minHeight: 32,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 	};
 
@@ -319,3 +318,35 @@ export const Label = (
 export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
+
+const prefixSuffixWrapperStyles = ( {
+	variant = 'default',
+	size,
+	__next40pxDefaultSize,
+	isPrefix,
+}: PrefixSuffixWrapperProps & { isPrefix?: boolean } ) => {
+	const { paddingLeft: padding } = getSizeConfig( {
+		inputSize: size,
+		__next40pxDefaultSize,
+	} );
+
+	const paddingProperty = isPrefix
+		? 'paddingInlineStart'
+		: 'paddingInlineEnd';
+
+	if ( variant === 'default' ) {
+		return css( {
+			[ paddingProperty ]: padding,
+		} );
+	}
+
+	// If variant is 'icon' or 'control'
+	return css( {
+		display: 'flex',
+		[ paddingProperty ]: padding - 4,
+	} );
+};
+
+export const PrefixSuffixWrapper = styled.div`
+	${ prefixSuffixWrapperStyles }
+`;

package/src/input-control/types.ts

@@ -31,6 +31,7 @@ interface BaseProps {
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**
@@ -208,16 +209,31 @@ export interface InputControlLabelProps {
 	size?: BaseProps[ 'size' ];
 }
 
-export type InputControlPrefixWrapperProps = {
+export type PrefixSuffixWrapperProps = {
 	/**
-	 * The prefix to be inserted.
+	 * The content to be inserted.
 	 */
 	children: ReactNode;
-};
-
-export type InputControlSuffixWrapperProps = {
 	/**
-	 * The suffix to be inserted.
+	 * Internal prop used to control the padding size of the wrapper.
+	 *
+	 * @ignore
 	 */
-	children: ReactNode;
+	size?: BaseProps[ 'size' ];
+	/**
+	 * Internal prop used to control the padding size of the wrapper.
+	 *
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: BaseProps[ '__next40pxDefaultSize' ];
+	/**
+	 * Adjust the wrapper based on the prefix or suffix content.
+	 *
+	 * - `'default'`: Standard padding for text content.
+	 * - `'icon'`: For icons.
+	 * - `'control'`: For controls, like buttons or selects.
+	 *
+	 * @default 'default'
+	 */
+	variant?: 'default' | 'icon' | 'control';
 };

package/src/input-control/utils.ts

@@ -73,7 +73,7 @@ export function useDraft( props: {
 	onBlur?: FocusEventHandler;
 	onChange: InputChangeCallback;
 } ) {
-	const refPreviousValue = useRef( props.value );
+	const previousValueRef = useRef( props.value );
 	const [ draft, setDraft ] = useState< {
 		value?: string;
 		isStale?: boolean;
@@ -84,8 +84,8 @@ export function useDraft( props: {
 	// To do so, it tracks the previous value and marks the draft value as stale
 	// after each render.
 	useLayoutEffect( () => {
-		const { current: previousValue } = refPreviousValue;
-		refPreviousValue.current = props.value;
+		const { current: previousValue } = previousValueRef;
+		previousValueRef.current = props.value;
 		if ( draft.value !== undefined && ! draft.isStale ) {
 			setDraft( { ...draft, isStale: true } );
 		} else if ( draft.isStale && props.value !== previousValue ) {

package/src/item-group/styles.ts

@@ -70,7 +70,7 @@ export const separated = css`
 	}
 `;
 
-const borderRadius = CONFIG.controlBorderRadius;
+const borderRadius = CONFIG.radiusSmall;
 
 export const spacedAround = css`
 	border-radius: ${ borderRadius };
@@ -105,12 +105,12 @@ const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight
 
 export const itemSizes = {
 	small: css`
-		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall };
+		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }px;
 	`,
 	medium: css`
-		padding: ${ paddingY } ${ CONFIG.controlPaddingX };
+		padding: ${ paddingY } ${ CONFIG.controlPaddingX }px;
 	`,
 	large: css`
-		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge };
+		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }px;
 	`,
 };

package/src/item-group/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -25,7 +25,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -45,7 +45,7 @@ Snapshot Diff:
     >
       <div
 -       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
++       class="components-item css-sbyvbg-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

package/src/mobile/utils/alignments.native.js

@@ -13,6 +13,7 @@ export const WIDE_ALIGNMENTS = {
 		'core/image',
 		'core/separator',
 		'core/media-text',
+		'core/quote',
 		'core/pullquote',
 	],
 };