@wordpress/block-editor 17.0.0 → 17.1.0

package/src/hooks/block-fields/fields-dropdown-menu.js

@@ -1,47 +0,0 @@
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { moreVertical, check } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
-
-export default function FieldsDropdownMenu( {
-	fields,
-	visibleFields,
-	onToggleField,
-} ) {
-	const { popoverProps } = useInspectorPopoverPlacement();
-
-	if ( ! fields || fields.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Options' ) }
-			popoverProps={ popoverProps }
-			toggleProps={ { size: 'small' } }
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup label={ __( 'Show / Hide' ) }>
-					{ fields.map( ( field ) => {
-						const isVisible = visibleFields.includes( field.id );
-						return (
-							<MenuItem
-								key={ field.id }
-								isSelected={ isVisible }
-								onClick={ () => {
-									onToggleField( field.id );
-									onClose();
-								} }
-								role="menuitemcheckbox"
-								icon={ isVisible ? check : null }
-							>
-								{ field.label }
-							</MenuItem>
-						);
-					} ) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}

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

@@ -1,302 +0,0 @@
-import {
-	privateApis as blocksPrivateApis,
-	getBlockType,
-	store as blocksStore,
-} from '@wordpress/blocks';
-import { useDebounce } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { DataForm } from '@wordpress/dataviews';
-import { useContext, useState, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import { replacePatternOverridesDefaultBinding } from '../../utils/block-bindings';
-import BlockContext from '../../components/block-context';
-import BlockIcon from '../../components/block-icon';
-import useBlockDisplayTitle from '../../components/block-title/use-block-display-title';
-import useBlockDisplayInformation from '../../components/use-block-display-information';
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
-import FieldsDropdownMenu from './fields-dropdown-menu';
-import { PrivateBlockContext } from '../../components/block-list/private-block-context';
-import InspectorControls from '../../components/inspector-controls/fill';
-// controls
-import RichText from './rich-text';
-import Media from './media';
-import Link from './link';
-
-/**
- * Creates a configured control component that wraps a custom control
- * and passes configuration as props.
- *
- * @param {Component} ControlComponent The React component for the control.
- * @param {Object}    config           The control configuration passed as a prop.
- *
- * @return {Function} A wrapped control component
- */
-function createConfiguredControl( ControlComponent, config = {} ) {
-	return function ConfiguredControl( props ) {
-		return <ControlComponent { ...props } config={ config } />;
-	};
-}
-
-/**
- * Component that renders a DataForm for a single block's attributes
- * @param {Object}   props
- * @param {string}   props.clientId      The clientId of the block.
- * @param {Object}   props.blockType     The blockType definition.
- * @param {Function} props.setAttributes Action to set the block's attributes.
- * @param {boolean}  props.isMultiBlock  Whether forms for multiple blocks are shown at the same time.
- *                                       This changes the behavior of the component:
- *                                       - Only the first field is shown for each block.
- *                                       - A dropdown is rendered allowing display of additional fields.
- *                                       - Hovering the block fields highlights the block in the canvas
- *                                       - Focusing a block field soft-selects the block in the canvas.
- */
-function BlockFields( {
-	clientId,
-	blockType,
-	setAttributes,
-	isMultiBlock = false,
-} ) {
-	const blockTitle = useBlockDisplayTitle( {
-		clientId,
-		context: 'list-view',
-	} );
-	const blockInformation = useBlockDisplayInformation( clientId );
-
-	const blockTypeFields = blockType?.[ fieldsKey ];
-
-	const blockContext = useContext( BlockContext );
-
-	const attributes = useSelect(
-		( select ) => {
-			const _attributes =
-				select( blockEditorStore ).getBlockAttributes( clientId );
-			if ( ! _attributes?.metadata?.bindings ) {
-				return _attributes;
-			}
-
-			/*
-			 * The pattern overrides `__default` binding is a placeholder, not
-			 * a real attribute: expand it to the block's bindable attributes
-			 * before resolving values, as other bindings consumers do.
-			 */
-			const { __experimentalBlockBindingsSupportedAttributes } =
-				select( blockEditorStore ).getSettings();
-			const bindableAttributes =
-				__experimentalBlockBindingsSupportedAttributes?.[
-					blockType?.name
-				];
-			const bindings = bindableAttributes
-				? replacePatternOverridesDefaultBinding(
-						_attributes.metadata.bindings,
-						bindableAttributes
-				  )
-				: _attributes.metadata.bindings;
-
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			return Object.entries( bindings ).reduce(
-				( acc, [ attribute, binding ] ) => {
-					// Skip a `__default` binding that could not be expanded:
-					// it is not a real block attribute.
-					if ( attribute === '__default' ) {
-						return acc;
-					}
-					const source = getBlockBindingsSource( binding.source );
-					if ( ! source ) {
-						return acc;
-					}
-					const values = source.getValues( {
-						select,
-						clientId,
-						context: blockContext,
-						bindings: { [ attribute ]: binding },
-					} );
-					return { ...acc, ...values };
-				},
-				_attributes
-			);
-		},
-		[ blockContext, clientId, blockType?.name ]
-	);
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-
-	const debouncedToggleBlockHighlight = useDebounce(
-		toggleBlockHighlight,
-		50
-	);
-
-	const computedForm = useMemo( () => {
-		if ( ! isMultiBlock ) {
-			return blockType?.[ formKey ];
-		}
-
-		// For a collapsed form only show the first field by default.
-		return {
-			...blockType?.[ formKey ],
-			fields: [ blockType?.[ formKey ]?.fields?.[ 0 ] ],
-		};
-	}, [ blockType, isMultiBlock ] );
-
-	const [ form, setForm ] = useState( computedForm );
-
-	// Build DataForm fields with proper structure
-	const dataFormFields = useMemo( () => {
-		if ( ! blockTypeFields?.length ) {
-			return [];
-		}
-
-		return blockTypeFields.map( ( fieldDef ) => {
-			const field = {
-				...fieldDef,
-			};
-
-			// These should be custom Edit components, not replaced here.
-			//
-			// - rich-text control: it needs clientId
-			// - link control: does not need anything extra
-			// - media control: needs the Edit config
-			if (
-				'string' === typeof fieldDef.Edit &&
-				fieldDef.Edit === 'rich-text'
-			) {
-				field.Edit = createConfiguredControl( RichText, {
-					clientId,
-				} );
-			} else if (
-				'string' === typeof fieldDef.Edit &&
-				fieldDef.Edit === 'link'
-			) {
-				field.Edit = createConfiguredControl( Link );
-			} else if (
-				'object' === typeof fieldDef.Edit &&
-				fieldDef.Edit.control === 'media'
-			) {
-				field.Edit = createConfiguredControl( Media, {
-					...fieldDef.Edit,
-				} );
-			}
-
-			return field;
-		} );
-	}, [ blockTypeFields, clientId ] );
-
-	if ( ! blockTypeFields?.length ) {
-		// TODO - we might still want to show a placeholder for blocks with no fields.
-		// for example, a way to select the block.
-		return null;
-	}
-
-	const handleToggleField = ( fieldId ) => {
-		setForm( ( prev ) => {
-			if ( prev.fields?.includes( fieldId ) ) {
-				return {
-					...prev,
-					fields: prev.fields.filter( ( id ) => id !== fieldId ),
-				};
-			}
-
-			return {
-				...prev,
-				fields: [ ...( prev.fields || [] ), fieldId ],
-			};
-		} );
-	};
-
-	return (
-		<div
-			className="block-editor-block-fields__container"
-			onMouseEnter={
-				isMultiBlock
-					? () => debouncedToggleBlockHighlight( clientId, true )
-					: undefined
-			}
-			onMouseLeave={ () =>
-				isMultiBlock
-					? debouncedToggleBlockHighlight( clientId, false )
-					: undefined
-			}
-			onFocus={
-				isMultiBlock
-					? () => {
-							selectBlock(
-								clientId,
-								null /* null to avoid focus on the block in the canvas */
-							);
-					  }
-					: undefined
-			}
-		>
-			<div className="block-editor-block-fields__header">
-				<HStack spacing={ 1 }>
-					{ isMultiBlock && (
-						<>
-							<BlockIcon
-								className="block-editor-block-fields__header-icon"
-								icon={ blockInformation?.icon }
-							/>
-							<h2 className="block-editor-block-fields__header-title">
-								<Truncate numberOfLines={ 1 }>
-									{ blockTitle }
-								</Truncate>
-							</h2>
-							<FieldsDropdownMenu
-								fields={ dataFormFields }
-								visibleFields={ form.fields }
-								onToggleField={ handleToggleField }
-							/>
-						</>
-					) }
-					{ ! isMultiBlock && (
-						<h2 className="block-editor-block-fields__header-title">
-							{ __( 'Content' ) }
-						</h2>
-					) }
-				</HStack>
-			</div>
-			<DataForm
-				data={ attributes }
-				fields={ dataFormFields }
-				form={ form }
-				onChange={ setAttributes }
-			/>
-		</div>
-	);
-}
-
-function hasBlockFieldsSupport( blockName ) {
-	return !! (
-		window?.__experimentalContentOnlyInspectorFields &&
-		getBlockType( blockName )?.[ fieldsKey ]
-	);
-}
-
-export function BlockFieldsPanel( props ) {
-	const { blockType, isSelectionWithinCurrentSection } =
-		useContext( PrivateBlockContext );
-
-	return (
-		<InspectorControls group="content">
-			<BlockFields
-				{ ...props }
-				blockType={ blockType }
-				isMultiBlock={ isSelectionWithinCurrentSection }
-			/>
-		</InspectorControls>
-	);
-}
-
-/**
- * Export block support definition.
- */
-export default {
-	edit: BlockFieldsPanel,
-	hasSupport: hasBlockFieldsSupport,
-	attributeKeys: [],
-	supportsPatternEditing: true,
-};

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

@@ -1,155 +0,0 @@
-import {
-	Button,
-	Icon as WCIcon,
-	__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';
-import LinkControl from '../../../components/link-control';
-import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
-
-export const NEW_TAB_REL = '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, onChange } ) {
-	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
-	const { popoverProps } = useInspectorPopoverPlacement( {
-		isControl: true,
-	} );
-	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 && (
-						<>
-							<WCIcon icon={ link } size={ 24 } />
-							<span className="block-editor-content-only-controls__link-title">
-								{ url }
-							</span>
-						</>
-					) }
-					{ ! url && (
-						<>
-							<WCIcon
-								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,
-							} );
-
-							onChange(
-								field.setValue( {
-									item: data,
-									value: updatedAttrs,
-								} )
-							);
-						} }
-						onRemove={ () => {
-							onChange(
-								field.setValue( {
-									item: data,
-									value: {},
-								} )
-							);
-						} }
-					/>
-				</Popover>
-			) }
-		</>
-	);
-}

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

@@ -1,18 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.block-editor-content-only-controls__link {
-	width: 100%;
-	border-color: $gray-400;
-}
-
-.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;
-}