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

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

@@ -0,0 +1,200 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__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( { data, field, config = {} } ) {
+	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const updateAttributes = ( newValue ) => {
+		const mappedChanges = field.setValue( { item: data, value: newValue } );
+		updateBlockAttributes( clientId, mappedChanges );
+	};
+
+	const value = field.getValue( { item: data } );
+	const url = value?.url;
+	const rel = value?.rel || '';
+	const target = value?.linkTarget;
+
+	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, opensInNewTab, nofollow } ),
+		[ url, opensInNewTab, nofollow ]
+	);
+
+	return (
+		<>
+			<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"
+				>
+					{ url && (
+						<>
+							<Icon icon={ link } size={ 24 } />
+							<span className="block-editor-content-only-controls__link-title">
+								{ url }
+							</span>
+						</>
+					) }
+					{ ! url && (
+						<>
+							<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,
+							} );
+
+							// Build update object dynamically based on what's in the mapping
+							const updateValue = { ...value };
+
+							if ( fieldDef?.mapping ) {
+								Object.keys( fieldDef.mapping ).forEach(
+									( key ) => {
+										if ( key === 'href' || key === 'url' ) {
+											updateValue[ key ] =
+												updatedAttrs.url;
+										} else if ( key === 'rel' ) {
+											updateValue[ key ] =
+												updatedAttrs.rel;
+										} else if (
+											key === 'target' ||
+											key === 'linkTarget'
+										) {
+											updateValue[ key ] =
+												updatedAttrs.linkTarget;
+										}
+									}
+								);
+							}
+
+							updateAttributes( updateValue );
+						} }
+						onRemove={ () => {
+							// Remove all link-related properties based on what's in the mapping
+							const removeValue = {};
+
+							if ( fieldDef?.mapping ) {
+								Object.keys( fieldDef.mapping ).forEach(
+									( key ) => {
+										if (
+											key === 'href' ||
+											key === 'url' ||
+											key === 'rel' ||
+											key === 'target' ||
+											key === 'linkTarget'
+										) {
+											removeValue[ key ] = undefined;
+										}
+									}
+								);
+							}
+
+							updateAttributes( removeValue );
+						} }
+					/>
+				</Popover>
+			) }
+		</>
+	);
+}

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,306 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__experimentalGrid as Grid,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+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( { data, field, attachment } ) {
+	const config = field.config || {};
+	const { allowedTypes = [], multiple = false } = config;
+
+	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 ) {
+		const value = field.getValue( { item: data } );
+		const url = value?.url;
+
+		if ( url ) {
+			return (
+				<img
+					className="block-editor-content-only-controls__media-thumbnail"
+					alt=""
+					width={ 24 }
+					height={ 24 }
+					src={ url }
+				/>
+			);
+		}
+
+		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( { data, field, config = {} } ) {
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	const value = field.getValue( { item: data } );
+	const { allowedTypes = [], multiple = false } = field.config || {};
+	const { clientId, updateBlockAttributes, fieldDef } = config;
+	const updateAttributes = ( newFieldValue ) => {
+		const mappedChanges = field.setValue( {
+			item: data,
+			value: newFieldValue,
+		} );
+		updateBlockAttributes( clientId, mappedChanges );
+	};
+
+	// Check if featured image is supported by checking if it's in the mapping
+	const hasFeaturedImageSupport =
+		fieldDef?.mapping && 'featuredImage' in fieldDef.mapping;
+
+	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 = __( '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…' );
+	}
+
+	return (
+		<MediaUploadCheck>
+			<MediaReplaceFlow
+				className="block-editor-content-only-controls__media-replace-flow"
+				allowedTypes={ allowedTypes }
+				mediaId={ id }
+				mediaURL={ url }
+				multiple={ multiple }
+				popoverProps={ popoverProps }
+				onReset={ () => {
+					// Build reset value dynamically based on mapping
+					const resetValue = {};
+
+					if ( fieldDef?.mapping ) {
+						Object.keys( fieldDef.mapping ).forEach( ( key ) => {
+							if (
+								key === 'id' ||
+								key === 'src' ||
+								key === 'url'
+							) {
+								resetValue[ key ] = undefined;
+							} else if ( key === 'caption' || key === 'alt' ) {
+								resetValue[ key ] = '';
+							}
+						} );
+					}
+
+					// Turn off featured image when resetting (only if it's in the mapping)
+					if ( hasFeaturedImageSupport ) {
+						resetValue.featuredImage = false;
+					}
+
+					// Merge with existing value to preserve other field properties
+					updateAttributes( { ...value, ...resetValue } );
+				} }
+				{ ...( hasFeaturedImageSupport && {
+					useFeaturedImage: !! value?.featuredImage,
+					onToggleFeaturedImage: () => {
+						updateAttributes( {
+							...value,
+							featuredImage: ! value?.featuredImage,
+						} );
+					},
+				} ) }
+				onSelect={ ( selectedMedia ) => {
+					if ( selectedMedia.id && selectedMedia.url ) {
+						// Determine mediaType from MIME type, not from object type
+						let mediaType = 'image'; // default
+						if ( selectedMedia.mime_type ) {
+							if (
+								selectedMedia.mime_type.startsWith( 'video/' )
+							) {
+								mediaType = 'video';
+							} else if (
+								selectedMedia.mime_type.startsWith( 'audio/' )
+							) {
+								mediaType = 'audio';
+							}
+						}
+
+						// Build new value dynamically based on what's in the mapping
+						const newValue = {};
+
+						// Iterate over mapping keys and set values for supported properties
+						if ( fieldDef?.mapping ) {
+							Object.keys( fieldDef.mapping ).forEach(
+								( key ) => {
+									if ( key === 'id' ) {
+										newValue[ key ] = selectedMedia.id;
+									} else if (
+										key === 'src' ||
+										key === 'url'
+									) {
+										newValue[ key ] = selectedMedia.url;
+									} else if ( key === 'type' ) {
+										newValue[ key ] = mediaType;
+									} else if (
+										key === 'link' &&
+										selectedMedia.link
+									) {
+										newValue[ key ] = selectedMedia.link;
+									} else if (
+										key === 'caption' &&
+										! value?.caption &&
+										selectedMedia.caption
+									) {
+										newValue[ key ] = selectedMedia.caption;
+									} else if (
+										key === 'alt' &&
+										! value?.alt &&
+										selectedMedia.alt
+									) {
+										newValue[ key ] = selectedMedia.alt;
+									} else if (
+										key === 'poster' &&
+										selectedMedia.poster
+									) {
+										newValue[ key ] = selectedMedia.poster;
+									}
+								}
+							);
+						}
+
+						// Turn off featured image when manually selecting media
+						if ( hasFeaturedImageSupport ) {
+							newValue.featuredImage = false;
+						}
+
+						// Merge with existing value to preserve other field properties
+						const finalValue = { ...value, ...newValue };
+						updateAttributes( finalValue );
+					}
+				} }
+				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"
+						>
+							{ url && (
+								<>
+									<MediaThumbnail
+										attachment={ attachment }
+										field={ field }
+										data={ data }
+									/>
+									<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: '24px',
+											height: '24px',
+										} }
+									/>
+									<span className="block-editor-content-only-controls__media-title">
+										{ chooseItemLabel }
+									</span>
+								</>
+							) }
+						</Grid>
+					</Button>
+				) }
+			/>
+		</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;
+}