@wordpress/block-editor 12.21.0 → 12.23.0

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

@@ -94,14 +94,13 @@ export function RichTextWrapper(
 		minWidth,
 		maxWidth,
 		onBlur,
-		setRef,
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
 		onEnter: onCustomEnter,
 		...props
 	},
-	forwardedRef
+	providedRef
 ) {
 	const instanceId = useInstanceId( RichTextWrapper );
 
@@ -529,13 +528,13 @@ export function RichTextWrapper(
 		[ onReplace, __unstableMarkAutomaticChange ]
 	);
 
-	const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
+	const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );
 
 	return (
 		<RichText
 			clientId={ clientId }
 			identifier={ identifier }
-			ref={ mergedRef }
+			nativeEditorRef={ mergedRef }
 			value={ adjustedValue }
 			onChange={ adjustedOnChange }
 			selectionStart={ selectionStart }
@@ -586,7 +585,6 @@ export function RichTextWrapper(
 			minWidth={ minWidth }
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
-			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
@@ -657,27 +655,32 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This export does not actually implement a private API, but was exported
+// under this name for interoperability with the web version of the RichText
+// component.
+export const PrivateRichText = withDeprecations(
 	forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
+PrivateRichText.Content = Content;
 
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
-ForwardedRichTextContainer.Content.defaultProps = {
+PrivateRichText.Content.defaultProps = {
 	format: 'string',
 	value: '',
 };
 
-ForwardedRichTextContainer.Raw = RichText;
+PrivateRichText.Raw = forwardRef( ( props, ref ) => (
+	<RichText { ...props } nativeEditorRef={ ref } />
+) );
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+export default PrivateRichText;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';

package/src/components/rich-text/native/get-format-colors.native.js

@@ -27,7 +27,7 @@ export function getFormatColors( formats, colors ) {
 						);
 						const currentStyles = currentFormat?.attributes?.style;
 						if (
-							colorObject &&
+							colorObject?.color &&
 							( ! currentStyles ||
 								currentStyles?.indexOf( colorObject.color ) ===
 									-1 )

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

@@ -1222,8 +1222,8 @@ export class RichText extends Component {
 					ref={ ( ref ) => {
 						this._editor = ref;
 
-						if ( this.props.setRef ) {
-							this.props.setRef( ref );
+						if ( this.props.nativeEditorRef ) {
+							this.props.nativeEditorRef( ref );
 						}
 					} }
 					style={ {

package/src/components/rich-text/with-deprecations.js

@@ -3,7 +3,6 @@
  */
 import { forwardRef } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId } from '@wordpress/compose';
 import { __unstableCreateElement } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -36,12 +35,10 @@ export function withDeprecations( Component ) {
 		}
 
 		const NewComponent = props.multiline ? RichTextMultiline : Component;
-		const instanceId = useInstanceId( NewComponent );
 
 		return (
 			<NewComponent
 				{ ...props }
-				identifier={ props.identifier || instanceId }
 				value={ value }
 				onChange={ onChange }
 				ref={ ref }

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/image-url-input-ui.js

@@ -46,6 +46,7 @@ const ImageURLInputUI = ( {
 	showLightboxSetting,
 	lightboxEnabled,
 	onSetLightbox,
+	resetLightbox,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	// Use internal state instead of a ref to make sure that the component
@@ -241,7 +242,9 @@ const ImageURLInputUI = ( {
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
-	const showLinkEditor = ( ! linkEditorValue && ! lightboxEnabled ) === true;
+	const hideLightboxPanel =
+		! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting );
+	const showLinkEditor = ! linkEditorValue && hideLightboxPanel;
 
 	const urlLabel = (
 		getLinkDestinations().find(
@@ -249,6 +252,65 @@ const ImageURLInputUI = ( {
 		) || {}
 	).title;
 
+	const PopoverChildren = () => {
+		if (
+			lightboxEnabled &&
+			showLightboxSetting &&
+			! url &&
+			! isEditingLink
+		) {
+			return (
+				<div className="block-editor-url-popover__expand-on-click">
+					<Icon icon={ fullscreen } />
+					<div className="text">
+						<p>{ __( 'Expand on click' ) }</p>
+						<p className="description">
+							{ __( 'Scales the image with a lightbox effect' ) }
+						</p>
+					</div>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Disable expand on click' ) }
+						onClick={ () => {
+							onSetLightbox( false );
+						} }
+						size="compact"
+					/>
+				</div>
+			);
+		} else if ( ! url || isEditingLink ) {
+			return (
+				<URLPopover.LinkEditor
+					className="block-editor-format-toolbar__link-container-content"
+					value={ linkEditorValue }
+					onChangeInputValue={ setUrlInput }
+					onSubmit={ onSubmitLinkChange() }
+					autocompleteRef={ autocompleteRef }
+				/>
+			);
+		} else if ( url && ! isEditingLink ) {
+			return (
+				<>
+					<URLPopover.LinkViewer
+						className="block-editor-format-toolbar__link-container-content"
+						url={ url }
+						onEditLinkClick={ startEditLink }
+						urlLabel={ urlLabel }
+					/>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Remove link' ) }
+						onClick={ () => {
+							onLinkRemove();
+							resetLightbox();
+						} }
+						size="compact"
+					/>
+				</>
+			);
+		}
+	};
+
 	return (
 		<>
 			<ToolbarButton
@@ -258,7 +320,9 @@ const ImageURLInputUI = ( {
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
-				isActive={ !! url || lightboxEnabled }
+				isActive={
+					!! url || ( lightboxEnabled && showLightboxSetting )
+				}
 			/>
 			{ isOpen && (
 				<URLPopover
@@ -267,7 +331,7 @@ const ImageURLInputUI = ( {
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={
-						! lightboxEnabled ? () => advancedOptions : null
+						hideLightboxPanel ? () => advancedOptions : null
 					}
 					additionalControls={
 						showLinkEditor && (
@@ -314,54 +378,7 @@ const ImageURLInputUI = ( {
 					}
 					offset={ 13 }
 				>
-					{ ( ! url || isEditingLink ) && ! lightboxEnabled && (
-						<>
-							<URLPopover.LinkEditor
-								className="block-editor-format-toolbar__link-container-content"
-								value={ linkEditorValue }
-								onChangeInputValue={ setUrlInput }
-								onSubmit={ onSubmitLinkChange() }
-								autocompleteRef={ autocompleteRef }
-							/>
-						</>
-					) }
-					{ url && ! isEditingLink && ! lightboxEnabled && (
-						<>
-							<URLPopover.LinkViewer
-								className="block-editor-format-toolbar__link-container-content"
-								url={ url }
-								onEditLinkClick={ startEditLink }
-								urlLabel={ urlLabel }
-							/>
-							<Button
-								icon={ linkOff }
-								label={ __( 'Remove link' ) }
-								onClick={ onLinkRemove }
-								size="compact"
-							/>
-						</>
-					) }
-					{ ! url && ! isEditingLink && lightboxEnabled && (
-						<div className="block-editor-url-popover__expand-on-click">
-							<Icon icon={ fullscreen } />
-							<div className="text">
-								<p>{ __( 'Expand on click' ) }</p>
-								<p className="description">
-									{ __(
-										'Scales the image with a lightbox effect'
-									) }
-								</p>
-							</div>
-							<Button
-								icon={ linkOff }
-								label={ __( 'Disable expand on click' ) }
-								onClick={ () => {
-									onSetLightbox( false );
-								} }
-								size="compact"
-							/>
-						</div>
-					) }
+					{ PopoverChildren() }
 				</URLPopover>
 			) }
 		</>

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

@@ -6,6 +6,7 @@ import {
 	store as blocksStore,
 	isReusableBlock,
 	isTemplatePart,
+	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -68,11 +69,8 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const {
-				getBlockName,
-				getBlockAttributes,
-				__experimentalGetReusableBlockTitle,
-			} = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -80,12 +78,12 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isReusable = isReusableBlock( blockType );
-			const resusableTitle = isReusable
-				? __experimentalGetReusableBlockTitle( attributes.ref )
+			const isSynced =
+				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const syncedTitle = isSynced
+				? getBlockLabel( blockType, attributes )
 				: undefined;
-			const title = resusableTitle || blockType.title;
-			const isSynced = isReusable || isTemplatePart( blockType );
+			const title = syncedTitle || blockType.title;
 			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,

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/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,53 @@ 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>
 	);
 }