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

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

@@ -0,0 +1,195 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalGrid as Grid,
+	Popover,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { link } from '@wordpress/icons';
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../../link-control';
+import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
+
+export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_TARGET = '_blank';
+export const NOFOLLOW_REL = 'nofollow';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object}  attributes               The current block attributes.
+ * @param {string}  attributes.rel           The current link rel attribute.
+ * @param {string}  attributes.url           The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+	rel = '',
+	url = '',
+	opensInNewTab,
+	nofollow,
+} ) {
+	let newLinkTarget;
+	// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+	let updatedRel = rel;
+
+	if ( opensInNewTab ) {
+		newLinkTarget = NEW_TAB_TARGET;
+		updatedRel = updatedRel?.includes( NEW_TAB_REL )
+			? updatedRel
+			: updatedRel + ` ${ NEW_TAB_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	if ( nofollow ) {
+		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+			? updatedRel
+			: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();
+	} else {
+		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	return {
+		url: prependHTTP( url ),
+		linkTarget: newLinkTarget,
+		rel: updatedRel || undefined,
+	};
+}
+
+export default function Link( {
+	clientId,
+	control,
+	blockType,
+	attributeValues,
+	updateAttributes,
+} ) {
+	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	const hrefKey = control.mapping.href;
+	const relKey = control.mapping.rel;
+	const targetKey = control.mapping.target;
+	const destinationKey = control.mapping.destination;
+
+	const href = attributeValues[ hrefKey ];
+	const rel = attributeValues[ relKey ];
+	const target = attributeValues[ targetKey ];
+	const destination = attributeValues[ destinationKey ];
+
+	const hrefDefaultValue =
+		blockType.attributes[ href ]?.defaultValue ?? undefined;
+	const relDefaultValue =
+		blockType.attributes[ rel ]?.defaultValue ?? undefined;
+	const targetDefaultValue =
+		blockType.attributes[ target ]?.defaultValue ?? undefined;
+	const destinationDefaultValue =
+		blockType.attributes[ destination ]?.defaultValue ?? undefined;
+
+	const opensInNewTab = target === NEW_TAB_TARGET;
+	const nofollow = rel === NOFOLLOW_REL;
+
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
+	const linkValue = useMemo(
+		() => ( { url: href, opensInNewTab, nofollow } ),
+		[ href, opensInNewTab, nofollow ]
+	);
+
+	return (
+		<ToolsPanelItem
+			panelId={ clientId }
+			label={ control.label }
+			hasValue={ () => !! href }
+			onDeselect={ () => {
+				updateAttributes( {
+					[ hrefKey ]: hrefDefaultValue,
+					[ relKey ]: relDefaultValue,
+					[ targetKey ]: targetDefaultValue,
+					[ destinationKey ]: destinationDefaultValue,
+				} );
+			} }
+			isShownByDefault={ control.shownByDefault }
+		>
+			<Button
+				__next40pxDefaultSize
+				className="block-editor-content-only-controls__link"
+				onClick={ () => {
+					setIsLinkControlOpen( true );
+				} }
+			>
+				<Grid
+					rowGap={ 0 }
+					columnGap={ 8 }
+					templateColumns="24px 1fr"
+					className="block-editor-content-only-controls__link-row"
+				>
+					{ href && (
+						<>
+							<Icon icon={ link } size={ 24 } />
+							<span className="block-editor-content-only-controls__link-title">
+								{ href }
+							</span>
+						</>
+					) }
+					{ ! href && (
+						<>
+							<Icon
+								icon={ link }
+								size={ 24 }
+								style={ { opacity: 0.3 } }
+							/>
+							<span className="block-editor-content-only-controls__link-title">
+								{ __( 'Link' ) }
+							</span>
+						</>
+					) }
+				</Grid>
+			</Button>
+			{ isLinkControlOpen && (
+				<Popover
+					onClose={ () => {
+						setIsLinkControlOpen( false );
+					} }
+					{ ...( popoverProps ?? {} ) }
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( newValues ) => {
+							const updatedAttrs = getUpdatedLinkAttributes( {
+								rel,
+								...newValues,
+							} );
+
+							updateAttributes( {
+								[ hrefKey ]: updatedAttrs.url,
+								[ relKey ]: updatedAttrs.rel,
+								[ targetKey ]: updatedAttrs.linkTarget,
+							} );
+						} }
+						onRemove={ () => {
+							updateAttributes( {
+								[ hrefKey ]: hrefDefaultValue,
+								[ relKey ]: relDefaultValue,
+								[ targetKey ]: targetDefaultValue,
+								[ destinationKey ]: destinationDefaultValue,
+							} );
+						} }
+					/>
+				</Popover>
+			) }
+		</ToolsPanelItem>
+	);
+}

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>
+	);
+}