@wordpress/block-editor 15.8.0 → 15.8.1-next.dc3f6d3c1.0

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

@@ -0,0 +1,193 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BaseControl,
+	useBaseControlProps,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { useRegistry } from '@wordpress/data';
+import { useRef, useState } from '@wordpress/element';
+import {
+	__unstableUseRichText as useRichText,
+	isEmpty,
+	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( {
+	clientId,
+	control,
+	blockType,
+	attributeValues,
+	updateAttributes,
+} ) {
+	const registry = useRegistry();
+	const valueKey = control.mapping.value;
+	const attrValue = attributeValues[ valueKey ];
+	const defaultValue =
+		blockType.attributes[ valueKey ]?.defaultValue ?? undefined;
+	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: control.args?.allowedFormats,
+		disableFormats: control.args?.disableFormats,
+	} );
+
+	const {
+		formatTypes,
+		prepareHandlers,
+		valueHandlers,
+		changeHandlers,
+		dependencies,
+	} = useFormatTypes( {
+		clientId,
+		identifier: valueKey,
+		allowedFormats: adjustedAllowedFormats,
+		withoutInteractiveFormatting:
+			control.args?.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,
+		ref: richTextRef,
+	} = useRichText( {
+		value: attrValue,
+		onChange( html, { __unstableFormats, __unstableText } ) {
+			updateAttributes( { [ valueKey ]: html } );
+			Object.values( changeHandlers ).forEach( ( changeHandler ) => {
+				changeHandler( __unstableFormats, __unstableText );
+			} );
+		},
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange: ( start, end ) => setSelection( { start, end } ),
+		__unstableIsSelected: isSelected,
+		preserveWhiteSpace: !! control.args?.preserveWhiteSpace,
+		placeholder: control.args?.placeholder,
+		__unstableDisableFormats: control.args?.disableFormats,
+		__unstableDependencies: dependencies,
+		__unstableAfterParse: addEditorOnlyFormats,
+		__unstableBeforeSerialize: removeEditorOnlyFormats,
+		__unstableAddInvisibleFormats: addInvisibleFormats,
+	} );
+
+	const { baseControlProps, controlProps } = useBaseControlProps( {
+		hideLabelFromVision: control.shownByDefault,
+		label: control.label,
+	} );
+
+	return (
+		<ToolsPanelItem
+			panelId={ clientId }
+			label={ control.label }
+			hasValue={ () => {
+				return value?.text && ! isEmpty( value );
+			} }
+			onDeselect={ () =>
+				updateAttributes( { [ valueKey ]: defaultValue } )
+			}
+			isShownByDefault={ control.shownByDefault }
+		>
+			{ isSelected && (
+				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
+					<inputEventContext.Provider value={ inputEvents }>
+						<div>
+							<FormatEdit
+								value={ value }
+								onChange={ onChange }
+								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={ ! control.args?.disableLineBreaks }
+					ref={ useMergeRefs( [
+						richTextRef,
+						useEventListeners( {
+							registry,
+							getValue,
+							onChange,
+							formatTypes,
+							selectionChange: setSelection,
+							isSelected,
+							disableFormats: control.args?.disableFormats,
+							value,
+							tagName: 'div',
+							removeEditorOnlyFormats,
+							disableLineBreaks: control.args?.disableLineBreaks,
+							keyboardShortcuts,
+							inputEvents,
+						} ),
+						anchorRef,
+					] ) }
+					onFocus={ () => setIsSelected( true ) }
+					onBlur={ () => setIsSelected( false ) }
+					contentEditable
+					{ ...controlProps }
+				/>
+			</BaseControl>
+		</ToolsPanelItem>
+	);
+}

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,35 @@
+@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 0 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%;
+}

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/global-styles/typography-panel.js

@@ -6,6 +6,7 @@ import {
 	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	Notice,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo, useEffect } from '@wordpress/element';
@@ -609,9 +610,20 @@ export default function TypographyPanel( {
 					<TextAlignmentControl
 						value={ textAlign }
 						onChange={ setTextAlign }
+						options={ [ 'left', 'center', 'right', 'justify' ] }
 						size="__unstable-large"
 						__nextHasNoMarginBottom
 					/>
+
+					{ textAlign === 'justify' && (
+						<div>
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'Justified text can reduce readability. For better accessibility, use left-aligned text instead.'
+								) }
+							</Notice>
+						</div>
+					) }
 				</ToolsPanelItem>
 			) }
 		</Wrapper>

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/list-view/block-select-button.js

@@ -12,7 +12,13 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
+import {
+	Icon,
+	lockSmall as lock,
+	pinSmall,
+	unseen,
+	symbol,
+} from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -55,28 +61,35 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { canToggleBlockVisibility, isBlockHidden, isContentOnly } =
-		useSelect(
-			( select ) => {
-				const { getBlockName } = select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
-					select( blockEditorStore )
-				);
-				return {
-					canToggleBlockVisibility: hasBlockSupport(
-						getBlockName( clientId ),
-						'blockVisibility',
-						true
-					),
-					isBlockHidden: _isBlockHidden( clientId ),
-					isContentOnly:
-						select( blockEditorStore ).getBlockEditingMode(
-							clientId
-						) === 'contentOnly',
-				};
-			},
-			[ clientId ]
-		);
+	const {
+		canToggleBlockVisibility,
+		isBlockHidden,
+		isContentOnly,
+		hasPatternName,
+	} = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { isBlockHidden: _isBlockHidden } = unlock(
+				select( blockEditorStore )
+			);
+			const blockAttributes = getBlockAttributes( clientId );
+			return {
+				canToggleBlockVisibility: hasBlockSupport(
+					getBlockName( clientId ),
+					'blockVisibility',
+					true
+				),
+				isBlockHidden: _isBlockHidden( clientId ),
+				isContentOnly:
+					select( blockEditorStore ).getBlockEditingMode(
+						clientId
+					) === 'contentOnly',
+				hasPatternName: !! blockAttributes?.metadata?.patternName,
+			};
+		},
+		[ clientId ]
+	);
 	const shouldShowLockIcon = isLocked && ! isContentOnly;
 	const shouldShowBlockVisibilityIcon =
 		canToggleBlockVisibility && isBlockHidden;
@@ -123,7 +136,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ blockInformation?.icon }
+				icon={ hasPatternName ? symbol : blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>

package/src/components/media-placeholder/index.js

@@ -25,7 +25,6 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import MediaUpload from '../media-upload';
-import MediaUploadModal from '../media-upload-modal';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
@@ -33,45 +32,6 @@ import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
-/**
- * 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 } />;
-}
-
 const InsertFromURLPopover = ( {
 	src,
 	onChange,
@@ -488,7 +448,7 @@ export function MediaPlaceholder( {
 		};
 		const libraryButton = mediaLibraryButton ?? defaultButton;
 		const uploadMediaLibraryButton = (
-			<ConditionalMediaUpload
+			<MediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }

package/src/components/media-replace-flow/index.js

@@ -12,7 +12,6 @@ import {
 	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import {
 	postFeaturedImage,
@@ -27,7 +26,6 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import MediaUpload from '../media-upload';
-import MediaUploadModal from '../media-upload-modal';
 import MediaUploadCheck from '../media-upload/check';
 import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
@@ -35,42 +33,6 @@ import { store as blockEditorStore } from '../../store';
 const noop = () => {};
 let uniqueId = 0;
 
-/**
- * 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 { getSettings } = useSelect( blockEditorStore );
-
-	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={ getSettings().mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
@@ -93,6 +55,7 @@ const MediaReplaceFlow = ( {
 	handleUpload = true,
 	popoverProps,
 	renderToggle,
+	className,
 } ) => {
 	const { getSettings } = useSelect( blockEditorStore );
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
@@ -169,6 +132,7 @@ const MediaReplaceFlow = ( {
 	return (
 		<Dropdown
 			popoverProps={ popoverProps }
+			className={ className }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				if ( renderToggle ) {
@@ -195,7 +159,7 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUploadCheck>
-							<ConditionalMediaUpload
+							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
 								multiple={ multiple }

package/src/components/rich-text/format-edit.js

@@ -13,7 +13,14 @@ const DEFAULT_BLOCK_CONTEXT = {};
 
 export const usesContextKey = Symbol( 'usesContext' );
 
-function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+function Edit( {
+	onChange,
+	onFocus,
+	value,
+	forwardedRef,
+	settings,
+	isVisible,
+} ) {
 	const {
 		name,
 		edit: EditFunction,
@@ -47,6 +54,7 @@ function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
 		<EditFunction
 			key={ name }
 			isActive={ isActive }
+			isVisible={ isVisible }
 			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
 			isObjectActive={ isObjectActive }
 			activeObjectAttributes={