@wordpress/block-editor 12.20.0 → 12.22.0

package/src/components/responsive-block-control/test/index.js

@@ -81,7 +81,7 @@ describe( 'Basic rendering', () => {
 		} );
 
 		const toggleState = screen.getByRole( 'checkbox', {
-			name: 'Use the same padding on all screensizes.',
+			name: 'Use the same padding on all screen sizes.',
 			checked: true,
 		} );
 
@@ -177,7 +177,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ renderTestDefaultControlComponent }
 			/>
 		);
@@ -217,7 +217,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ mockRenderDefaultControl }
 				viewports={ customViewportSet }
 			/>
@@ -268,7 +268,7 @@ describe( 'Default and Responsive modes', () => {
 
 		// Select elements based on what the user can see.
 		const toggleInput = screen.getByRole( 'checkbox', {
-			name: 'Use the same padding on all screensizes.',
+			name: 'Use the same padding on all screen sizes.',
 			checked: true,
 		} );
 
@@ -319,7 +319,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ spyRenderDefaultControl }
 				renderResponsiveControls={ mockRenderResponsiveControls }
 			/>

package/src/components/rich-text/README.md

@@ -12,6 +12,10 @@ _Required._ HTML string to make editable. The HTML should be valid, and valid in
 
 _Required._ Called when the value changes.
 
+### `identifier: String`
+
+_Optional._ If the editable field is bound to a block attribute (through the `value` and `onChange` props) then this prop should specify the attribute name. The field will use this value to set the block editor selection correctly, specifying in which attribute and at what offset does the selection start or end.
+
 ### `tagName: String`
 
 _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element.
@@ -50,6 +54,7 @@ _Optional._ By default, all registered formats are allowed. This setting can be
 ```js
 <RichText
 	tagName="h2"
+	identifier="content"
 	value={ attributes.content }
 	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
 	onChange={ ( content ) => setAttributes( { content } ) }
@@ -99,6 +104,7 @@ registerBlockType( /* ... */, {
 			<RichText
 				tagName="h2"
 				className={ className }
+				identifier="content"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
 			/>

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

@@ -19,13 +19,14 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
+import { blockBindingsKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
@@ -46,7 +47,7 @@ import { getAllowedFormats } from './utils';
 import { Content } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
-import { BLOCK_BINDINGS_ALLOWED_BLOCKS } from '../../hooks/use-bindings-attributes';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -109,6 +110,7 @@ export function RichTextWrapper(
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
 		__unstableAllowPrefixTransformations,
+		disableEditing,
 		...props
 	},
 	forwardedRef
@@ -116,11 +118,9 @@ export function RichTextWrapper(
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
-	const {
-		clientId,
-		isSelected: isBlockSelected,
-		name: blockName,
-	} = useBlockEditContext();
+	const context = useBlockEditContext();
+	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
+	const blockBindings = context[ blockBindingsKey ];
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -128,12 +128,10 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd, getBlockAttributes } =
+		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
-		const blockBindings =
-			getBlockAttributes( clientId )?.metadata?.bindings;
 
 		let isSelected;
 
@@ -146,50 +144,60 @@ export function RichTextWrapper(
 			isSelected = selectionStart.clientId === clientId;
 		}
 
-		// Disable Rich Text editing if block bindings specify that.
-		let shouldDisableEditing = false;
-		if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
-			const blockTypeAttributes = getBlockType( blockName ).attributes;
-			const { getBlockBindingsSource } = unlock(
-				select( blockEditorStore )
-			);
-			for ( const [ attribute, args ] of Object.entries(
-				blockBindings
-			) ) {
-				if (
-					blockTypeAttributes?.[ attribute ]?.source !== 'rich-text'
-				) {
-					break;
-				}
-
-				// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
-				const blockBindingsSource = getBlockBindingsSource(
-					args.source
-				);
-				if (
-					! blockBindingsSource ||
-					blockBindingsSource.lockAttributesEditing
-				) {
-					shouldDisableEditing = true;
-					break;
-				}
-			}
-		}
-
 		return {
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			shouldDisableEditing,
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
-		useSelect( selector, [
-			clientId,
-			identifier,
-			originalIsSelected,
-			isBlockSelected,
-		] );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		originalIsSelected,
+		isBlockSelected,
+	] );
+
+	const disableBoundBlocks = useSelect(
+		( select ) => {
+			// Disable Rich Text editing if block bindings specify that.
+			let _disableBoundBlocks = false;
+			if ( blockBindings && canBindBlock( blockName ) ) {
+				const blockTypeAttributes =
+					getBlockType( blockName ).attributes;
+				const { getBlockBindingsSource } = unlock(
+					select( blocksStore )
+				);
+				for ( const [ attribute, args ] of Object.entries(
+					blockBindings
+				) ) {
+					if (
+						blockTypeAttributes?.[ attribute ]?.source !==
+						'rich-text'
+					) {
+						break;
+					}
+
+					// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+					const blockBindingsSource = getBlockBindingsSource(
+						args.source
+					);
+					if (
+						! blockBindingsSource ||
+						blockBindingsSource.lockAttributesEditing
+					) {
+						_disableBoundBlocks = true;
+						break;
+					}
+				}
+			}
+
+			return _disableBoundBlocks;
+		},
+		[ blockBindings, blockName ]
+	);
+
+	const shouldDisableEditing = disableEditing || disableBoundBlocks;
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -418,7 +426,7 @@ export function RichTextWrapper(
 					anchorRef,
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
-				suppressContentEditableWarning={ true }
+				suppressContentEditableWarning
 				className={ classnames(
 					'block-editor-rich-text__editable',
 					props.className,
@@ -441,19 +449,34 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This is the private API for the RichText component.
+// It allows access to all props, not just the public ones.
+export const PrivateRichText = withDeprecations(
 	forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.Content = Content;
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
+// This is the public API for the RichText component.
+// We wrap the PrivateRichText component to hide some props from the public API.
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	return (
+		<PrivateRichText ref={ ref } { ...props } disableEditing={ false } />
+	);
+} );
+
+PublicForwardedRichTextContainer.Content = Content;
+PublicForwardedRichTextContainer.isEmpty = ( value ) => {
+	return ! value || value.length === 0;
+};
+
+export default PublicForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';

package/src/components/rich-text/use-enter.js

@@ -21,6 +21,10 @@ export function useEnter( props ) {
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
+			if ( event.target.contentEditable !== 'true' ) {
+				return;
+			}
+
 			if ( event.defaultPrevented ) {
 				return;
 			}

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

@@ -226,7 +226,7 @@ export default function SpacingInputControl( {
 						placeholder={ allPlaceholder }
 						disableUnits={ isMixed }
 						label={ ariaLabel }
-						hideLabelFromVision={ true }
+						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
 					/>
@@ -272,8 +272,8 @@ export default function SpacingInputControl( {
 					max={ spacingSizes.length - 1 }
 					marks={ marks }
 					label={ ariaLabel }
-					hideLabelFromVision={ true }
-					__nextHasNoMarginBottom={ true }
+					hideLabelFromVision
+					__nextHasNoMarginBottom
 					onFocus={ onMouseOver }
 					onBlur={ onMouseOut }
 				/>
@@ -296,7 +296,7 @@ export default function SpacingInputControl( {
 					} }
 					options={ options }
 					label={ ariaLabel }
-					hideLabelFromVision={ true }
+					hideLabelFromVision
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }

package/src/components/spacing-sizes-control/sides-dropdown/index.js

@@ -30,7 +30,7 @@ export default function SidesDropdown( {
 			icon={ sideIcon }
 			label={ labelProp }
 			className="spacing-sizes-control__dropdown"
-			toggleProps={ { isSmall: true } }
+			toggleProps={ { size: 'small' } }
 		>
 			{ ( { onClose } ) => {
 				return (

package/src/components/url-popover/index.js

@@ -92,12 +92,12 @@ const URLPopover = forwardRef(
 							/>
 						) }
 					</div>
-					{ showSettings && (
-						<div className="block-editor-url-popover__row block-editor-url-popover__settings">
-							{ renderSettings() }
-						</div>
-					) }
 				</div>
+				{ showSettings && (
+					<div className="block-editor-url-popover__settings">
+						{ renderSettings() }
+					</div>
+				) }
 				{ additionalControls && ! showSettings && (
 					<div className="block-editor-url-popover__additional-controls">
 						{ additionalControls }

package/src/components/url-popover/style.scss

@@ -58,6 +58,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	margin-right: $grid-unit-10;
+	min-width: 150px;
 	// Avoids the popover from growing too wide when the URL is long.
 	// See https://github.com/WordPress/gutenberg/issues/58599
 	max-width: $modal-min-width;

package/src/components/use-moving-animation/index.js

@@ -142,6 +142,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 
 		return () => {
 			controller.stop();
+			controller.set( { x: 0, y: 0 } );
 		};
 	}, [
 		previous,

package/src/components/warning/index.native.js

@@ -16,33 +16,36 @@ import { normalizeIconObject } from '@wordpress/blocks';
 import styles from './style.scss';
 
 function Warning( {
+	actions,
 	title,
 	message,
 	icon,
 	iconClass,
 	preferredColorScheme,
 	getStylesFromColorScheme,
+	containerStyle: extraContainerStyle,
+	titleStyle: extraTitleStyle,
+	messageStyle: extraMessageStyle,
 	...viewProps
 } ) {
 	icon = icon && normalizeIconObject( icon );
 	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const messageStyle = getStylesFromColorScheme(
-		styles.message,
-		styles.messageDark
-	);
+
+	const containerStyle = [
+		getStylesFromColorScheme( styles.container, styles.containerDark ),
+		extraContainerStyle,
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		extraTitleStyle,
+	];
+	const messageStyle = [
+		getStylesFromColorScheme( styles.message, styles.messageDark ),
+		extraMessageStyle,
+	];
 
 	return (
-		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
-			{ ...viewProps }
-		>
+		<View style={ containerStyle } { ...viewProps }>
 			{ icon && (
 				<View style={ styles.icon }>
 					<Icon
@@ -53,6 +56,7 @@ function Warning( {
 			) }
 			{ title && <Text style={ titleStyle }>{ title }</Text> }
 			{ message && <Text style={ messageStyle }>{ message }</Text> }
+			{ actions }
 		</View>
 	);
 }

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

@@ -5,7 +5,7 @@ import {
 	documentHasSelection,
 	documentHasUncollapsedSelection,
 } from '@wordpress/dom';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -16,6 +16,7 @@ import { useNotifyCopy } from '../../utils/use-notify-copy';
 import { getPasteBlocks, setClipboardBlocks } from './utils';
 
 export default function useClipboardHandler() {
+	const registry = useRegistry();
 	const {
 		getBlocksByClientId,
 		getSelectedBlockClientIds,
@@ -104,7 +105,7 @@ export default function useClipboardHandler() {
 						blocks = [ head, ...inBetweenBlocks, tail ];
 					}
 
-					setClipboardBlocks( event, blocks );
+					setClipboardBlocks( event, blocks, registry );
 				}
 			}
 

package/src/components/writing-flow/utils.js

@@ -8,36 +8,51 @@ import {
 	pasteHandler,
 	findTransform,
 	getBlockTransforms,
+	store as blocksStore,
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { getPasteEventData } from '../../utils/pasting';
+import { store as blockEditorStore } from '../../store';
+
+export const requiresWrapperOnCopy = Symbol( 'requiresWrapperOnCopy' );
 
 /**
  * Sets the clipboard data for the provided blocks, with both HTML and plain
  * text representations.
  *
- * @param {ClipboardEvent} event  Clipboard event.
- * @param {WPBlock[]}      blocks Blocks to set as clipboard data.
+ * @param {ClipboardEvent} event    Clipboard event.
+ * @param {WPBlock[]}      blocks   Blocks to set as clipboard data.
+ * @param {Object}         registry The registry to select from.
  */
-export function setClipboardBlocks( event, blocks ) {
+export function setClipboardBlocks( event, blocks, registry ) {
 	let _blocks = blocks;
-	const wrapperBlockName = event.clipboardData.getData(
-		'__unstableWrapperBlockName'
-	);
 
-	if ( wrapperBlockName ) {
-		_blocks = createBlock(
-			wrapperBlockName,
-			JSON.parse(
-				event.clipboardData.getData(
-					'__unstableWrapperBlockAttributes'
-				)
-			),
-			_blocks
-		);
+	const [ firstBlock ] = blocks;
+
+	if ( firstBlock ) {
+		const firstBlockType = registry
+			.select( blocksStore )
+			.getBlockType( firstBlock.name );
+
+		if ( firstBlockType[ requiresWrapperOnCopy ] ) {
+			const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+				registry.select( blockEditorStore );
+			const wrapperBlockClientId = getBlockRootClientId(
+				firstBlock.clientId
+			);
+			const wrapperBlockName = getBlockName( wrapperBlockClientId );
+
+			if ( wrapperBlockName ) {
+				_blocks = createBlock(
+					wrapperBlockName,
+					getBlockAttributes( wrapperBlockClientId ),
+					_blocks
+				);
+			}
+		}
 	}
 
 	const serialized = serialize( _blocks );

package/src/hooks/anchor.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
+import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
@@ -51,71 +51,51 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAnchorControlPure( {
-	name: blockName,
-	anchor,
-	setAttributes,
-} ) {
+function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 
-	const isWeb = Platform.OS === 'web';
-	const textControl = (
-		<TextControl
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-			className="html-anchor-control"
-			label={ __( 'HTML anchor' ) }
-			help={
-				<>
-					{ __(
-						'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
-					) }
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 
-					{ isWeb && (
-						<ExternalLink
-							href={ __(
-								'https://wordpress.org/documentation/article/page-jumps/'
-							) }
-						>
-							{ __( 'Learn more about anchors' ) }
-						</ExternalLink>
-					) }
-				</>
-			}
-			value={ anchor || '' }
-			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
-			onChange={ ( nextValue ) => {
-				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
-				setAttributes( {
-					anchor: nextValue,
-				} );
-			} }
-			autoCapitalize="none"
-			autoComplete="off"
-		/>
-	);
+	const isWeb = Platform.OS === 'web';
 
 	return (
-		<>
-			{ isWeb && blockEditingMode === 'default' && (
-				<InspectorControls group="advanced">
-					{ textControl }
-				</InspectorControls>
-			) }
-			{ /*
-			 * We plan to remove scoping anchors to 'core/heading' to support
-			 * anchors for all eligble blocks. Additionally we plan to explore
-			 * leveraging InspectorAdvancedControls instead of a custom
-			 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
-			 */ }
-			{ ! isWeb && blockName === 'core/heading' && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Heading settings' ) }>
-						{ textControl }
-					</PanelBody>
-				</InspectorControls>
-			) }
-		</>
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				className="html-anchor-control"
+				label={ __( 'HTML anchor' ) }
+				help={
+					<>
+						{ __(
+							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+						) }
+
+						{ isWeb && (
+							<ExternalLink
+								href={ __(
+									'https://wordpress.org/documentation/article/page-jumps/'
+								) }
+							>
+								{ __( 'Learn more about anchors' ) }
+							</ExternalLink>
+						) }
+					</>
+				}
+				value={ anchor || '' }
+				placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+				onChange={ ( nextValue ) => {
+					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+					setAttributes( {
+						anchor: nextValue,
+					} );
+				} }
+				autoCapitalize="none"
+				autoComplete="off"
+			/>
+		</InspectorControls>
 	);
 }