@wordpress/block-editor 12.3.0 → 12.3.2

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

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import {
+	children as childrenSource,
+	getSaveElement,
+	__unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getMultilineTag } from './utils';
+
+export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+	// Handle deprecated `children` and `node` sources.
+	if ( Array.isArray( value ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+
+		value = childrenSource.toHTML( value );
+	}
+
+	const MultilineTag = getMultilineTag( multiline );
+
+	if ( ! value && MultilineTag ) {
+		value = `<${ MultilineTag }></${ MultilineTag }>`;
+	}
+
+	const content = <RawHTML>{ value }</RawHTML>;
+
+	if ( Tag ) {
+		const { format, ...restProps } = props;
+		return <Tag { ...restProps }>{ content }</Tag>;
+	}
+
+	return content;
+};
+
+Content.__unstableIsRichTextContent = {};
+
+function findContent( blocks, richTextValues = [] ) {
+	if ( ! Array.isArray( blocks ) ) {
+		blocks = [ blocks ];
+	}
+
+	for ( const block of blocks ) {
+		if (
+			block?.type?.__unstableIsRichTextContent ===
+			Content.__unstableIsRichTextContent
+		) {
+			richTextValues.push( block.props.value );
+			continue;
+		}
+
+		if ( block?.props?.children ) {
+			findContent( block.props.children, richTextValues );
+		}
+	}
+
+	return richTextValues;
+}
+
+function _getSaveElement( { name, attributes, innerBlocks } ) {
+	return getSaveElement(
+		name,
+		attributes,
+		innerBlocks.map( _getSaveElement )
+	);
+}
+
+export function getRichTextValues( blocks = [] ) {
+	getBlockProps.skipFilters = true;
+	const values = findContent(
+		( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )
+	);
+	getBlockProps.skipFilters = false;
+	return values;
+}

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

@@ -16,8 +16,7 @@ import { chevronDown } from '@wordpress/icons';
 import { orderBy } from '../../../utils/sorting';
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const FormatToolbar = () => {

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	RawHTML,
 	useRef,
 	useCallback,
 	forwardRef,
@@ -46,6 +45,7 @@ import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
+import { Content } from './content';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -419,40 +419,7 @@ function RichTextWrapper(
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
 
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		deprecated( 'wp.blockEditor.RichText value prop as children type', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'value prop as string',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
-		} );
-
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
-	}
-
-	return content;
-};
-
+ForwardedRichTextContainer.Content = Content;
 ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };

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

@@ -6,13 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	RawHTML,
-	Platform,
-	useRef,
-	useCallback,
-	forwardRef,
-} from '@wordpress/element';
+import { Platform, useRef, useCallback, forwardRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	pasteHandler,
@@ -55,6 +49,7 @@ import {
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
+import { Content } from './content';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -707,32 +702,7 @@ function RichTextWrapper(
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
 
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
-	}
-
-	return content;
-};
+ForwardedRichTextContainer.Content = Content;
 
 ForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;

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

@@ -434,6 +434,7 @@ class URLInput extends Component {
 			placeholder = __( 'Paste URL or type to search' ),
 			__experimentalRenderControl: renderControl,
 			value = '',
+			hideLabelFromVision = false,
 		} = this.props;
 
 		const {
@@ -452,6 +453,7 @@ class URLInput extends Component {
 			className: classnames( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
+			hideLabelFromVision,
 		};
 
 		const inputProps = {

package/src/components/url-popover/image-url-input-ui.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useState, useCallback } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import {
 	ToolbarButton,
 	Button,
@@ -50,16 +50,16 @@ const ImageURLInputUI = ( {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	const openLinkUI = useCallback( () => {
+	const openLinkUI = () => {
 		setIsOpen( true );
-	} );
+	};
 
 	const [ isEditingLink, setIsEditingLink ] = useState( false );
 	const [ urlInput, setUrlInput ] = useState( null );
 
 	const autocompleteRef = useRef( null );
 
-	const startEditLink = useCallback( () => {
+	const startEditLink = () => {
 		if (
 			linkDestination === LINK_DESTINATION_MEDIA ||
 			linkDestination === LINK_DESTINATION_ATTACHMENT
@@ -67,17 +67,17 @@ const ImageURLInputUI = ( {
 			setUrlInput( '' );
 		}
 		setIsEditingLink( true );
-	} );
+	};
 
-	const stopEditLink = useCallback( () => {
+	const stopEditLink = () => {
 		setIsEditingLink( false );
-	} );
+	};
 
-	const closeLinkUI = useCallback( () => {
+	const closeLinkUI = () => {
 		setUrlInput( null );
 		stopEditLink();
 		setIsOpen( false );
-	} );
+	};
 
 	const getUpdatedLinkTargetSettings = ( value ) => {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -106,7 +106,7 @@ const ImageURLInputUI = ( {
 		};
 	};
 
-	const onFocusOutside = useCallback( () => {
+	const onFocusOutside = () => {
 		return ( event ) => {
 			// The autocomplete suggestions list renders in a separate popover (in a portal),
 			// so onFocusOutside fails to detect that a click on a suggestion occurred in the
@@ -123,9 +123,9 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			stopEditLink();
 		};
-	} );
+	};
 
-	const onSubmitLinkChange = useCallback( () => {
+	const onSubmitLinkChange = () => {
 		return ( event ) => {
 			if ( urlInput ) {
 				// It is possible the entered URL actually matches a named link destination.
@@ -144,14 +144,14 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			event.preventDefault();
 		};
-	} );
+	};
 
-	const onLinkRemove = useCallback( () => {
+	const onLinkRemove = () => {
 		onChangeUrl( {
 			linkDestination: LINK_DESTINATION_NONE,
 			href: '',
 		} );
-	} );
+	};
 
 	const getLinkDestinations = () => {
 		const linkDestinations = [

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div

package/src/components/use-block-display-information/index.js

@@ -7,6 +7,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,6 +28,26 @@ import { store as blockEditorStore } from '../../store';
  * @property {string}  anchor      HTML anchor.
  */
 
+/**
+ * Get the display label for a block's position type.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {string} The position type label.
+ */
+function getPositionTypeLabel( attributes ) {
+	const positionType = attributes?.style?.position?.type;
+
+	if ( positionType === 'sticky' ) {
+		return __( 'Sticky' );
+	}
+
+	if ( positionType === 'fixed' ) {
+		return __( 'Fixed' );
+	}
+
+	return null;
+}
+
 /**
  * Hook used to try to find a matching block variation and return
  * the appropriate information for display reasons. In order to
@@ -57,12 +78,15 @@ export default function useBlockDisplayInformation( clientId ) {
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
 			};
 			if ( ! match ) return blockTypeInfo;
 
@@ -72,6 +96,8 @@ export default function useBlockDisplayInformation( clientId ) {
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
 			};
 		},
 		[ clientId ]

package/src/components/writing-flow/use-drag-selection.js

@@ -88,7 +88,7 @@ export default function useDragSelection() {
 				// child elements of the content editable wrapper are editable
 				// and return true for this property. We only want to start
 				// multi selecting when the mouse leaves the wrapper.
-				if ( ! target.getAttribute( 'contenteditable' ) ) {
+				if ( target.getAttribute( 'contenteditable' ) !== 'true' ) {
 					return;
 				}
 

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

@@ -86,7 +86,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE ) {
+			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;
@@ -116,17 +116,53 @@ export default function useTabNav() {
 				return;
 			}
 
+			// We want to constrain the tabbing to the block and its child blocks.
+			// If the preceding form element is within a different block,
+			// such as two sibling image blocks in the placeholder state,
+			// we want shift + tab from the first form element to move to the image
+			// block toolbar and not the previous image block's form element.
+			// TODO: Should this become a utility function?
+			/**
+			 * Determine whether an element is part of or is the selected block.
+			 *
+			 * @param {Object} selectedBlockElement
+			 * @param {Object} element
+			 * @return {boolean} Whether the element is part of or is the selected block.
+			 */
+			const isElementPartOfSelectedBlock = (
+				selectedBlockElement,
+				element
+			) => {
+				// Check if the element is or is within the selected block by finding the
+				// closest element with a data-block attribute and seeing if
+				// it matches our current selected block ID
+				const elementBlockId = element
+					.closest( '[data-block]' )
+					?.getAttribute( 'data-block' );
+				const isElementSameBlock =
+					elementBlockId === getSelectedBlockClientId();
+
+				// Check if the element is a child of the selected block. This could be a
+				// child block in a group or column block, etc.
+				const isElementChildOfBlock =
+					selectedBlockElement.contains( element );
+
+				return isElementSameBlock || isElementChildOfBlock;
+			};
+
+			const nextTabbable = focus.tabbable[ direction ]( event.target );
 			// Allow tabbing from the block wrapper to a form element,
-			// and between form elements rendered in a block,
+			// and between form elements rendered in a block and its child blocks,
 			// such as inside a placeholder. Form elements are generally
 			// meant to be UI rather than part of the content. Ideally
 			// these are not rendered in the content and perhaps in the
 			// future they can be rendered in an iframe or shadow DOM.
 			if (
-				( isFormElement( event.target ) ||
-					event.target.getAttribute( 'data-block' ) ===
-						getSelectedBlockClientId() ) &&
-				isFormElement( focus.tabbable[ direction ]( event.target ) )
+				isFormElement( nextTabbable ) &&
+				isElementPartOfSelectedBlock(
+					event.target.closest( '[data-block]' ),
+					nextTabbable
+				)
 			) {
 				return;
 			}

package/src/hooks/behaviors.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import {
-	SelectControl,
-	Button,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -18,15 +14,11 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
 
-/**
- * External dependencies
- */
-import merge from 'deepmerge';
-
 function BehaviorsControl( {
 	blockName,
 	blockBehaviors,
-	onChange,
+	onChangeBehavior,
+	onChangeAnimation,
 	disabled = false,
 } ) {
 	const { settings, themeBehaviors } = useSelect(
@@ -43,36 +35,56 @@ function BehaviorsControl( {
 		[ blockName ]
 	);
 
-	const noBehaviorsOption = {
-		value: '',
-		label: __( 'No behaviors' ),
+	const defaultBehaviors = {
+		default: {
+			value: 'default',
+			label: __( 'Default' ),
+		},
+		noBehaviors: {
+			value: '',
+			label: __( 'No behaviors' ),
+		},
 	};
 
 	const behaviorsOptions = Object.entries( settings )
 		.filter(
 			( [ behaviorName, behaviorValue ] ) =>
-				hasBlockSupport( blockName, 'behaviors.' + behaviorName ) &&
+				hasBlockSupport( blockName, `behaviors.${ behaviorName }` ) &&
 				behaviorValue
 		) // Filter out behaviors that are disabled.
 		.map( ( [ behaviorName ] ) => ( {
 			value: behaviorName,
-			label:
-				// Capitalize the first letter of the behavior name.
-				behaviorName[ 0 ].toUpperCase() +
-				behaviorName.slice( 1 ).toLowerCase(),
+			// Capitalize the first letter of the behavior name.
+			label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
+				.slice( 1 )
+				.toLowerCase() }`,
 		} ) );
 
-	// If every behavior is disabled, do not show the behaviors inspector control.
-	if ( behaviorsOptions.length === 0 ) return null;
-
-	const options = [ noBehaviorsOption, ...behaviorsOptions ];
+	const options = [
+		...Object.values( defaultBehaviors ),
+		...behaviorsOptions,
+	];
 
+	// If every behavior is disabled, do not show the behaviors inspector control.
+	if ( behaviorsOptions.length === 0 ) {
+		return null;
+	}
 	// Block behaviors take precedence over theme behaviors.
-	const behaviors = merge( themeBehaviors, blockBehaviors || {} );
+	const behaviors = { ...themeBehaviors, ...( blockBehaviors || {} ) };
 
 	const helpText = disabled
 		? __( 'The lightbox behavior is disabled for linked images.' )
-		: __( 'Add behaviors.' );
+		: '';
+
+	const value = () => {
+		if ( blockBehaviors === undefined ) {
+			return 'default';
+		}
+		if ( behaviors?.lightbox.enabled ) {
+			return 'lightbox';
+		}
+		return '';
+	};
 
 	return (
 		<InspectorControls group="advanced">
@@ -81,24 +93,37 @@ function BehaviorsControl( {
 				<SelectControl
 					label={ __( 'Behaviors' ) }
 					// At the moment we are only supporting one behavior (Lightbox)
-					value={ behaviors?.lightbox ? 'lightbox' : '' }
+					value={ value() }
 					options={ options }
-					onChange={ onChange }
+					onChange={ onChangeBehavior }
 					hideCancelButton={ true }
 					help={ helpText }
 					size="__unstable-large"
 					disabled={ disabled }
 				/>
+				{ behaviors?.lightbox.enabled && (
+					<SelectControl
+						label={ __( 'Animation' ) }
+						// At the moment we are only supporting one behavior (Lightbox)
+						value={
+							behaviors?.lightbox.animation
+								? behaviors?.lightbox.animation
+								: ''
+						}
+						options={ [
+							{
+								value: 'zoom',
+								label: __( 'Zoom' ),
+							},
+							{ value: 'fade', label: 'Fade' },
+						] }
+						onChange={ onChangeAnimation }
+						hideCancelButton={ false }
+						size="__unstable-large"
+						disabled={ disabled }
+					/>
+				) }
 			</div>
-			<HStack justify="flex-end">
-				<Button
-					isSmall
-					disabled={ disabled }
-					onClick={ () => onChange( undefined ) }
-				>
-					{ __( 'Reset' ) }
-				</Button>
-			</HStack>
 		</InspectorControls>
 	);
 }
@@ -129,8 +154,8 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 				<BehaviorsControl
 					blockName={ props.name }
 					blockBehaviors={ props.attributes.behaviors }
-					onChange={ ( nextValue ) => {
-						if ( nextValue === undefined ) {
+					onChangeBehavior={ ( nextValue ) => {
+						if ( nextValue === 'default' ) {
 							props.setAttributes( {
 								behaviors: undefined,
 							} );
@@ -139,11 +164,29 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 							// change the default value (true) so we save it in the attributes.
 							props.setAttributes( {
 								behaviors: {
-									lightbox: nextValue === 'lightbox',
+									lightbox: {
+										enabled: nextValue === 'lightbox',
+										animation:
+											nextValue === 'lightbox'
+												? 'zoom'
+												: '',
+									},
 								},
 							} );
 						}
 					} }
+					onChangeAnimation={ ( nextValue ) => {
+						props.setAttributes( {
+							behaviors: {
+								lightbox: {
+									enabled:
+										props.attributes.behaviors.lightbox
+											.enabled,
+									animation: nextValue,
+								},
+							},
+						} );
+					} }
 					disabled={ blockHasLink }
 				/>
 			</>

package/src/hooks/font-family.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,6 +10,7 @@ import TokenList from '@wordpress/token-list';
  */
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+import { kebabCase } from '../utils/object';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';