@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.0

package/src/components/global-styles/behaviors-panel.js

@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export default function ( { onChange, value, behaviors } ) {
-	const defaultBehaviors = {
-		default: {
-			value: 'default',
-			label: __( 'Default' ),
-		},
-		noBehaviors: {
-			value: '',
-			label: __( 'No behaviors' ),
-		},
-	};
-
-	const behaviorsOptions = Object.entries( behaviors ).map(
-		( [ behaviorName ] ) => ( {
-			value: behaviorName,
-			// Capitalize the first letter of the behavior name.
-			label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
-				.slice( 1 )
-				.toLowerCase() }`,
-		} )
-	);
-
-	const options = [
-		...Object.values( defaultBehaviors ),
-		...behaviorsOptions,
-	];
-
-	const animations = [
-		{
-			value: 'zoom',
-			label: __( 'Zoom' ),
-		},
-		{
-			value: 'fade',
-			label: __( 'Fade' ),
-		},
-	];
-	return (
-		<div style={ { marginTop: '2rem' } }>
-			<SelectControl
-				label={ __( 'Behaviors' ) }
-				// At the moment we are only supporting one behavior (Lightbox)
-				value={ value }
-				options={ options }
-				onChange={ onChange }
-				hideCancelButton={ true }
-				size="__unstable-large"
-			/>
-			{ value === 'lightbox' && (
-				<SelectControl
-					label={ __( 'Animation' ) }
-					value={
-						behaviors?.lightbox.animation
-							? behaviors?.lightbox.animation
-							: ''
-					}
-					options={ animations }
-					onChange={ onChange }
-					hideCancelButton={ false }
-					size="__unstable-large"
-				/>
-			) }
-		</div>
-	);
-}

package/src/components/inserter/reusable-blocks-tab.js

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { addQueryArgs } from '@wordpress/url';
-import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import BlockTypesList from '../block-types-list';
-import InserterPanel from './panel';
-import InserterNoResults from './no-results';
-import useBlockTypesState from './hooks/use-block-types-state';
-import ReusableBlocksRenameHint from './reusable-block-rename-hint';
-
-function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
-	const [ items, , , onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
-
-	const filteredItems = useMemo( () => {
-		return items.filter(
-			( { category, syncStatus } ) =>
-				category === 'reusable' && syncStatus !== 'unsynced'
-		);
-	}, [ items ] );
-
-	if ( filteredItems.length === 0 ) {
-		return <InserterNoResults />;
-	}
-
-	return (
-		<InserterPanel title={ __( 'Synced patterns' ) }>
-			<BlockTypesList
-				items={ filteredItems }
-				onSelect={ onSelectItem }
-				onHover={ onHover }
-				label={ __( 'Synced patterns' ) }
-			/>
-		</InserterPanel>
-	);
-}
-
-// The unwrapped component is only exported for use by unit tests.
-/**
- * List of reusable blocks shown in the "Reusable" tab of the inserter.
- *
- * @param {Object}   props              Component props.
- * @param {?string}  props.rootClientId Client id of block to insert into.
- * @param {Function} props.onInsert     Callback to run when item is inserted.
- * @param {Function} props.onHover      Callback to run when item is hovered.
- *
- * @return {WPComponent} The component.
- */
-export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
-	return (
-		<>
-			<div className="block-editor-inserter__hint">
-				<ReusableBlocksRenameHint />
-			</div>
-			<ReusableBlocksList
-				onHover={ onHover }
-				onInsert={ onInsert }
-				rootClientId={ rootClientId }
-			/>
-			<div className="block-editor-inserter__manage-reusable-blocks-container">
-				<Button
-					className="block-editor-inserter__manage-reusable-blocks"
-					variant="secondary"
-					href={ addQueryArgs( 'edit.php', {
-						post_type: 'wp_block',
-					} ) }
-				>
-					{ __( 'Manage my patterns' ) }
-				</Button>
-			</div>
-		</>
-	);
-}
-
-export default ReusableBlocksTab;

package/src/components/inserter/test/reusable-blocks-tab.js

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { ReusableBlocksTab } from '../reusable-blocks-tab';
-import items, { categories, collections } from './fixtures';
-import useBlockTypesState from '../hooks/use-block-types-state';
-
-jest.mock( '../hooks/use-block-types-state', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-
-describe( 'InserterMenu', () => {
-	beforeAll( () => {
-		registerBlockType( 'core/block', {
-			save: () => {},
-			title: 'reusable block',
-			edit: () => {},
-		} );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( 'core/block' );
-	} );
-
-	beforeEach( () => {
-		useBlockTypesState.mockImplementation( () => [
-			items,
-			categories,
-			collections,
-		] );
-	} );
-
-	it( 'should show nothing if there are no items', () => {
-		const noItems = [];
-		useBlockTypesState.mockImplementation( () => [
-			noItems,
-			categories,
-			collections,
-		] );
-
-		render( <ReusableBlocksTab filterValue="random" /> );
-
-		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should list reusable blocks', () => {
-		render( <ReusableBlocksTab /> );
-
-		expect(
-			screen.getByRole( 'option', { name: 'My reusable block' } )
-		).toBeVisible();
-	} );
-
-	it( 'should trim whitespace of search terms', () => {
-		render( <ReusableBlocksTab filterValue=" my reusable" /> );
-
-		expect(
-			screen.getByRole( 'option', { name: 'My reusable block' } )
-		).toBeVisible();
-	} );
-} );

package/src/hooks/auto-inserting-blocks.js

@@ -1,232 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { addFilter } from '@wordpress/hooks';
-import { Fragment } from '@wordpress/element';
-import { 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 { InspectorControls } from '../components';
-import { store as blockEditorStore } from '../store';
-
-function AutoInsertingBlocksControl( props ) {
-	const { autoInsertedBlocksForCurrentBlock, groupedAutoInsertedBlocks } =
-		useSelect(
-			( select ) => {
-				const { getBlockTypes } = select( blocksStore );
-				const _autoInsertedBlocksForCurrentBlock =
-					getBlockTypes()?.filter(
-						( { autoInsert } ) =>
-							autoInsert && props.blockName in autoInsert
-					);
-
-				// Group by block namespace (i.e. prefix before the slash).
-				const _groupedAutoInsertedBlocks =
-					_autoInsertedBlocksForCurrentBlock?.reduce(
-						( groups, block ) => {
-							const [ namespace ] = block.name.split( '/' );
-							if ( ! groups[ namespace ] ) {
-								groups[ namespace ] = [];
-							}
-							groups[ namespace ].push( block );
-							return groups;
-						},
-						{}
-					);
-
-				return {
-					autoInsertedBlocksForCurrentBlock:
-						_autoInsertedBlocksForCurrentBlock,
-					groupedAutoInsertedBlocks: _groupedAutoInsertedBlocks,
-				};
-			},
-			[ props.blockName ]
-		);
-
-	const {
-		autoInsertedBlockClientIds,
-		blockIndex,
-		rootClientId,
-		innerBlocksLength,
-	} = useSelect(
-		( select ) => {
-			const { getBlock, getBlockIndex, getBlockRootClientId } =
-				select( blockEditorStore );
-			const _rootClientId = getBlockRootClientId( props.clientId );
-
-			const _autoInsertedBlockClientIds =
-				autoInsertedBlocksForCurrentBlock.reduce(
-					( clientIds, block ) => {
-						const relativePosition =
-							block?.autoInsert?.[ props.blockName ];
-						let candidates;
-
-						switch ( relativePosition ) {
-							case 'before':
-							case 'after':
-								// Any of the current block's siblings (with the right block type) qualifies
-								// as an auto-inserted block (inserted `before` or `after` the current one),
-								// as the block might've been auto-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 an auto-inserted first or last child block, as the block might've been
-								// auto-inserted and then moved around a bit by the user.
-								candidates = getBlock(
-									props.clientId
-								).innerBlocks;
-								break;
-						}
-
-						const autoInsertedBlock = candidates?.find(
-							( { name } ) => name === block.name
-						);
-
-						if ( autoInsertedBlock ) {
-							clientIds[ block.name ] =
-								autoInsertedBlock.clientId;
-						}
-
-						// TOOD: If no auto-inserted block was found in any of its designated locations,
-						// we want to check if it's present elsewhere in the block tree.
-						// If it is, we'd consider it manually inserted and would want to remove the
-						// corresponding toggle from the block inspector panel.
-
-						return clientIds;
-					},
-					{}
-				);
-
-			return {
-				blockIndex: getBlockIndex( props.clientId ),
-				innerBlocksLength: getBlock( props.clientId )?.innerBlocks
-					?.length,
-				rootClientId: _rootClientId,
-				autoInsertedBlockClientIds: _autoInsertedBlockClientIds,
-			};
-		},
-		[ autoInsertedBlocksForCurrentBlock, props.blockName, props.clientId ]
-	);
-
-	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
-
-	if ( ! autoInsertedBlocksForCurrentBlock.length ) {
-		return null;
-	}
-
-	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 title={ __( 'Plugins' ) } initialOpen={ true }>
-				{ Object.keys( groupedAutoInsertedBlocks ).map( ( vendor ) => {
-					return (
-						<Fragment key={ vendor }>
-							<h3>{ vendor }</h3>
-							{ groupedAutoInsertedBlocks[ vendor ].map(
-								( block ) => {
-									// TODO: Display block icon.
-									// <BlockIcon icon={ block.icon } />
-
-									const checked =
-										block.name in
-										autoInsertedBlockClientIds;
-
-									return (
-										<ToggleControl
-											checked={ checked }
-											key={ block.title }
-											label={ block.title }
-											onChange={ () => {
-												if ( ! checked ) {
-													// Create and insert block.
-													const relativePosition =
-														block.autoInsert[
-															props.blockName
-														];
-													insertBlockIntoDesignatedLocation(
-														createBlock(
-															block.name
-														),
-														relativePosition
-													);
-													return;
-												}
-
-												// Remove block.
-												const clientId =
-													autoInsertedBlockClientIds[
-														block.name
-													];
-												removeBlock( clientId, false );
-											} }
-										/>
-									);
-								}
-							) }
-						</Fragment>
-					);
-				} ) }
-			</PanelBody>
-		</InspectorControls>
-	);
-}
-
-export const withAutoInsertingBlocks = createHigherOrderComponent(
-	( BlockEdit ) => {
-		return ( props ) => {
-			const blockEdit = <BlockEdit key="edit" { ...props } />;
-			return (
-				<>
-					{ blockEdit }
-					<AutoInsertingBlocksControl
-						blockName={ props.name }
-						clientId={ props.clientId }
-					/>
-				</>
-			);
-		};
-	},
-	'withAutoInsertingBlocks'
-);
-
-if ( window?.__experimentalAutoInsertingBlocks ) {
-	addFilter(
-		'editor.BlockEdit',
-		'core/auto-inserting-blocks/with-inspector-control',
-		withAutoInsertingBlocks
-	);
-}

package/src/hooks/behaviors.js

@@ -1,206 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-import { InspectorControls } from '../components';
-
-function BehaviorsControl( {
-	blockName,
-	blockBehaviors,
-	onChangeBehavior,
-	onChangeAnimation,
-	disabled = false,
-} ) {
-	const { settings } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return {
-				settings:
-					getSettings()?.__experimentalFeatures?.blocks?.[ blockName ]
-						?.behaviors || {},
-			};
-		},
-		[ blockName ]
-	);
-
-	const defaultBehaviors = {
-		default: {
-			value: 'default',
-			label: __( 'Default' ),
-		},
-		noBehaviors: {
-			value: '',
-			label: __( 'No behaviors' ),
-		},
-	};
-	const behaviorsOptions = Object.entries( settings )
-		.filter(
-			( [ behaviorName, behaviorValue ] ) =>
-				hasBlockSupport( blockName, `behaviors.${ behaviorName }` ) &&
-				behaviorValue
-		) // Filter out behaviors that are disabled.
-		.map( ( [ behaviorName ] ) => ( {
-			value: behaviorName,
-			// Capitalize the first letter of the behavior name.
-			label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
-				.slice( 1 )
-				.toLowerCase() }`,
-		} ) );
-	const options = [
-		...Object.values( defaultBehaviors ),
-		...behaviorsOptions,
-	];
-
-	const { behaviors, behaviorsValue } = useMemo( () => {
-		const mergedBehaviors = {
-			...( blockBehaviors || {} ),
-		};
-
-		let value = '';
-		if ( blockBehaviors === undefined ) {
-			value = 'default';
-		}
-		if ( blockBehaviors?.lightbox.enabled ) {
-			value = 'lightbox';
-		}
-		return {
-			behaviors: mergedBehaviors,
-			behaviorsValue: value,
-		};
-	}, [ blockBehaviors ] );
-
-	// If every behavior is disabled, do not show the behaviors inspector control.
-	if ( behaviorsOptions.length === 0 ) {
-		return null;
-	}
-
-	const helpText = disabled
-		? __( 'The lightbox behavior is disabled for linked images.' )
-		: '';
-
-	return (
-		<InspectorControls group="advanced">
-			<div>
-				<SelectControl
-					label={ __( 'Behaviors' ) }
-					// At the moment we are only supporting one behavior (Lightbox)
-					value={ behaviorsValue }
-					options={ options }
-					onChange={ onChangeBehavior }
-					hideCancelButton={ true }
-					help={ helpText }
-					size="__unstable-large"
-					disabled={ disabled }
-				/>
-				{ behaviorsValue === 'lightbox' && (
-					<SelectControl
-						label={ __( 'Animation' ) }
-						// At the moment we are only supporting one behavior (Lightbox)
-						value={
-							behaviors?.lightbox.animation
-								? behaviors?.lightbox.animation
-								: ''
-						}
-						options={ [
-							{
-								value: 'zoom',
-								label: __( 'Zoom' ),
-							},
-							{
-								value: 'fade',
-								label: __( 'Fade' ),
-							},
-						] }
-						onChange={ onChangeAnimation }
-						hideCancelButton={ false }
-						size="__unstable-large"
-						disabled={ disabled }
-					/>
-				) }
-			</div>
-		</InspectorControls>
-	);
-}
-
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning behaviors to blocks if behaviors are enabled in the theme.json.
- *
- * Currently, only the `core/image` block is supported.
- *
- * @param {WPComponent} BlockEdit Original component.
- *
- * @return {WPComponent} Wrapped component.
- */
-export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
-		const blockEdit = <BlockEdit key="edit" { ...props } />;
-		// Only add behaviors to blocks with support.
-		if ( ! hasBlockSupport( props.name, 'behaviors' ) ) {
-			return blockEdit;
-		}
-		const blockHasLink =
-			typeof props.attributes?.linkDestination !== 'undefined' &&
-			props.attributes?.linkDestination !== 'none';
-		return (
-			<>
-				{ blockEdit }
-				<BehaviorsControl
-					blockName={ props.name }
-					blockBehaviors={ props.attributes.behaviors }
-					onChangeBehavior={ ( nextValue ) => {
-						if ( nextValue === 'default' ) {
-							props.setAttributes( {
-								behaviors: undefined,
-							} );
-						} else {
-							// If the user selects something, it means that they want to
-							// change the default value (true) so we save it in the attributes.
-							props.setAttributes( {
-								behaviors: {
-									lightbox: {
-										enabled: nextValue === 'lightbox',
-										animation:
-											nextValue === 'lightbox'
-												? 'zoom'
-												: '',
-									},
-								},
-							} );
-						}
-					} }
-					onChangeAnimation={ ( nextValue ) => {
-						props.setAttributes( {
-							behaviors: {
-								lightbox: {
-									enabled:
-										props.attributes.behaviors.lightbox
-											.enabled,
-									animation: nextValue,
-								},
-							},
-						} );
-					} }
-					disabled={ blockHasLink }
-				/>
-			</>
-		);
-	};
-}, 'withBehaviors' );
-
-addFilter(
-	'editor.BlockEdit',
-	'core/behaviors/with-inspector-control',
-	withBehaviors
-);