@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.9.0

package/src/components/content-only-controls/rich-text/index.js

@@ -0,0 +1,179 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, useBaseControlProps } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { useRegistry } from '@wordpress/data';
+import { useRef, useState } from '@wordpress/element';
+import {
+	__unstableUseRichText as useRichText,
+	removeFormat,
+} from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { useFormatTypes } from '../../rich-text/use-format-types';
+import { getAllowedFormats } from '../../rich-text/utils';
+import { useEventListeners } from '../../rich-text/event-listeners';
+import FormatEdit from '../../rich-text/format-edit';
+import { keyboardShortcutContext, inputEventContext } from '../../rich-text';
+
+export default function RichTextControl( {
+	data,
+	field,
+	hideLabelFromVision,
+	config = {},
+} ) {
+	const registry = useRegistry();
+	const attrValue = field.getValue( { item: data } );
+	const fieldConfig = field.config || {};
+	const { clientId, updateBlockAttributes } = config;
+	const updateAttributes = ( html ) => {
+		const mappedChanges = field.setValue( { item: data, value: html } );
+		updateBlockAttributes( clientId, mappedChanges );
+	};
+	const [ selection, setSelection ] = useState( {
+		start: undefined,
+		end: undefined,
+	} );
+	const [ isSelected, setIsSelected ] = useState( false );
+	const anchorRef = useRef();
+	const inputEvents = useRef( new Set() );
+	const keyboardShortcuts = useRef( new Set() );
+
+	const adjustedAllowedFormats = getAllowedFormats( {
+		allowedFormats: fieldConfig?.allowedFormats,
+		disableFormats: fieldConfig?.disableFormats,
+	} );
+
+	const {
+		formatTypes,
+		prepareHandlers,
+		valueHandlers,
+		changeHandlers,
+		dependencies,
+	} = useFormatTypes( {
+		clientId,
+		identifier: field.id,
+		allowedFormats: adjustedAllowedFormats,
+		withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
+		disableNoneEssentialFormatting: true,
+	} );
+
+	function addEditorOnlyFormats( value ) {
+		return valueHandlers.reduce(
+			( accumulator, fn ) => fn( accumulator, value.text ),
+			value.formats
+		);
+	}
+
+	function removeEditorOnlyFormats( value ) {
+		formatTypes.forEach( ( formatType ) => {
+			// Remove formats created by prepareEditableTree, because they are editor only.
+			if ( formatType.__experimentalCreatePrepareEditableTree ) {
+				value = removeFormat(
+					value,
+					formatType.name,
+					0,
+					value.text.length
+				);
+			}
+		} );
+
+		return value.formats;
+	}
+
+	function addInvisibleFormats( value ) {
+		return prepareHandlers.reduce(
+			( accumulator, fn ) => fn( accumulator, value.text ),
+			value.formats
+		);
+	}
+
+	function onFocus() {
+		anchorRef.current?.focus();
+	}
+
+	const {
+		value,
+		getValue,
+		onChange: onRichTextChange,
+		ref: richTextRef,
+	} = useRichText( {
+		value: attrValue,
+		onChange( html, { __unstableFormats, __unstableText } ) {
+			updateAttributes( html );
+			Object.values( changeHandlers ).forEach( ( changeHandler ) => {
+				changeHandler( __unstableFormats, __unstableText );
+			} );
+		},
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange: ( start, end ) => setSelection( { start, end } ),
+		__unstableIsSelected: isSelected,
+		preserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,
+		placeholder: fieldConfig?.placeholder,
+		__unstableDisableFormats: fieldConfig?.disableFormats,
+		__unstableDependencies: dependencies,
+		__unstableAfterParse: addEditorOnlyFormats,
+		__unstableBeforeSerialize: removeEditorOnlyFormats,
+		__unstableAddInvisibleFormats: addInvisibleFormats,
+	} );
+
+	const { baseControlProps, controlProps } = useBaseControlProps( {
+		hideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,
+		label: field.label,
+	} );
+
+	return (
+		<>
+			{ isSelected && (
+				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<inputEventContext.Provider value={ inputEvents }>
+						<div>
+							<FormatEdit
+								value={ value }
+								onChange={ onRichTextChange }
+								onFocus={ onFocus }
+								formatTypes={ formatTypes }
+								forwardedRef={ anchorRef }
+								isVisible={ false }
+							/>
+						</div>
+					</inputEventContext.Provider>
+				</keyboardShortcutContext.Provider>
+			) }
+			<BaseControl __nextHasNoMarginBottom { ...baseControlProps }>
+				<div
+					className="block-editor-content-only-controls__rich-text"
+					role="textbox"
+					aria-multiline={ ! fieldConfig?.disableLineBreaks }
+					ref={ useMergeRefs( [
+						richTextRef,
+						useEventListeners( {
+							registry,
+							getValue,
+							onChange: onRichTextChange,
+							formatTypes,
+							selectionChange: setSelection,
+							isSelected,
+							disableFormats: fieldConfig?.disableFormats,
+							value,
+							tagName: 'div',
+							removeEditorOnlyFormats,
+							disableLineBreaks: fieldConfig?.disableLineBreaks,
+							keyboardShortcuts,
+							inputEvents,
+						} ),
+						anchorRef,
+					] ) }
+					onFocus={ () => setIsSelected( true ) }
+					onBlur={ () => setIsSelected( false ) }
+					contentEditable
+					{ ...controlProps }
+				/>
+			</BaseControl>
+		</>
+	);
+}

package/src/components/content-only-controls/rich-text/styles.scss

@@ -0,0 +1,24 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.block-editor-content-only-controls__rich-text {
+	width: 100%;
+	// Override input style margin in WP forms.css.
+	margin: 0;
+	background: $white;
+	color: $gray-900;
+	@include input-control( var(--wp-admin-theme-color, #3858e9) );
+	border-color: $gray-600;
+
+	&::placeholder {
+		color: color-mix(in srgb, $gray-900, transparent 38%);
+	}
+
+	min-height: $grid-unit-50;
+
+	// Subtract 1px to account for the border, which isn't included on the element
+	// on newer components like InputControl, SelectControl, etc.
+	// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+	padding: $grid-unit-15;
+}

package/src/components/content-only-controls/styles.scss

@@ -0,0 +1,44 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "./link/styles.scss" as *;
+@use "./media/styles.scss" as *;
+@use "./rich-text/styles.scss" as *;
+
+.block-editor-content-only-controls__screen {
+	&.components-navigator-screen {
+		padding: $grid-unit-10 0 $grid-unit-20 0;
+	}
+
+	// Add border for the entire content controls and remove the similar border
+	// for tools panel.
+	border-top: $border-width solid $gray-200;
+
+
+	.components-tools-panel {
+		border-top: none;
+
+		// Condense the tools panels more than normal.
+		padding-top: $grid-unit-10;
+	}
+}
+
+.block-editor-content-only-controls__button-panel {
+	padding: 4px;
+
+	// Match heading font weights for the tools panels.
+	font-weight: 500 !important;
+}
+
+.block-editor-content-only-controls__back-button,
+.block-editor-content-only-controls__drill-down-button {
+	width: 100%;
+}
+
+.block-editor-content-only-controls__fields-container {
+	padding: 0 $grid-unit-20;
+}
+
+.block-editor-content-only-controls__fields-header {
+	padding: $grid-unit-10 0;
+	margin-bottom: $grid-unit-05;
+}

package/src/components/content-only-controls/use-inspector-popover-placement.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+export function useInspectorPopoverPlacement(
+	{ isControl } = { isControl: false }
+) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: isControl ? 35 : 259,
+				},
+		  }
+		: {};
+}

package/src/components/font-family/README.md

@@ -28,7 +28,6 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 		/>
 	);
@@ -83,11 +82,3 @@ The rest of the props are passed down to the underlying `<SelectControl />` inst
 - Default: `false`
 
 Start opting into the larger default height that will become the default size in a future version.
-
-#### `__nextHasNoMarginBottom`
-
-- Type: `boolean`
-- Required: No
-- Default: `false`
-
-Start opting into the new margin-free styles that will become the default in a future version.

package/src/components/font-family/index.js

@@ -18,8 +18,6 @@ import { useSettings } from '../use-settings';
 export default function FontFamilyControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next40pxDefaultSize = false,
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -47,17 +45,6 @@ export default function FontFamilyControl( {
 		} ) ),
 	];
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.blockEditor.FontFamilyControl',
-			{
-				since: '6.7',
-				version: '7.0',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
 	if (
 		! __next40pxDefaultSize &&
 		( props.size === undefined || props.size === 'default' )
@@ -82,9 +69,7 @@ export default function FontFamilyControl( {
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
 			options={ options }
-			className={ clsx( 'block-editor-font-family-control', className, {
-				'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
-			} ) }
+			className={ clsx( 'block-editor-font-family-control', className ) }
 			{ ...props }
 		/>
 	);

package/src/components/font-family/stories/{index.story.js → index.story.jsx}

@@ -49,7 +49,6 @@ export const Default = {
 				slug: 'system-font',
 			},
 		],
-		__nextHasNoMarginBottom: true,
 		__next40pxDefaultSize: true,
 	},
 };

package/src/components/global-styles/dimensions-panel.js

@@ -39,6 +39,7 @@ export function useHasDimensionsPanel( settings ) {
 	const hasMargin = useHasMargin( settings );
 	const hasGap = useHasGap( settings );
 	const hasMinHeight = useHasMinHeight( settings );
+	const hasWidth = useHasWidth( settings );
 	const hasAspectRatio = useHasAspectRatio( settings );
 	const hasChildLayout = useHasChildLayout( settings );
 
@@ -50,6 +51,7 @@ export function useHasDimensionsPanel( settings ) {
 			hasMargin ||
 			hasGap ||
 			hasMinHeight ||
+			hasWidth ||
 			hasAspectRatio ||
 			hasChildLayout )
 	);
@@ -79,6 +81,10 @@ function useHasMinHeight( settings ) {
 	return settings?.dimensions?.minHeight;
 }
 
+function useHasWidth( settings ) {
+	return settings?.dimensions?.width;
+}
+
 function useHasAspectRatio( settings ) {
 	return settings?.dimensions?.aspectRatio;
 }
@@ -206,6 +212,7 @@ const DEFAULT_CONTROLS = {
 	margin: true,
 	blockGap: true,
 	minHeight: true,
+	width: true,
 	aspectRatio: true,
 	childLayout: true,
 };
@@ -384,6 +391,17 @@ export default function DimensionsPanel( {
 	};
 	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
 
+	// Width
+	const showWidthControl = useHasWidth( settings );
+	const widthValue = decodeValue( inheritedValue?.dimensions?.width );
+	const setWidthValue = ( newValue ) => {
+		onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) );
+	};
+	const resetWidthValue = () => {
+		setWidthValue( undefined );
+	};
+	const hasWidthValue = () => !! value?.dimensions?.width;
+
 	// Aspect Ratio
 	const showAspectRatioControl = useHasAspectRatio( settings );
 	const aspectRatioValue = decodeValue(
@@ -439,6 +457,7 @@ export default function DimensionsPanel( {
 				...previousValue?.dimensions,
 				minHeight: undefined,
 				aspectRatio: undefined,
+				width: undefined,
 			},
 		};
 	}, [] );
@@ -688,6 +707,23 @@ export default function DimensionsPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showWidthControl && (
+				<ToolsPanelItem
+					hasValue={ hasWidthValue }
+					label={ __( 'Width' ) }
+					onDeselect={ resetWidthValue }
+					isShownByDefault={
+						defaultControls.width ?? DEFAULT_CONTROLS.width
+					}
+					panelId={ panelId }
+				>
+					<HeightControl
+						label={ __( 'Width' ) }
+						value={ widthValue }
+						onChange={ setWidthValue }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ showAspectRatioControl && (
 				<AspectRatioTool
 					hasValue={ hasAspectRatioValue }

package/src/components/global-styles/hooks.js

@@ -152,7 +152,7 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
-		[ 'aspectRatio', 'minHeight' ].forEach( ( key ) => {
+		[ 'aspectRatio', 'minHeight', 'width' ].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.dimensions = {
 					...updatedSettings.dimensions,

package/src/components/global-styles/typography-panel.js

@@ -446,7 +446,6 @@ export default function TypographyPanel( {
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/inserter/media-tab/media-tab.js

@@ -4,8 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,55 +12,14 @@ import { useSelect } from '@wordpress/data';
 import { MediaCategoryPanel } from './media-panel';
 import MediaUploadCheck from '../../media-upload/check';
 import MediaUpload from '../../media-upload';
-import MediaUploadModal from '../../media-upload-modal';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
-import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 function MediaTab( {
 	rootClientId,
 	selectedCategory,
@@ -113,7 +71,7 @@ function MediaTab( {
 						{ children }
 					</CategoryTabs>
 					<MediaUploadCheck>
-						<ConditionalMediaUpload
+						<MediaUpload
 							multiple={ false }
 							onSelect={ onSelectMedia }
 							allowedTypes={ ALLOWED_MEDIA_TYPES }

package/src/components/inspector-controls-tabs/content-tab.js

@@ -8,16 +8,24 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockQuickNavigation from '../block-quick-navigation';
+import ContentOnlyControls from '../content-only-controls';
 
-const ContentTab = ( { contentClientIds } ) => {
+const ContentTab = ( { rootClientId, contentClientIds } ) => {
 	if ( ! contentClientIds || contentClientIds.length === 0 ) {
 		return null;
 	}
 
 	return (
-		<PanelBody title={ __( 'Content' ) }>
-			<BlockQuickNavigation clientIds={ contentClientIds } />
-		</PanelBody>
+		<>
+			{ ! window?.__experimentalContentOnlyPatternInsertion && (
+				<PanelBody title={ __( 'Content' ) }>
+					<BlockQuickNavigation clientIds={ contentClientIds } />
+				</PanelBody>
+			) }
+			{ window?.__experimentalContentOnlyPatternInsertion && (
+				<ContentOnlyControls rootClientId={ rootClientId } />
+			) }
+		</>
 	);
 };
 

package/src/components/inspector-controls-tabs/index.js

@@ -109,7 +109,10 @@ export default function InspectorControlsTabs( {
 					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
-					<ContentTab contentClientIds={ contentClientIds } />
+					<ContentTab
+						rootClientId={ clientId }
+						contentClientIds={ contentClientIds }
+					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
 					<InspectorControls.Slot group="list" />

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -99,11 +99,7 @@ export default function useInspectorControlsTabs(
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if (
-		hasBlockStyles ||
-		hasStyleFills ||
-		window?.__experimentalContentOnlyPatternInsertion
-	) {
+	if ( hasBlockStyles || hasStyleFills ) {
 		tabs.push( TAB_STYLES );
 	}
 

package/src/components/link-control/index.js

@@ -15,7 +15,7 @@ import {
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useState, useEffect } from '@wordpress/element';
+import { useRef, useState, useEffect, useMemo } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
@@ -187,7 +187,15 @@ function LinkControl( {
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
 	const searchInputRef = useRef();
-	const isEndingEditWithFocusRef = useRef( false );
+	// TODO: Remove entityUrlFallbackRef and previewValue in favor of value prop after taxonomy entity binding
+	// is stable and returns the correct URL instead of null while resolving when creating the entity.
+	//
+	// Preserve the URL from entity suggestions before binding overrides it
+	// This is due to entity binding not being available immediately after the suggestion is selected.
+	// The URL can return null, especially for taxonomy entities, while entity binding is being resolved.
+	// To avoid unnecessary rerenders and focus loss, we preserve the URL from the suggestion and use it
+	// as a fallback until the entity binding is available.
+	const entityUrlFallbackRef = useRef();
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
@@ -244,8 +252,6 @@ function LinkControl( {
 			wrapperNode.current;
 
 		nextFocusTarget.focus();
-
-		isEndingEditWithFocusRef.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
 	// The component mounting reference is maintained separately
@@ -261,18 +267,18 @@ function LinkControl( {
 	const hasLinkValue = value?.url?.trim()?.length > 0;
 
 	/**
-	 * Cancels editing state and marks that focus may need to be restored after
-	 * the next render, if focus was within the wrapper when editing finished.
+	 * Cancels editing state.
 	 */
 	const stopEditing = () => {
-		isEndingEditWithFocusRef.current = !! wrapperNode.current?.contains(
-			wrapperNode.current.ownerDocument.activeElement
-		);
-
 		setIsEditingLink( false );
 	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
+		// Preserve the URL for taxonomy entities before binding overrides it
+		if ( updatedValue?.kind === 'taxonomy' && updatedValue?.url ) {
+			entityUrlFallbackRef.current = updatedValue.url;
+		}
+
 		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
 		// which should not override any existing settings values set by the
 		// user. This filters out any settings values from the suggestion.
@@ -396,6 +402,24 @@ function LinkControl( {
 	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
 	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
+	const previewValue = useMemo( () => {
+		// There is a chance that the value is not yet set from the entity binding, so we use the preserved URL.
+		if (
+			value?.kind === 'taxonomy' &&
+			! value?.url &&
+			entityUrlFallbackRef.current
+		) {
+			// combine the value prop with the preserved URL from the suggestion
+			return {
+				...value,
+				url: entityUrlFallbackRef.current,
+			};
+		}
+
+		// If we don't have a fallback URL, use the value prop.
+		return value;
+	}, [ value ] );
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -487,8 +511,8 @@ function LinkControl( {
 
 			{ value && ! isEditingLink && ! isCreatingPage && (
 				<LinkPreview
-					key={ value?.url } // force remount when URL changes to avoid race conditions for rich previews
-					value={ value }
+					key={ previewValue?.url } // force remount when URL changes to avoid race conditions for rich previews
+					value={ previewValue }
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }