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

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

@@ -0,0 +1,23 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.block-editor-content-only-controls__link {
+	width: 100%;
+	box-shadow: inset 0 0 0 $border-width $gray-400;
+
+	&:focus:not(:disabled) {
+		// Allow smooth transition between focused and unfocused box-shadow states.
+		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-content-only-controls__link-row {
+	align-items: center;
+}
+
+.block-editor-content-only-controls__link-title {
+	width: 100%;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}

package/src/components/content-only-controls/media/index.js

@@ -0,0 +1,285 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalGrid as Grid,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	audio as audioIcon,
+	image as imageIcon,
+	media as mediaIcon,
+	video as videoIcon,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import MediaReplaceFlow from '../../media-replace-flow';
+import MediaUploadCheck from '../../media-upload/check';
+import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
+import { getMediaSelectKey } from '../../../store/private-keys';
+import { store as blockEditorStore } from '../../../store';
+
+function MediaThumbnail( { control, attributeValues, attachment } ) {
+	const { allowedTypes, multiple } = control.args;
+	const mapping = control.mapping;
+	if ( multiple ) {
+		return 'todo multiple';
+	}
+
+	if ( attachment?.media_type === 'image' || attachment?.poster ) {
+		return (
+			<img
+				className="block-editor-content-only-controls__media-thumbnail"
+				alt=""
+				width={ 24 }
+				height={ 24 }
+				src={
+					attachment.media_type === 'image'
+						? attachment.source_url
+						: attachment.poster
+				}
+			/>
+		);
+	}
+
+	if ( allowedTypes.length === 1 ) {
+		let src;
+		if (
+			allowedTypes[ 0 ] === 'image' &&
+			mapping.src &&
+			attributeValues[ mapping.src ]
+		) {
+			src = attributeValues[ mapping.src ];
+		} else if (
+			allowedTypes[ 0 ] === 'video' &&
+			mapping.poster &&
+			attributeValues[ mapping.poster ]
+		) {
+			src = attributeValues[ mapping.poster ];
+		}
+
+		if ( src ) {
+			return (
+				<img
+					className="block-editor-content-only-controls__media-thumbnail"
+					alt=""
+					width={ 24 }
+					height={ 24 }
+					src={ src }
+				/>
+			);
+		}
+
+		let icon;
+		if ( allowedTypes[ 0 ] === 'image' ) {
+			icon = imageIcon;
+		} else if ( allowedTypes[ 0 ] === 'video' ) {
+			icon = videoIcon;
+		} else if ( allowedTypes[ 0 ] === 'audio' ) {
+			icon = audioIcon;
+		} else {
+			icon = mediaIcon;
+		}
+
+		if ( icon ) {
+			return <Icon icon={ icon } size={ 24 } />;
+		}
+	}
+
+	return <Icon icon={ mediaIcon } size={ 24 } />;
+}
+
+export default function Media( {
+	clientId,
+	control,
+	blockType,
+	attributeValues,
+	updateAttributes,
+} ) {
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	const typeKey = control.mapping.type;
+	const idKey = control.mapping.id;
+	const srcKey = control.mapping.src;
+	const captionKey = control.mapping.caption;
+	const altKey = control.mapping.alt;
+	const posterKey = control.mapping.poster;
+	const featuredImageKey = control.mapping.featuredImage;
+
+	const id = attributeValues[ idKey ];
+	const src = attributeValues[ srcKey ];
+	const caption = attributeValues[ captionKey ];
+	const alt = attributeValues[ altKey ];
+	const useFeaturedImage = attributeValues[ featuredImageKey ];
+
+	const attachment = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return;
+			}
+
+			const settings = select( blockEditorStore ).getSettings();
+			const getMedia = settings[ getMediaSelectKey ];
+
+			if ( ! getMedia ) {
+				return;
+			}
+
+			return getMedia( select, id );
+		},
+		[ id ]
+	);
+
+	// TODO - pluralize when multiple.
+	let chooseItemLabel;
+	if ( control.args.allowedTypes.length === 1 ) {
+		const allowedType = control.args.allowedTypes[ 0 ];
+		if ( allowedType === 'image' ) {
+			chooseItemLabel = __( 'Choose an image…' );
+		} else if ( allowedType === 'video' ) {
+			chooseItemLabel = __( 'Choose a video…' );
+		} else if ( allowedType === 'application' ) {
+			chooseItemLabel = __( 'Choose a file…' );
+		} else {
+			chooseItemLabel = __( 'Choose a media item…' );
+		}
+	} else {
+		chooseItemLabel = __( 'Choose a media item…' );
+	}
+
+	const defaultValues = useMemo( () => {
+		return Object.fromEntries(
+			Object.entries( control.mapping ).map( ( [ , attributeKey ] ) => {
+				return [
+					attributeKey,
+					blockType.attributes[ attributeKey ]?.defaultValue ??
+						undefined,
+				];
+			} )
+		);
+	}, [ blockType.attributes, control.mapping ] );
+
+	return (
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				panelId={ clientId }
+				label={ control.label }
+				hasValue={ () => !! src }
+				onDeselect={ () => {
+					updateAttributes( defaultValues );
+				} }
+				isShownByDefault={ control.shownByDefault }
+			>
+				<MediaReplaceFlow
+					className="block-editor-content-only-controls__media-replace-flow"
+					allowedTypes={ control.args.allowedTypes }
+					mediaId={ id }
+					mediaURL={ src }
+					multiple={ control.args.multiple }
+					popoverProps={ popoverProps }
+					onReset={ () => {
+						updateAttributes( defaultValues );
+					} }
+					useFeaturedImage={ !! useFeaturedImage }
+					onToggleFeaturedImage={
+						!! featuredImageKey &&
+						( () => {
+							updateAttributes( {
+								...defaultValues,
+								[ featuredImageKey ]: ! useFeaturedImage,
+							} );
+						} )
+					}
+					onSelect={ ( selectedMedia ) => {
+						if ( selectedMedia.id && selectedMedia.url ) {
+							const optionalAttributes = {};
+
+							if ( typeKey && selectedMedia.type ) {
+								optionalAttributes[ typeKey ] =
+									selectedMedia.type;
+							}
+
+							if (
+								captionKey &&
+								! caption &&
+								selectedMedia.caption
+							) {
+								optionalAttributes[ captionKey ] =
+									selectedMedia.caption;
+							}
+							if ( altKey && ! alt && selectedMedia.alt ) {
+								optionalAttributes[ altKey ] =
+									selectedMedia.alt;
+							}
+							if ( posterKey && selectedMedia.poster ) {
+								optionalAttributes[ posterKey ] =
+									selectedMedia.poster;
+							}
+
+							updateAttributes( {
+								[ idKey ]: selectedMedia.id,
+								[ srcKey ]: selectedMedia.url,
+								...optionalAttributes,
+							} );
+						}
+					} }
+					renderToggle={ ( buttonProps ) => (
+						<Button
+							__next40pxDefaultSize
+							className="block-editor-content-only-controls__media"
+							{ ...buttonProps }
+						>
+							<Grid
+								rowGap={ 0 }
+								columnGap={ 8 }
+								templateColumns="24px 1fr"
+								className="block-editor-content-only-controls__media-row"
+							>
+								{ src && (
+									<>
+										<MediaThumbnail
+											attachment={ attachment }
+											control={ control }
+											attributeValues={ attributeValues }
+										/>
+										<span className="block-editor-content-only-controls__media-title">
+											{
+												// TODO - truncate long titles or url smartly (e.g. show filename).
+												attachment?.title?.raw &&
+												attachment?.title?.raw !== ''
+													? attachment?.title?.raw
+													: src
+											}
+										</span>
+									</>
+								) }
+								{ ! src && (
+									<>
+										<span
+											className="block-editor-content-only-controls__media-placeholder"
+											style={ {
+												width: '24px',
+												height: '24px',
+											} }
+										/>
+										<span className="block-editor-content-only-controls__media-title">
+											{ chooseItemLabel }
+										</span>
+									</>
+								) }
+							</Grid>
+						</Button>
+					) }
+				/>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
+	);
+}

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

@@ -0,0 +1,47 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.block-editor-content-only-controls__media {
+	width: 100%;
+	box-shadow: inset 0 0 0 $border-width $gray-400;
+
+	&:focus:not(:disabled) {
+		// Allow smooth transition between focused and unfocused box-shadow states.
+		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-content-only-controls__media-replace-flow {
+	// Required, otherwise the width collapses.
+	display: block;
+}
+
+.block-editor-content-only-controls__media-row {
+	align-items: center;
+}
+
+.block-editor-content-only-controls__media-placeholder {
+	width: 24px;
+	height: 24px;
+	border-radius: $radius-small;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	padding: 0;
+	background:
+		$white
+		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
+.block-editor-content-only-controls__media-title {
+	width: 100%;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+block-editor-content-only-controls__media-thumbnail {
+	width: 100%;
+	height: 100%;
+	border-radius: $radius-small;
+	align-self: center;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	TextControl,
+} from '@wordpress/components';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+export default function PlainText( {
+	clientId,
+	control,
+	blockType,
+	attributeValues,
+	updateAttributes,
+} ) {
+	const valueKey = control.mapping.value;
+	const value = attributeValues[ valueKey ];
+	const defaultValue =
+		blockType.attributes[ valueKey ]?.defaultValue ?? undefined;
+
+	return (
+		<ToolsPanelItem
+			panelId={ clientId }
+			label={ control.label }
+			hasValue={ () => {
+				return (
+					value !== defaultValue && stripHTML( value )?.length !== 0
+				);
+			} }
+			onDeselect={ () => {
+				updateAttributes( { [ valueKey ]: defaultValue } );
+			} }
+			isShownByDefault={ control.shownByDefault }
+		>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ control.label }
+				value={ value ? stripHTML( value ) : '' }
+				onChange={ ( newValue ) => {
+					updateAttributes( { [ valueKey ]: newValue } );
+				} }
+				autoComplete="off"
+				hideLabelFromVision={ control.shownByDefault }
+			/>
+		</ToolsPanelItem>
+	);
+}

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,
+				},
+		  }
+		: {};
+}