@wordpress/block-editor 12.26.0 → 13.0.0

package/src/components/rich-text/native/test/index.native.js

@@ -151,7 +151,7 @@ describe( '<RichText/>', () => {
 			const expectedFontSize = 16;
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } />
+				<RichText accessibilityLabel="editor" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -164,8 +164,8 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
-					fontSize={ 'min(2em, 3em)' }
+					accessibilityLabel="editor"
+					fontSize="min(2em, 3em)"
 				/>
 			);
 			// Assert.
@@ -179,7 +179,7 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: 'min(2em, 3em)' } }
 				/>
 			);
@@ -195,7 +195,7 @@ describe( '<RichText/>', () => {
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="div" />
+				<RichText accessibilityLabel="editor" tagName="div" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -209,7 +209,7 @@ describe( '<RichText/>', () => {
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="p" />
+				<RichText accessibilityLabel="editor" tagName="p" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -224,7 +224,7 @@ describe( '<RichText/>', () => {
 				mockGlobalSettings( { fontSize: unit } );
 				// Act.
 				const { getByLabelText } = render(
-					<RichText accessibilityLabel={ 'editor' } tagName="p" />
+					<RichText accessibilityLabel="editor" tagName="p" />
 				);
 				// Assert.
 				const actualFontSize =
@@ -241,9 +241,9 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: '1' } }
-					fontSize={ '2' }
+					fontSize="2"
 					tagName="p"
 				/>
 			);
@@ -260,7 +260,7 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: '1' } }
 					tagName="p"
 				/>
@@ -276,7 +276,7 @@ describe( '<RichText/>', () => {
 			Dimensions.set( { window: { ...window, width: 300 } } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vw' } />
+				<RichText accessibilityLabel="editor" fontSize="1vw" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -289,7 +289,7 @@ describe( '<RichText/>', () => {
 			Dimensions.set( { window: { ...window, height: 300 } } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vh' } />
+				<RichText accessibilityLabel="editor" fontSize="1vh" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -335,7 +335,7 @@ describe( '<RichText/>', () => {
 			const style = { lineHeight: 0.2 };
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } style={ style } />
+				<RichText accessibilityLabel="editor" style={ style } />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.lineHeight;

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -1,28 +1,60 @@
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../../use-settings';
+import { RANGE_CONTROL_MAX_SIZE } from '../utils';
+
+const EMPTY_ARRAY = [];
+
+const compare = new Intl.Collator( 'und', { numeric: true } ).compare;
 
 export default function useSpacingSizes() {
-	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
-
-	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
-	if ( settingsSizes ) {
-		spacingSizes.push( ...settingsSizes );
-	}
-
-	if ( spacingSizes.length > 8 ) {
-		spacingSizes.unshift( {
-			name: __( 'Default' ),
-			slug: 'default',
-			size: undefined,
-		} );
-	}
-
-	return spacingSizes;
+	const [
+		customSpacingSizes,
+		themeSpacingSizes,
+		defaultSpacingSizes,
+		defaultSpacingSizesEnabled,
+	] = useSettings(
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.theme',
+		'spacing.spacingSizes.default',
+		'spacing.defaultSpacingSizes'
+	);
+
+	const customSizes = customSpacingSizes ?? EMPTY_ARRAY;
+
+	const themeSizes = themeSpacingSizes ?? EMPTY_ARRAY;
+
+	const defaultSizes =
+		defaultSpacingSizes && defaultSpacingSizesEnabled !== false
+			? defaultSpacingSizes
+			: EMPTY_ARRAY;
+
+	return useMemo( () => {
+		const sizes = [
+			{ name: __( 'None' ), slug: '0', size: 0 },
+			...customSizes,
+			...themeSizes,
+			...defaultSizes,
+		].sort( ( a, b ) => compare( a.slug, b.slug ) );
+
+		return sizes.length > RANGE_CONTROL_MAX_SIZE
+			? [
+					{
+						name: __( 'Default' ),
+						slug: 'default',
+						size: undefined,
+					},
+					...sizes,
+			  ]
+			: // See https://github.com/WordPress/gutenberg/pull/44247 for reasoning
+			  // to use the index as the name in the range control.
+			  sizes.map( ( { slug, size }, i ) => ( { name: i, slug, size } ) );
+	}, [ customSizes, themeSizes, defaultSizes ] );
 }

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -23,6 +23,7 @@ import { settings } from '@wordpress/icons';
 import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';
 import {
+	RANGE_CONTROL_MAX_SIZE,
 	ALL_SIDES,
 	LABELS,
 	getSliderValueFromPreset,
@@ -79,7 +80,7 @@ export default function SpacingInputControl( {
 	value = getPresetValueFromCustomValue( value, spacingSizes );
 
 	let selectListSizes = spacingSizes;
-	const showRangeControl = spacingSizes.length <= 8;
+	const showRangeControl = spacingSizes.length <= RANGE_CONTROL_MAX_SIZE;
 
 	const disableCustomSpacingSizes = useSelect( ( select ) => {
 		const editorSettings = select( blockEditorStore ).getSettings();
@@ -230,7 +231,7 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						onDragStart={ () => {
 							if ( value?.charAt( 0 ) === '-' ) {
 								setMinValue( 0 );
@@ -312,7 +313,7 @@ export default function SpacingInputControl( {
 					options={ options }
 					label={ ariaLabel }
 					hideLabelFromVision
-					size={ '__unstable-large' }
+					size="__unstable-large"
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					onFocus={ onMouseOver }

package/src/components/spacing-sizes-control/utils.js

@@ -12,6 +12,8 @@ import {
 	sidesVertical,
 } from '@wordpress/icons';
 
+export const RANGE_CONTROL_MAX_SIZE = 8;
+
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 
 export const DEFAULT_VALUES = {

package/src/components/video-player/index.native.js

@@ -99,7 +99,7 @@ class Video extends Component {
 					// So we are setting controls=false and adding a play button that
 					// will trigger presentFullscreenPlayer()
 					controls={ false }
-					ignoreSilentSwitch={ 'ignore' }
+					ignoreSilentSwitch="ignore"
 					paused={ ! isFullScreen }
 					onLayout={ this.onVideoLayout }
 					onFullscreenPlayerWillPresent={ () => {

package/src/components/writing-flow/use-clipboard-handler.js

@@ -60,6 +60,25 @@ export default function useClipboardHandler() {
 				return;
 			}
 
+			// Let native copy/paste behaviour take over in input fields.
+			// But always handle multiple selected blocks.
+			if ( ! hasMultiSelection() ) {
+				const { target } = event;
+				const { ownerDocument } = target;
+				// If copying, only consider actual text selection as selection.
+				// Otherwise, any focus on an input field is considered.
+				const hasSelection =
+					event.type === 'copy' || event.type === 'cut'
+						? documentHasUncollapsedSelection( ownerDocument )
+						: documentHasSelection( ownerDocument ) &&
+						  ! ownerDocument.activeElement.isContentEditable;
+
+				// Let native copy behaviour take over in input fields.
+				if ( hasSelection ) {
+					return;
+				}
+			}
+
 			const { activeElement } = event.target.ownerDocument;
 
 			if ( ! node.contains( activeElement ) ) {
@@ -72,22 +91,6 @@ export default function useClipboardHandler() {
 			const expandSelectionIsNeeded =
 				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
-				if ( ! hasMultiSelection() ) {
-					const { target } = event;
-					const { ownerDocument } = target;
-					// If copying, only consider actual text selection as selection.
-					// Otherwise, any focus on an input field is considered.
-					const hasSelection =
-						event.type === 'copy' || event.type === 'cut'
-							? documentHasUncollapsedSelection( ownerDocument )
-							: documentHasSelection( ownerDocument );
-
-					// Let native copy behaviour take over in input fields.
-					if ( hasSelection ) {
-						return;
-					}
-				}
-
 				event.preventDefault();
 
 				if ( selectedBlockClientIds.length === 1 ) {

package/src/hooks/block-bindings.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { canBindAttribute } from '../hooks/use-bindings-attributes';
+import { unlock } from '../lock-unlock';
+import InspectorControls from '../components/inspector-controls';
+
+export const BlockBindingsPanel = ( { name, metadata } ) => {
+	const { bindings } = metadata || {};
+	const { sources } = useSelect( ( select ) => {
+		const _sources = unlock(
+			select( blocksStore )
+		).getAllBlockBindingsSources();
+
+		return {
+			sources: _sources,
+		};
+	}, [] );
+
+	if ( ! bindings ) {
+		return null;
+	}
+
+	// Don't show not allowed attributes.
+	// Don't show the bindings connected to pattern overrides in the inspectors panel.
+	// TODO: Explore if this should be abstracted to let other sources decide.
+	const filteredBindings = { ...bindings };
+	Object.keys( filteredBindings ).forEach( ( key ) => {
+		if (
+			! canBindAttribute( name, key ) ||
+			filteredBindings[ key ].source === 'core/pattern-overrides'
+		) {
+			delete filteredBindings[ key ];
+		}
+	} );
+
+	if ( Object.keys( filteredBindings ).length === 0 ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Bindings' ) }
+				className="components-panel__block-bindings-panel"
+			>
+				<ItemGroup isBordered isSeparated size="large">
+					{ Object.keys( filteredBindings ).map( ( key ) => {
+						return (
+							<Item key={ key }>
+								<HStack>
+									<span>{ key }</span>
+									<span className="components-item__block-bindings-source">
+										{ sources[
+											filteredBindings[ key ].source
+										]
+											? sources[
+													filteredBindings[ key ]
+														.source
+											  ].label
+											: filteredBindings[ key ].source }
+									</span>
+								</HStack>
+							</Item>
+						);
+					} ) }
+				</ItemGroup>
+			</PanelBody>
+		</InspectorControls>
+	);
+};
+
+export default {
+	edit: BlockBindingsPanel,
+	attributeKeys: [ 'metadata' ],
+	hasSupport() {
+		return true;
+	},
+};

package/src/hooks/block-bindings.scss

@@ -0,0 +1,3 @@
+.components-panel__block-bindings-panel .components-item__block-bindings-source {
+	color: $gray-700;
+}

package/src/hooks/block-style-variation.js

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	GlobalStylesContext,
+	toStyles,
+	getBlockSelectors,
+} from '../components/global-styles';
+import { useStyleOverride } from './utils';
+import { store as blockEditorStore } from '../store';
+import { globalStylesDataKey } from '../store/private-keys';
+
+/**
+ * Get the first block style variation that has been registered from the class string.
+ *
+ * @param {string} className        CSS class string for a block.
+ * @param {Array}  registeredStyles Currently registered block styles.
+ *
+ * @return {string|null} The name of the first registered variation.
+ */
+function getVariationNameFromClass( className, registeredStyles = [] ) {
+	// The global flag affects how capturing groups work in JS. So the regex
+	// below will only return full CSS classes not just the variation name.
+	const matches = className?.match( /\bis-style-(?!default)(\S+)\b/g );
+
+	if ( ! matches ) {
+		return null;
+	}
+
+	for ( const variationClass of matches ) {
+		const variation = variationClass.substring( 9 ); // Remove 'is-style-' prefix.
+		if ( registeredStyles.some( ( style ) => style.name === variation ) ) {
+			return variation;
+		}
+	}
+	return null;
+}
+
+function useBlockSyleVariation( name, variation, clientId ) {
+	// Prefer global styles data in GlobalStylesContext, which are available
+	// if in the site editor. Otherwise fall back to whatever is in the
+	// editor settings and available in the post editor.
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			globalSettings: settings.__experimentalFeatures,
+			globalStyles: settings[ globalStylesDataKey ],
+		};
+	}, [] );
+
+	return useMemo( () => {
+		const styles = mergedConfig?.styles ?? globalStyles;
+		const variationStyles =
+			styles?.blocks?.[ name ]?.variations?.[ variation ];
+
+		return {
+			settings: mergedConfig?.settings ?? globalSettings,
+			// The variation style data is all that is needed to generate
+			// the styles for the current application to a block. The variation
+			// name is updated to match the instance specific class name.
+			styles: {
+				blocks: {
+					[ name ]: {
+						variations: {
+							[ `${ variation }-${ clientId }` ]: variationStyles,
+						},
+					},
+				},
+			},
+		};
+	}, [
+		mergedConfig,
+		globalSettings,
+		globalStyles,
+		variation,
+		clientId,
+		name,
+	] );
+}
+
+// Rather than leveraging `useInstanceId` here, the `clientId` is used.
+// This is so that the variation style override's ID is predictable
+// when the order of applied style variations changes.
+function useBlockProps( { name, className, clientId } ) {
+	const { getBlockStyles } = useSelect( blocksStore );
+
+	const registeredStyles = getBlockStyles( name );
+	const variation = getVariationNameFromClass( className, registeredStyles );
+	const variationClass = `is-style-${ variation }-${ clientId }`;
+
+	const { settings, styles } = useBlockSyleVariation(
+		name,
+		variation,
+		clientId
+	);
+
+	const variationStyles = useMemo( () => {
+		if ( ! variation ) {
+			return;
+		}
+
+		const variationConfig = { settings, styles };
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles,
+			clientId
+		);
+		const hasBlockGapSupport = false;
+		const hasFallbackGapSupport = true;
+		const disableLayoutStyles = true;
+		const isTemplate = true;
+
+		return toStyles(
+			variationConfig,
+			blockSelectors,
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles,
+			isTemplate,
+			{
+				blockGap: false,
+				blockStyles: true,
+				layoutStyles: false,
+				marginReset: false,
+				presets: false,
+				rootPadding: false,
+			}
+		);
+	}, [ variation, settings, styles, getBlockStyles, clientId ] );
+
+	useStyleOverride( {
+		id: `variation-${ clientId }`,
+		css: variationStyles,
+		__unstableType: 'variation',
+		// The clientId will be stored with the override and used to ensure
+		// the order of overrides matches the order of blocks so that the
+		// correct CSS cascade is maintained.
+		clientId,
+	} );
+
+	return variation ? { className: variationClass } : {};
+}
+
+export default {
+	hasSupport: () => true,
+	attributeKeys: [ 'className' ],
+	useBlockProps,
+};

package/src/hooks/font-family.js

@@ -14,6 +14,7 @@ import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Filters registered block settings, extending attributes to include
@@ -68,7 +69,6 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;

package/src/hooks/index.js

@@ -24,16 +24,19 @@ import fontSize from './font-size';
 import textAlign from './text-align';
 import border from './border';
 import position from './position';
+import blockStyleVariation from './block-style-variation';
 import layout from './layout';
 import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
+import blockBindingsPanel from './block-bindings';
 import './block-renaming';
 import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
+		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,
@@ -59,6 +62,7 @@ createBlockListBlockFilter( [
 	fontSize,
 	border,
 	position,
+	blockStyleVariation,
 	childLayout,
 ] );
 createBlockSaveFilter( [

package/src/hooks/layout.js

@@ -32,6 +32,7 @@ import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 
 const layoutBlockSupportKey = 'layout';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 function hasLayoutBlockSupport( blockName ) {
 	return (
@@ -49,7 +50,6 @@ function hasLayoutBlockSupport( blockName ) {
  * @return { Array } Array of CSS classname strings.
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const { layout } = blockAttributes;
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
@@ -371,7 +371,6 @@ function BlockWithLayoutStyles( {
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
 
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
 	const selector = `.${ selectorPrefix }${ id }`;

package/src/hooks/position.js

@@ -303,7 +303,7 @@ export function PositionPanelPure( {
 							onChange={ ( { selectedItem } ) => {
 								onChangeType( selectedItem.value );
 							} }
-							size={ '__unstable-large' }
+							size="__unstable-large"
 						/>
 					</BaseControl>
 				</InspectorControls>

package/src/hooks/style.js

@@ -332,7 +332,15 @@ function BlockStyleControls( {
 		clientId,
 		name,
 		setAttributes,
-		settings,
+		settings: {
+			...settings,
+			typography: {
+				...settings.typography,
+				// The text alignment UI for individual blocks is rendered in
+				// the block toolbar, so disable it here.
+				textAlign: false,
+			},
+		},
 	};
 	if ( blockEditingMode !== 'default' ) {
 		return null;