@wordpress/block-editor 12.9.0 → 12.10.0

package/src/hooks/background.js

@@ -0,0 +1,288 @@
+/**
+ * WordPress dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+import { getBlockSupport } from '@wordpress/blocks';
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Button,
+	DropZone,
+	FlexItem,
+	MenuItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Platform, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import MediaReplaceFlow from '../components/media-replace-flow';
+import MediaUpload from '../components/media-upload';
+import MediaUploadCheck from '../components/media-upload/check';
+import useSetting from '../components/use-setting';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
+
+export const BACKGROUND_SUPPORT_KEY = 'background';
+export const IMAGE_BACKGROUND_TYPE = 'image';
+
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a background image value set.
+ */
+export function hasBackgroundImageValue( props ) {
+	const hasValue =
+		!! props.attributes.style?.background?.backgroundImage?.id ||
+		!! props.attributes.style?.background?.backgroundImage?.url;
+
+	return hasValue;
+}
+
+/**
+ * Determine whether there is block support for background.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBackgroundSupport( blockName, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! support?.backgroundImage;
+	}
+
+	return !! support?.[ feature ];
+}
+
+/**
+ * Resets the background image block support attributes. This can be used when disabling
+ * the background image controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBackgroundImage( { attributes = {}, setAttributes } ) {
+	const { style = {} } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			background: {
+				...style?.background,
+				backgroundImage: undefined,
+			},
+		} ),
+	} );
+}
+
+function InspectorImagePreview( { label, url: imgUrl } ) {
+	const imgLabel = label || getFilename( imgUrl );
+	return (
+		<ItemGroup as="span">
+			<HStack justify="flex-start" as="span">
+				<img src={ imgUrl } alt="" />
+				<FlexItem as="span">
+					<Truncate
+						numberOfLines={ 1 }
+						className="block-editor-hooks__background__inspector-media-replace-title"
+					>
+						{ imgLabel }
+					</Truncate>
+				</FlexItem>
+			</HStack>
+		</ItemGroup>
+	);
+}
+
+function BackgroundImagePanelItem( props ) {
+	const { attributes, clientId, setAttributes } = props;
+
+	const { id, title, url } =
+		attributes.style?.background?.backgroundImage || {};
+
+	const { mediaUpload } = useSelect( ( select ) => {
+		return {
+			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
+		};
+	} );
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+	};
+
+	const onSelectMedia = ( media ) => {
+		if ( ! media || ! media.url ) {
+			const newStyle = {
+				...attributes.style,
+				background: {
+					...attributes.style?.background,
+					backgroundImage: undefined,
+				},
+			};
+
+			const newAttributes = {
+				style: cleanEmptyObject( newStyle ),
+			};
+
+			setAttributes( newAttributes );
+			return;
+		}
+
+		if ( isBlobURL( media.url ) ) {
+			return;
+		}
+
+		// For media selections originated from a file upload.
+		if (
+			( media.media_type &&
+				media.media_type !== IMAGE_BACKGROUND_TYPE ) ||
+			( ! media.media_type &&
+				media.type &&
+				media.type !== IMAGE_BACKGROUND_TYPE )
+		) {
+			onUploadError(
+				__( 'Only images can be used as a background image.' )
+			);
+			return;
+		}
+
+		const newStyle = {
+			...attributes.style,
+			background: {
+				...attributes.style?.background,
+				backgroundImage: {
+					url: media.url,
+					id: media.id,
+					source: 'file',
+					title: media.title || undefined,
+				},
+			},
+		};
+
+		const newAttributes = {
+			style: cleanEmptyObject( newStyle ),
+		};
+
+		setAttributes( newAttributes );
+	};
+
+	const onFilesDrop = ( filesList ) => {
+		mediaUpload( {
+			allowedTypes: [ 'image' ],
+			filesList,
+			onFileChange( [ image ] ) {
+				if ( isBlobURL( image?.url ) ) {
+					return;
+				}
+				onSelectMedia( image );
+			},
+			onError: onUploadError,
+		} );
+	};
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			style: {
+				...previousValue.style,
+				background: undefined,
+			},
+		};
+	}, [] );
+
+	return (
+		<ToolsPanelItem
+			className="single-column"
+			hasValue={ () => hasBackgroundImageValue( props ) }
+			label={ __( 'Background image' ) }
+			onDeselect={ () => resetBackgroundImage( props ) }
+			isShownByDefault={ true }
+			resetAllFilter={ resetAllFilter }
+			panelId={ clientId }
+		>
+			<div className="block-editor-hooks__background__inspector-media-replace-container">
+				{ !! url && (
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ url }
+						allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
+						accept="image/*"
+						onSelect={ onSelectMedia }
+						name={
+							<InspectorImagePreview
+								label={ title }
+								url={ url }
+							/>
+						}
+						variant="secondary"
+					>
+						<MenuItem
+							onClick={ () => resetBackgroundImage( props ) }
+						>
+							{ __( 'Reset ' ) }
+						</MenuItem>
+					</MediaReplaceFlow>
+				) }
+				{ ! url && (
+					<MediaUploadCheck>
+						<MediaUpload
+							onSelect={ onSelectMedia }
+							allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
+							render={ ( { open } ) => (
+								<div className="block-editor-hooks__background__inspector-upload-container">
+									<Button
+										onClick={ open }
+										variant="secondary"
+									>
+										{ __( 'Add background image' ) }
+									</Button>
+									<DropZone onFilesDrop={ onFilesDrop } />
+								</div>
+							) }
+						/>
+					</MediaUploadCheck>
+				) }
+			</div>
+		</ToolsPanelItem>
+	);
+}
+
+export function BackgroundImagePanel( props ) {
+	const isBackgroundImageSupported =
+		useSetting( 'background.backgroundImage' ) &&
+		hasBackgroundSupport( props.name, 'backgroundImage' );
+
+	if ( ! isBackgroundImageSupported ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="background">
+			{ isBackgroundImageSupported && (
+				<BackgroundImagePanelItem { ...props } />
+			) }
+		</InspectorControls>
+	);
+}

package/src/hooks/background.scss

@@ -0,0 +1,57 @@
+.block-editor-hooks__background__inspector-upload-container {
+	position: relative;
+	// Since there is no option to skip rendering the drag'n'drop icon in drop
+	// zone, we hide it for now.
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+}
+
+.block-editor-hooks__background__inspector-upload-container,
+.block-editor-hooks__background__inspector-media-replace-container {
+	button.components-button {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 1px $gray-400;
+		width: 100%;
+		display: block;
+		height: $grid-unit-50;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.block-editor-hooks__background__inspector-media-replace-title {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
+}
+
+.block-editor-hooks__background__inspector-media-replace-container {
+	.components-dropdown {
+		display: block;
+	}
+
+	img {
+		width: 20px;
+		min-width: 20px;
+		aspect-ratio: 1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+		border-radius: 50% !important;
+	}
+
+	.block-editor-hooks__background__inspector-readonly-logo-preview {
+		padding: 6px 12px;
+		display: flex;
+		height: $grid-unit-50;
+	}
+}

package/src/hooks/block-hooks.js

@@ -0,0 +1,257 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import { Fragment, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	PanelBody,
+	ToggleControl,
+} from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon, InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+
+const EMPTY_OBJECT = {};
+
+function BlockHooksControl( props ) {
+	const blockTypes = useSelect(
+		( select ) => select( blocksStore ).getBlockTypes(),
+		[]
+	);
+
+	const hookedBlocksForCurrentBlock = useMemo(
+		() =>
+			blockTypes?.filter(
+				( { blockHooks } ) =>
+					blockHooks && props.blockName in blockHooks
+			),
+		[ blockTypes, props.blockName ]
+	);
+
+	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockIndex, getBlockRootClientId } =
+				select( blockEditorStore );
+
+			return {
+				blockIndex: getBlockIndex( props.clientId ),
+				innerBlocksLength: getBlock( props.clientId )?.innerBlocks
+					?.length,
+				rootClientId: getBlockRootClientId( props.clientId ),
+			};
+		},
+		[ props.clientId ]
+	);
+
+	const hookedBlockClientIds = useSelect(
+		( select ) => {
+			const { getBlock, getGlobalBlockCount } =
+				select( blockEditorStore );
+
+			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
+				( clientIds, block ) => {
+					// If the block doesn't exist anywhere in the block tree,
+					// we know that we have to display the toggle for it, and set
+					// it to disabled.
+					if ( getGlobalBlockCount( block.name ) === 0 ) {
+						return clientIds;
+					}
+
+					const relativePosition =
+						block?.blockHooks?.[ props.blockName ];
+					let candidates;
+
+					switch ( relativePosition ) {
+						case 'before':
+						case 'after':
+							// Any of the current block's siblings (with the right block type) qualifies
+							// as a hooked block (inserted `before` or `after` the current one), as the block
+							// might've been automatically inserted and then moved around a bit by the user.
+							candidates = getBlock( rootClientId )?.innerBlocks;
+							break;
+
+						case 'first_child':
+						case 'last_child':
+							// Any of the current block's child blocks (with the right block type) qualifies
+							// as a hooked first or last child block, as the block might've been automatically
+							// inserted and then moved around a bit by the user.
+							candidates = getBlock( props.clientId ).innerBlocks;
+							break;
+					}
+
+					const hookedBlock = candidates?.find(
+						( { name } ) => name === block.name
+					);
+
+					// If the block exists in the designated location, we consider it hooked
+					// and show the toggle as enabled.
+					if ( hookedBlock ) {
+						return {
+							...clientIds,
+							[ block.name ]: hookedBlock.clientId,
+						};
+					}
+
+					// If no hooked block was found in any of its designated locations,
+					// but it exists elsewhere in the block tree, we consider it manually inserted.
+					// In this case, we take note and will remove the corresponding toggle from the
+					// block inspector panel.
+					return {
+						...clientIds,
+						[ block.name ]: false,
+					};
+				},
+				{}
+			);
+
+			if ( Object.values( _hookedBlockClientIds ).length > 0 ) {
+				return _hookedBlockClientIds;
+			}
+
+			return EMPTY_OBJECT;
+		},
+		[
+			hookedBlocksForCurrentBlock,
+			props.blockName,
+			props.clientId,
+			rootClientId,
+		]
+	);
+
+	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
+
+	// Remove toggle if block isn't present in the designated location but elsewhere in the block tree.
+	const hookedBlocksForCurrentBlockIfNotPresentElsewhere =
+		hookedBlocksForCurrentBlock?.filter(
+			( block ) => hookedBlockClientIds?.[ block.name ] !== false
+		);
+
+	if ( ! hookedBlocksForCurrentBlockIfNotPresentElsewhere.length ) {
+		return null;
+	}
+
+	// Group by block namespace (i.e. prefix before the slash).
+	const groupedHookedBlocks = hookedBlocksForCurrentBlock.reduce(
+		( groups, block ) => {
+			const [ namespace ] = block.name.split( '/' );
+			if ( ! groups[ namespace ] ) {
+				groups[ namespace ] = [];
+			}
+			groups[ namespace ].push( block );
+			return groups;
+		},
+		{}
+	);
+
+	const insertBlockIntoDesignatedLocation = ( block, relativePosition ) => {
+		switch ( relativePosition ) {
+			case 'before':
+			case 'after':
+				insertBlock(
+					block,
+					relativePosition === 'after' ? blockIndex + 1 : blockIndex,
+					rootClientId, // Insert as a child of the current block's parent
+					false
+				);
+				break;
+
+			case 'first_child':
+			case 'last_child':
+				insertBlock(
+					block,
+					// TODO: It'd be great if insertBlock() would accept negative indices for insertion.
+					relativePosition === 'first_child' ? 0 : innerBlocksLength,
+					props.clientId, // Insert as a child of the current block.
+					false
+				);
+				break;
+		}
+	};
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				className="block-editor-hooks__block-hooks"
+				title={ __( 'Plugins' ) }
+				initialOpen={ true }
+			>
+				{ Object.keys( groupedHookedBlocks ).map( ( vendor ) => {
+					return (
+						<Fragment key={ vendor }>
+							<h3>{ vendor }</h3>
+							{ groupedHookedBlocks[ vendor ].map( ( block ) => {
+								const checked =
+									block.name in hookedBlockClientIds;
+
+								return (
+									<ToggleControl
+										checked={ checked }
+										key={ block.title }
+										label={
+											<HStack justify="flex-start">
+												<BlockIcon
+													icon={ block.icon }
+												/>
+												<span>{ block.title }</span>
+											</HStack>
+										}
+										onChange={ () => {
+											if ( ! checked ) {
+												// Create and insert block.
+												const relativePosition =
+													block.blockHooks[
+														props.blockName
+													];
+												insertBlockIntoDesignatedLocation(
+													createBlock( block.name ),
+													relativePosition
+												);
+												return;
+											}
+
+											// Remove block.
+											const clientId =
+												hookedBlockClientIds[
+													block.name
+												];
+											removeBlock( clientId, false );
+										} }
+									/>
+								);
+							} ) }
+						</Fragment>
+					);
+				} ) }
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+export const withBlockHooks = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		const blockEdit = <BlockEdit key="edit" { ...props } />;
+		return (
+			<>
+				{ blockEdit }
+				<BlockHooksControl
+					blockName={ props.name }
+					clientId={ props.clientId }
+				/>
+			</>
+		);
+	};
+}, 'withBlockHooks' );
+
+addFilter(
+	'editor.BlockEdit',
+	'core/block-hooks/with-inspector-control',
+	withBlockHooks
+);

package/src/hooks/block-hooks.scss

@@ -0,0 +1,16 @@
+.block-editor-hooks__block-hooks {
+	/**
+	 * Since we're displaying the block icon alongside the block name,
+	 * we need to right-align the toggle.
+	 */
+	.components-toggle-control .components-h-stack {
+		flex-direction: row-reverse;
+	}
+
+	/**
+	 * Un-reverse the flex direction for the toggle's label.
+	 */
+	.components-toggle-control .components-h-stack .components-h-stack {
+		flex-direction: row;
+	}
+}