@wordpress/block-editor 17.0.0 → 17.1.0

package/src/hooks/block-fields/media/index.js

@@ -1,269 +0,0 @@
-import {
-	Button,
-	Icon as WCIcon,
-	__experimentalGrid as Grid,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { focus } from '@wordpress/dom';
-import { useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	audio as audioIcon,
-	image as imageIcon,
-	media as mediaIcon,
-	video as videoIcon,
-	reset as resetIcon,
-} from '@wordpress/icons';
-import MediaReplaceFlow from '../../../components/media-replace-flow';
-import MediaUploadCheck from '../../../components/media-upload/check';
-import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
-import { getMediaSelectKey } from '../../../store/private-keys';
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Focuses the toggle button.
- *
- * @param {Object} containerRef - ref object containing current element
- */
-const focusToggleButton = ( containerRef ) => {
-	// Use requestAnimationFrame to ensure DOM updates are complete.
-	window.requestAnimationFrame( () => {
-		const [ toggleButton ] = focus.tabbable.find( containerRef?.current );
-		if ( ! toggleButton ) {
-			return;
-		}
-
-		toggleButton.focus();
-	} );
-};
-
-function MediaThumbnail( { data, field, attachment, config } ) {
-	const { allowedTypes = [], multiple = false } = config || {};
-
-	if ( multiple ) {
-		return 'todo multiple';
-	}
-
-	if ( attachment?.media_type === 'image' || attachment?.poster ) {
-		return (
-			<div className="block-editor-content-only-controls__media-thumbnail">
-				<img
-					alt=""
-					width={ 20 }
-					height={ 20 }
-					src={
-						attachment.media_type === 'image'
-							? attachment.source_url
-							: attachment.poster
-					}
-				/>
-			</div>
-		);
-	}
-
-	if ( allowedTypes.length === 1 ) {
-		const value = field.getValue( { item: data } );
-		const url = value?.url;
-
-		if ( allowedTypes[ 0 ] === 'image' && url ) {
-			return (
-				<div className="block-editor-content-only-controls__media-thumbnail">
-					<img alt="" width={ 20 } height={ 20 } src={ url } />
-				</div>
-			);
-		}
-
-		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 <WCIcon icon={ icon } size={ 20 } />;
-		}
-	}
-
-	return <WCIcon icon={ mediaIcon } size={ 20 } />;
-}
-
-export default function Media( { data, field, onChange, config = {} } ) {
-	const { popoverProps } = useInspectorPopoverPlacement( {
-		isControl: true,
-	} );
-	const value = field.getValue( { item: data } );
-	const {
-		allowedTypes = [],
-		multiple = false,
-		useFeaturedImage = false,
-	} = config;
-
-	const id = value?.id;
-	const url = value?.url;
-
-	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 ( allowedTypes.length === 1 ) {
-		const allowedType = allowedTypes[ 0 ];
-		if ( allowedType === 'image' ) {
-			chooseItemLabel = __( 'Image' );
-		} else if ( allowedType === 'video' ) {
-			chooseItemLabel = __( 'Video' );
-		} else if ( allowedType === 'application' ) {
-			chooseItemLabel = __( 'File' );
-		} else {
-			chooseItemLabel = __( 'Media' );
-		}
-	} else {
-		chooseItemLabel = __( 'Media' );
-	}
-	const containerRef = useRef();
-
-	return (
-		<MediaUploadCheck>
-			<div
-				ref={ containerRef }
-				className="block-editor-content-only-controls"
-			>
-				<MediaReplaceFlow
-					className="block-editor-content-only-controls__media-replace-flow"
-					allowedTypes={ allowedTypes }
-					mediaId={ id }
-					mediaURL={ url }
-					multiple={ multiple }
-					popoverProps={ popoverProps }
-					onReset={ () => {
-						onChange(
-							field.setValue( {
-								item: data,
-								value: {},
-							} )
-						);
-					} }
-					{ ...( useFeaturedImage && {
-						useFeaturedImage: !! value?.featuredImage,
-						onToggleFeaturedImage: () => {
-							onChange(
-								field.setValue( {
-									item: data,
-									value: {
-										featuredImage: ! value?.featuredImage,
-									},
-								} )
-							);
-						},
-					} ) }
-					onSelect={ ( selectedMedia ) => {
-						if ( selectedMedia.id && selectedMedia.url ) {
-							const newValue = {
-								...selectedMedia,
-								mediaType: selectedMedia.media_type,
-							};
-
-							// Turn off featured image when manually selecting media
-							if ( useFeaturedImage ) {
-								newValue.featuredImage = false;
-							}
-
-							onChange(
-								field.setValue( {
-									item: data,
-									value: newValue,
-								} )
-							);
-						}
-					} }
-					renderToggle={ ( buttonProps ) => (
-						<Button
-							__next40pxDefaultSize
-							className="block-editor-content-only-controls__media"
-							{ ...buttonProps }
-						>
-							<Grid
-								rowGap={ 0 }
-								columnGap={ 8 }
-								templateColumns="20px 1fr"
-								className="block-editor-content-only-controls__media-row"
-							>
-								{ url && (
-									<>
-										<MediaThumbnail
-											attachment={ attachment }
-											field={ field }
-											data={ data }
-											config={ config }
-										/>
-										<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
-													: url
-											}
-										</span>
-									</>
-								) }
-								{ ! url && (
-									<>
-										<span
-											className="block-editor-content-only-controls__media-placeholder"
-											style={ {
-												width: '20px',
-												height: '20px',
-											} }
-										/>
-										<span className="block-editor-content-only-controls__media-title">
-											{ chooseItemLabel }
-										</span>
-									</>
-								) }
-							</Grid>
-						</Button>
-					) }
-				/>
-				{ url && (
-					<Button
-						label={ __( 'Reset' ) }
-						className="block-editor-content-only-controls__media-reset"
-						size="small"
-						icon={ resetIcon }
-						onClick={ () => {
-							onChange(
-								field.setValue( {
-									item: data,
-									value: {},
-								} )
-							);
-
-							focusToggleButton( containerRef );
-						} }
-					/>
-				) }
-			</div>
-		</MediaUploadCheck>
-	);
-}

package/src/hooks/block-fields/media/styles.scss

@@ -1,77 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.block-editor-content-only-controls__media {
-	width: 100%;
-	border-color: $gray-400;
-	padding-right: $grid-unit-40;
-}
-
-.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: 20px;
-	height: 20px;
-	border-radius: $radius-small;
-	align-self: center;
-	overflow: hidden;
-
-	img {
-		width: 100% !important;
-		height: 100% !important;
-		object-fit: cover;
-	}
-}
-
-.block-editor-content-only-controls {
-	position: relative;
-}
-
-.block-editor-content-only-controls__media-reset {
-	position: absolute;
-	right: 0;
-	top: $grid-unit;
-	margin: auto $grid-unit auto;
-	opacity: 0;
-	border-radius: $radius-small;
-	@media not ( prefers-reduced-motion ) {
-		transition: opacity 0.1s ease-in-out;
-	}
-
-	.block-editor-content-only-controls:hover &,
-	&:focus,
-	&:hover {
-		opacity: 1;
-	}
-
-	@media (hover: none) {
-		// Show reset button on devices that do not support hover.
-		opacity: 1;
-	}
-}

package/src/hooks/block-fields/rich-text/index.js

@@ -1,123 +0,0 @@
-import { BaseControl, useBaseControlProps } from '@wordpress/components';
-import { useMergeRefs } from '@wordpress/compose';
-import { useRegistry } from '@wordpress/data';
-import { useMemo, useRef, useState } from '@wordpress/element';
-import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
-import { getAllowedFormats } from '../../../components/rich-text/utils';
-import { useEventListeners } from '../../../components/rich-text/event-listeners';
-import FormatEdit from '../../../components/rich-text/format-edit';
-import { unlock } from '../../../lock-unlock';
-
-const { useRichText, KeyboardShortcutContext, InputEventContext } =
-	unlock( richTextPrivateApis );
-
-export default function RichTextControl( {
-	data,
-	field,
-	hideLabelFromVision,
-	onChange,
-	config = {},
-} ) {
-	const registry = useRegistry();
-	const attrValue = field.getValue( { item: data } );
-	const fieldConfig = field.config || {};
-	const { clientId } = config;
-	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,
-	} );
-
-	function onFocus() {
-		anchorRef.current?.focus();
-	}
-
-	const {
-		value,
-		getValue,
-		onChange: onRichTextChange,
-		ref: richTextRef,
-		formatTypes,
-	} = useRichText( {
-		value: attrValue,
-		onChange( html ) {
-			onChange( field.setValue( { item: data, value: html } ) );
-		},
-		selectionStart: selection.start,
-		selectionEnd: selection.end,
-		onSelectionChange: ( start, end ) => setSelection( { start, end } ),
-		__unstableIsSelected: isSelected,
-		preserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,
-		placeholder: fieldConfig?.placeholder,
-		__unstableDisableFormats: fieldConfig?.disableFormats,
-		allowedFormats: adjustedAllowedFormats,
-		withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
-		__unstableFormatTypeHandlerContext: useMemo(
-			() => ( { richTextIdentifier: field.id, blockClientId: clientId } ),
-			[ field.id, clientId ]
-		),
-	} );
-
-	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 { ...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',
-							disableLineBreaks: fieldConfig?.disableLineBreaks,
-							keyboardShortcuts,
-							inputEvents,
-						} ),
-						anchorRef,
-					] ) }
-					onFocus={ () => setIsSelected( true ) }
-					onBlur={ () => setIsSelected( false ) }
-					contentEditable
-					{ ...controlProps }
-				/>
-			</BaseControl>
-		</>
-	);
-}

package/src/hooks/block-fields/rich-text/styles.scss

@@ -1,24 +0,0 @@
-@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;
-	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/hooks/block-fields/styles.scss

@@ -1,33 +0,0 @@
-@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-block-fields__container {
-	padding: 0 $grid-unit-20 $grid-unit-20;
-
-	&:first-of-type {
-		padding-block-start: $grid-unit-10;
-		/*
-		 * Add border for the entire content controls and remove the similar border
-		 * for tools panel.
-		 */
-		border-block-start: $border-width solid $gray-200;
-	}
-}
-
-.block-editor-block-fields__header {
-	padding: $grid-unit-10 0;
-	margin-bottom: $grid-unit-05;
-}
-
-.block-editor-block-fields__header-icon {
-	flex: 0 0 $icon-size;
-}
-
-.block-editor-block-fields__header-title {
-	flex: 1;
-	/* Override the default margin on a h2 element. */
-	margin: 0 !important;
-}

package/src/hooks/block-fields/use-inspector-popover-placement.js

@@ -1,16 +0,0 @@
-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,
-				},
-		  }
-		: {};
-}