@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -1,6 +1,12 @@
 /**
  * WordPress dependencies
  */
+import {
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
@@ -13,7 +19,8 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { useNotifyCopy } from '../../utils/use-notify-copy';
-import { getPasteBlocks, setClipboardBlocks } from './utils';
+import { setClipboardBlocks } from './utils';
+import { getPasteEventData } from '../../utils/pasting';
 
 export default function useClipboardHandler() {
 	const registry = useRegistry();
@@ -22,11 +29,13 @@ export default function useClipboardHandler() {
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		getSettings,
+		getBlockName,
 		__unstableIsFullySelected,
 		__unstableIsSelectionCollapsed,
 		__unstableIsSelectionMergeable,
 		__unstableGetSelectedBlocksWithPartialSelection,
 		canInsertBlockType,
+		getBlockRootClientId,
 	} = useSelect( blockEditorStore );
 	const {
 		flashBlock,
@@ -34,7 +43,7 @@ export default function useClipboardHandler() {
 		replaceBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
-		insertBlocks,
+		__unstableSplitSelection,
 	} = useDispatch( blockEditorStore );
 	const notifyCopy = useNotifyCopy();
 
@@ -51,7 +60,8 @@ export default function useClipboardHandler() {
 				return;
 			}
 
-			// Always handle multiple selected blocks.
+			// Let native copy/paste behaviour take over in input fields.
+			// But always handle multiple selected blocks.
 			if ( ! hasMultiSelection() ) {
 				const { target } = event;
 				const { ownerDocument } = target;
@@ -60,7 +70,8 @@ export default function useClipboardHandler() {
 				const hasSelection =
 					event.type === 'copy' || event.type === 'cut'
 						? documentHasUncollapsedSelection( ownerDocument )
-						: documentHasSelection( ownerDocument );
+						: documentHasSelection( ownerDocument ) &&
+						  ! ownerDocument.activeElement.isContentEditable;
 
 				// Let native copy behaviour take over in input fields.
 				if ( hasSelection ) {
@@ -68,18 +79,20 @@ export default function useClipboardHandler() {
 				}
 			}
 
-			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
+			const { activeElement } = event.target.ownerDocument;
+
+			if ( ! node.contains( activeElement ) ) {
 				return;
 			}
 
-			event.preventDefault();
-
 			const isSelectionMergeable = __unstableIsSelectionMergeable();
 			const shouldHandleWholeBlocks =
 				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
 			const expandSelectionIsNeeded =
 				! shouldHandleWholeBlocks && ! isSelectionMergeable;
 			if ( event.type === 'copy' || event.type === 'cut' ) {
+				event.preventDefault();
+
 				if ( selectedBlockClientIds.length === 1 ) {
 					flashBlock( selectedBlockClientIds[ 0 ] );
 				}
@@ -124,37 +137,87 @@ export default function useClipboardHandler() {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,
 				} = getSettings();
-				const blocks = getPasteBlocks(
-					event,
-					canUserUseUnfilteredHTML
-				);
+				const isInternal =
+					event.clipboardData.getData( 'rich-text' ) === 'true';
+				if ( isInternal ) {
+					return;
+				}
+				const { plainText, html, files } = getPasteEventData( event );
+				const isFullySelected = __unstableIsFullySelected();
+				let blocks = [];
+
+				if ( files.length ) {
+					const fromTransforms = getBlockTransforms( 'from' );
+					blocks = files
+						.reduce( ( accumulator, file ) => {
+							const transformation = findTransform(
+								fromTransforms,
+								( transform ) =>
+									transform.type === 'files' &&
+									transform.isMatch( [ file ] )
+							);
+							if ( transformation ) {
+								accumulator.push(
+									transformation.transform( [ file ] )
+								);
+							}
+							return accumulator;
+						}, [] )
+						.flat();
+				} else {
+					blocks = pasteHandler( {
+						HTML: html,
+						plainText,
+						mode: isFullySelected ? 'BLOCKS' : 'AUTO',
+						canUserUseUnfilteredHTML,
+					} );
+				}
 
-				if ( selectedBlockClientIds.length === 1 ) {
-					const [ selectedBlockClientId ] = selectedBlockClientIds;
+				// Inline paste: let rich text handle it.
+				if ( typeof blocks === 'string' ) {
+					return;
+				}
 
-					if (
-						blocks.every( ( block ) =>
-							canInsertBlockType(
-								block.name,
-								selectedBlockClientId
-							)
-						)
-					) {
-						insertBlocks(
-							blocks,
-							undefined,
-							selectedBlockClientId
-						);
-						return;
-					}
+				if ( isFullySelected ) {
+					replaceBlocks(
+						selectedBlockClientIds,
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					event.preventDefault();
+					return;
+				}
+
+				// If a block doesn't support splitting, let rich text paste
+				// inline.
+				if (
+					! hasMultiSelection() &&
+					! hasBlockSupport(
+						getBlockName( selectedBlockClientIds[ 0 ] ),
+						'splitting',
+						false
+					) &&
+					! event.__deprecatedOnSplit
+				) {
+					return;
 				}
 
-				replaceBlocks(
-					selectedBlockClientIds,
-					blocks,
-					blocks.length - 1,
-					-1
+				const [ firstSelectedClientId ] = selectedBlockClientIds;
+				const rootClientId = getBlockRootClientId(
+					firstSelectedClientId
 				);
+
+				if (
+					! blocks.every( ( block ) =>
+						canInsertBlockType( block.name, rootClientId )
+					)
+				) {
+					return;
+				}
+
+				__unstableSplitSelection( blocks );
+				event.preventDefault();
 			}
 		}
 

package/src/components/writing-flow/use-input.js

@@ -4,7 +4,13 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	createBlock,
+	getDefaultBlockName,
+	hasBlockSupport,
+	getBlockTransforms,
+	findTransform,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -18,8 +24,15 @@ export default function useInput() {
 	const {
 		__unstableIsFullySelected,
 		getSelectedBlockClientIds,
+		getSelectedBlockClientId,
 		__unstableIsSelectionMergeable,
 		hasMultiSelection,
+		getBlockName,
+		canInsertBlockType,
+		getBlockRootClientId,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlockAttributes,
 	} = useSelect( blockEditorStore );
 	const {
 		replaceBlocks,
@@ -27,6 +40,7 @@ export default function useInput() {
 		removeBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
+		__unstableMarkAutomaticChange,
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
@@ -45,6 +59,66 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
+				if ( event.keyCode === ENTER ) {
+					if ( event.shiftKey || __unstableIsFullySelected() ) {
+						return;
+					}
+
+					const clientId = getSelectedBlockClientId();
+					const blockName = getBlockName( clientId );
+					const selectionStart = getSelectionStart();
+					const selectionEnd = getSelectionEnd();
+
+					if (
+						selectionStart.attributeKey ===
+						selectionEnd.attributeKey
+					) {
+						const selectedAttributeValue =
+							getBlockAttributes( clientId )[
+								selectionStart.attributeKey
+							];
+						const transforms = getBlockTransforms( 'from' ).filter(
+							( { type } ) => type === 'enter'
+						);
+						const transformation = findTransform(
+							transforms,
+							( item ) => {
+								return item.regExp.test(
+									selectedAttributeValue
+								);
+							}
+						);
+
+						if ( transformation ) {
+							replaceBlocks(
+								clientId,
+								transformation.transform( {
+									content: selectedAttributeValue,
+								} )
+							);
+							__unstableMarkAutomaticChange();
+							return;
+						}
+					}
+
+					if (
+						! hasBlockSupport( blockName, 'splitting', false ) &&
+						! event.__deprecatedOnSplit
+					) {
+						return;
+					}
+
+					// Ensure template is not locked.
+					if (
+						canInsertBlockType(
+							blockName,
+							getBlockRootClientId( clientId )
+						)
+					) {
+						__unstableSplitSelection();
+						event.preventDefault();
+					}
+				}
 				return;
 			}
 

package/src/components/writing-flow/use-tab-nav.js

@@ -45,7 +45,16 @@ export default function useTabNav() {
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
-			getLastFocus()?.current.focus();
+			if ( getLastFocus()?.current ) {
+				getLastFocus().current.focus();
+			} else {
+				// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.
+				container.current
+					.querySelector(
+						`[data-block="${ getSelectedBlockClientId() }"]`
+					)
+					.focus();
+			}
 		} else {
 			setNavigationMode( true );
 

package/src/components/writing-mode-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,10 +42,7 @@ export default function WritingModeControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Orientation' ) }
 			options={ WRITING_MODES }
-			className={ classnames(
-				'block-editor-writing-mode-control',
-				className
-			) }
+			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );

package/src/content.scss

@@ -7,6 +7,7 @@
 @import "./components/block-variation-picker/content.scss";
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
+@import "./components/iframe/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";

package/src/hooks/align.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
 		hasWideBlockSupport
 	).includes( align );
 	if ( isAlignValid ) {
-		props.className = classnames( `align${ align }`, props.className );
+		props.className = clsx( `align${ align }`, props.className );
 	}
 
 	return props;

package/src/hooks/background.js

@@ -59,7 +59,7 @@ export function setBackgroundStyleDefaults( backgroundStyle ) {
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {
+	if ( !! backgroundImage?.url ) {
 		if ( ! backgroundStyle?.backgroundSize ) {
 			backgroundStylesWithDefaults = {
 				backgroundSize: 'cover',

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/border.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ function addSaveProps( props, blockNameOrType, attributes ) {
 	}
 
 	const borderClasses = getBorderClasses( attributes );
-	const newClassName = classnames( props.className, borderClasses );
+	const newClassName = clsx( props.className, borderClasses );
 
 	// If we are clearing the last of the previous classes in `className`
 	// set it to `undefined` to avoid rendering empty DOM attributes.
@@ -341,7 +341,7 @@ export function getBorderClasses( attributes ) {
 	const { borderColor, style } = attributes;
 	const borderColorClass = getColorClassName( 'border-color', borderColor );
 
-	return classnames( {
+	return clsx( {
 		'has-border-color': borderColor || style?.border?.color,
 		[ borderColorClass ]: !! borderColorClass,
 	} );