@wordpress/block-editor 12.1.0 → 12.2.0

package/src/components/off-canvas-editor/leaf-more-menu.js

@@ -1,158 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import {
-	addSubmenu,
-	chevronUp,
-	chevronDown,
-	moreVertical,
-} from '@wordpress/icons';
-import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import BlockTitle from '../block-title';
-import { useListViewContext } from './context';
-
-const POPOVER_PROPS = {
-	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
-};
-
-const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
-
-function AddSubmenuItem( { block, onClose } ) {
-	const { expandedState, expand } = useListViewContext();
-	const { insertBlock, replaceBlock, replaceInnerBlocks } =
-		useDispatch( blockEditorStore );
-
-	const clientId = block.clientId;
-	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
-		block.name
-	);
-	return (
-		<MenuItem
-			icon={ addSubmenu }
-			disabled={ isDisabled }
-			onClick={ () => {
-				const updateSelectionOnInsert = false;
-				const newLink = createBlock( 'core/navigation-link' );
-
-				if ( block.name === 'core/navigation-submenu' ) {
-					insertBlock(
-						newLink,
-						block.innerBlocks.length,
-						clientId,
-						updateSelectionOnInsert
-					);
-				} else {
-					// Convert to a submenu if the block currently isn't one.
-					const newSubmenu = createBlock(
-						'core/navigation-submenu',
-						block.attributes,
-						block.innerBlocks
-					);
-
-					// The following must happen as two independent actions.
-					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
-					// selector to determine which block is "active". As the UX needs the newLink to be
-					// the "active" block it must be the last block to be inserted.
-					// Therefore the Submenu is first created and **then** the newLink is inserted
-					// thus ensuring it is the last inserted block.
-					replaceBlock( clientId, newSubmenu );
-
-					replaceInnerBlocks(
-						newSubmenu.clientId,
-						[ newLink ],
-						updateSelectionOnInsert
-					);
-				}
-				if ( ! expandedState[ block.clientId ] ) {
-					expand( block.clientId );
-				}
-				onClose();
-			} }
-		>
-			{ __( 'Add submenu link' ) }
-		</MenuItem>
-	);
-}
-
-export default function LeafMoreMenu( props ) {
-	const { block } = props;
-	const { clientId } = block;
-
-	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
-		useDispatch( blockEditorStore );
-
-	const removeLabel = sprintf(
-		/* translators: %s: block name */
-		__( 'Remove %s' ),
-		BlockTitle( { clientId, maximumLength: 25 } )
-	);
-
-	const rootClientId = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-
-			return getBlockRootClientId( clientId );
-		},
-		[ clientId ]
-	);
-
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Options' ) }
-			className="block-editor-block-settings-menu"
-			popoverProps={ POPOVER_PROPS }
-			noIcons
-			{ ...props }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							icon={ chevronUp }
-							onClick={ () => {
-								moveBlocksUp( [ clientId ], rootClientId );
-								onClose();
-							} }
-						>
-							{ __( 'Move up' ) }
-						</MenuItem>
-						<MenuItem
-							icon={ chevronDown }
-							onClick={ () => {
-								moveBlocksDown( [ clientId ], rootClientId );
-								onClose();
-							} }
-						>
-							{ __( 'Move down' ) }
-						</MenuItem>
-						<AddSubmenuItem block={ block } onClose={ onClose } />
-					</MenuGroup>
-					<MenuGroup>
-						<MenuItem
-							onClick={ () => {
-								removeBlocks( [ clientId ], false );
-								onClose();
-							} }
-						>
-							{ removeLabel }
-						</MenuItem>
-					</MenuGroup>
-				</>
-			) }
-		</DropdownMenu>
-	);
-}

package/src/components/off-canvas-editor/leaf.js

@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { animated } from '@react-spring/web';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useMovingAnimation from '../use-moving-animation';
-
-const AnimatedTreeGridRow = animated( TreeGridRow );
-
-export default function ListViewLeaf( {
-	isSelected,
-	position,
-	level,
-	rowCount,
-	children,
-	className,
-	path,
-	...props
-} ) {
-	const ref = useMovingAnimation( {
-		isSelected,
-		adjustScrolling: false,
-		enableAnimation: true,
-		triggerAnimationOnChange: path,
-	} );
-
-	return (
-		<AnimatedTreeGridRow
-			ref={ ref }
-			className={ classnames(
-				'block-editor-list-view-leaf',
-				'offcanvas-editor-list-view-leaf',
-				className
-			) }
-			level={ level }
-			positionInSet={ position }
-			setSize={ rowCount }
-			{ ...props }
-		>
-			{ children }
-		</AnimatedTreeGridRow>
-	);
-}

package/src/components/off-canvas-editor/link-ui.js

@@ -1,167 +0,0 @@
-// Note: this file is copied directly from packages/block-library/src/navigation-link/link-ui.js
-
-/**
- * WordPress dependencies
- */
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { Popover, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { switchToBlockType } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import LinkControl from '../link-control';
-import BlockIcon from '../block-icon';
-
-/**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
- *
- * @param {string} type Link block's type attribute.
- * @param {string} kind Link block's entity of kind (post-type|taxonomy)
- * @return {{ type?: string, subtype?: string }} Search query params.
- */
-export function getSuggestionsQuery( type, kind ) {
-	switch ( type ) {
-		case 'post':
-		case 'page':
-			return { type: 'post', subtype: type };
-		case 'category':
-			return { type: 'term', subtype: 'category' };
-		case 'tag':
-			return { type: 'term', subtype: 'post_tag' };
-		case 'post_format':
-			return { type: 'post-format' };
-		default:
-			if ( kind === 'taxonomy' ) {
-				return { type: 'term', subtype: type };
-			}
-			if ( kind === 'post-type' ) {
-				return { type: 'post', subtype: type };
-			}
-			return {};
-	}
-}
-
-/**
- * Add transforms to Link Control
- *
- * @param {Object} props          Component props.
- * @param {string} props.clientId Block client ID.
- */
-function LinkControlTransforms( { clientId } ) {
-	const { getBlock, blockTransforms } = useSelect(
-		( select ) => {
-			const {
-				getBlock: _getBlock,
-				getBlockRootClientId,
-				getBlockTransformItems,
-			} = select( blockEditorStore );
-
-			return {
-				getBlock: _getBlock,
-				blockTransforms: getBlockTransformItems(
-					_getBlock( clientId ),
-					getBlockRootClientId( clientId )
-				),
-			};
-		},
-		[ clientId ]
-	);
-
-	const { replaceBlock } = useDispatch( blockEditorStore );
-
-	const featuredBlocks = [
-		'core/page-list',
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-
-	const transforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
-
-	if ( ! transforms?.length ) {
-		return null;
-	}
-
-	if ( ! clientId ) {
-		return null;
-	}
-
-	return (
-		<div className="link-control-transform">
-			<h3 className="link-control-transform__subheading">
-				{ __( 'Transform' ) }
-			</h3>
-			<div className="link-control-transform__items">
-				{ transforms.map( ( item ) => {
-					return (
-						<Button
-							key={ `transform-${ item.name }` }
-							onClick={ () =>
-								replaceBlock(
-									clientId,
-									switchToBlockType(
-										getBlock( clientId ),
-										item.name
-									)
-								)
-							}
-							className="link-control-transform__item"
-						>
-							<BlockIcon icon={ item.icon } />
-							{ item.title }
-						</Button>
-					);
-				} ) }
-			</div>
-		</div>
-	);
-}
-
-export function LinkUI( props ) {
-	const { label, url, opensInNewTab, type, kind } = props.link;
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && stripHTML( label ),
-	};
-
-	return (
-		<Popover
-			placement="bottom"
-			onClose={ props.onClose }
-			anchor={ props.anchor }
-			shift
-		>
-			<LinkControl
-				hasTextControl
-				hasRichPreviews
-				className={ props.className }
-				value={ link }
-				showInitialSuggestions={ true }
-				withCreateSuggestion={ props.hasCreateSuggestion }
-				noDirectEntry={ !! type }
-				noURLSuggestion={ !! type }
-				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
-				onChange={ props.onChange }
-				onRemove={ props.onRemove }
-				onCancel={ props.onCancel }
-				renderControlBottom={
-					! url
-						? () => (
-								<LinkControlTransforms
-									clientId={ props.clientId }
-								/>
-						  )
-						: null
-				}
-			/>
-		</Popover>
-	);
-}

package/src/components/off-canvas-editor/style.scss

@@ -1,34 +0,0 @@
-.offcanvas-editor-appender .block-editor-inserter__toggle {
-	background-color: #1e1e1e;
-	color: #fff;
-	margin: $grid-unit-10 0 0 24px;
-	border-radius: 2px;
-	height: 24px;
-	min-width: 24px;
-	padding: 0;
-
-	&:hover,
-	&:focus {
-		background: var(--wp-admin-theme-color);
-		color: #fff;
-	}
-}
-
-.offcanvas-editor-appender__description {
-	display: none;
-}
-
-.offcanvas-editor-list-view-tree-wrapper {
-	max-width: 100%;
-	overflow-x: auto;
-}
-
-.offcanvas-editor-list-view-leaf {
-	display: block;
-	// sidebar width - tab panel padding
-	max-width: $sidebar-width - (2 * $grid-unit-20);
-}
-
-.offcanvas-editor-list-view-is-empty {
-	margin-left: $grid-unit-20;
-}

package/src/components/off-canvas-editor/test/use-inserted-block.js

@@ -1,108 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useInsertedBlock } from '../use-inserted-block';
-
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * External dependencies
- */
-import { act, renderHook } from '@testing-library/react';
-
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: jest.fn(),
-} ) );
-
-describe( 'useInsertedBlock', () => {
-	const mockUpdateBlockAttributes = jest.fn();
-
-	it( 'returns undefined values when called without a block clientId', () => {
-		useSelect.mockImplementation( () => ( {
-			insertedBlockAttributes: {
-				'some-attribute': 'some-value',
-			},
-			insertedBlockName: 'core/navigation-link',
-		} ) );
-
-		useDispatch.mockImplementation( () => ( {
-			updateBlockAttributes: mockUpdateBlockAttributes,
-		} ) );
-
-		const { result } = renderHook( () => useInsertedBlock() );
-
-		const {
-			insertedBlockName,
-			insertedBlockAttributes,
-			setInsertedBlockAttributes,
-		} = result.current;
-
-		expect( insertedBlockName ).toBeUndefined();
-		expect( insertedBlockAttributes ).toBeUndefined();
-		expect(
-			setInsertedBlockAttributes( { 'some-attribute': 'new-value' } )
-		).toBeUndefined();
-	} );
-
-	it( 'returns name and attributes when called with a block clientId', () => {
-		useSelect.mockImplementation( () => ( {
-			insertedBlockAttributes: {
-				'some-attribute': 'some-value',
-			},
-			insertedBlockName: 'core/navigation-link',
-		} ) );
-
-		useDispatch.mockImplementation( () => ( {
-			updateBlockAttributes: mockUpdateBlockAttributes,
-		} ) );
-
-		const { result } = renderHook( () =>
-			useInsertedBlock( 'some-client-id-here' )
-		);
-
-		const { insertedBlockName, insertedBlockAttributes } = result.current;
-
-		expect( insertedBlockName ).toBe( 'core/navigation-link' );
-		expect( insertedBlockAttributes ).toEqual( {
-			'some-attribute': 'some-value',
-		} );
-	} );
-
-	it( 'dispatches updateBlockAttributes on provided client ID with new attributes when setInsertedBlockAttributes is called', () => {
-		useSelect.mockImplementation( () => ( {
-			insertedBlockAttributes: {
-				'some-attribute': 'some-value',
-			},
-			insertedBlockName: 'core/navigation-link',
-		} ) );
-
-		useDispatch.mockImplementation( () => ( {
-			updateBlockAttributes: mockUpdateBlockAttributes,
-		} ) );
-
-		const clientId = '123456789';
-
-		const { result } = renderHook( () => useInsertedBlock( clientId ) );
-
-		const { setInsertedBlockAttributes } = result.current;
-
-		act( () => {
-			setInsertedBlockAttributes( {
-				'some-attribute': 'new-value',
-			} );
-		} );
-
-		expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith( clientId, {
-			'some-attribute': 'new-value',
-		} );
-	} );
-} );

package/src/components/off-canvas-editor/test/utils.js

@@ -1,50 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getCommonDepthClientIds } from '../utils';
-
-describe( 'getCommonDepthClientIds', () => {
-	it( 'should return start and end when no depth is provided', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[],
-			[]
-		);
-
-		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
-	} );
-
-	it( 'should return deepest start and end when depths match', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[ 'start-1', 'start-2', 'start-3' ],
-			[ 'end-1', 'end-2', 'end-3' ]
-		);
-
-		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
-	} );
-
-	it( 'should return shallower ids when start is shallower', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[ 'start-1' ],
-			[ 'end-1', 'end-2', 'end-3' ]
-		);
-
-		expect( result ).toEqual( { start: 'start-id', end: 'end-2' } );
-	} );
-
-	it( 'should return shallower ids when end is shallower', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[ 'start-1', 'start-2', 'start-3' ],
-			[ 'end-1', 'end-2' ]
-		);
-
-		expect( result ).toEqual( { start: 'start-3', end: 'clicked-id' } );
-	} );
-} );

package/src/components/off-canvas-editor/update-attributes.js

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { escapeHTML } from '@wordpress/escape-html';
-import { safeDecodeURI } from '@wordpress/url';
-
-/**
- * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
- */
-/**
- * Navigation Link Block Attributes
- *
- * @typedef {Object} WPNavigationLinkBlockAttributes
- *
- * @property {string}               [label]         Link text.
- * @property {WPNavigationLinkKind} [kind]          Kind is used to differentiate between term and post ids to check post draft status.
- * @property {string}               [type]          The type such as post, page, tag, category and other custom types.
- * @property {string}               [rel]           The relationship of the linked URL.
- * @property {number}               [id]            A post or term id.
- * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
- * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
- */
-/**
- * Link Control onChange handler that updates block attributes when a setting is changed.
- *
- * @param {Object}                          updatedValue    New block attributes to update.
- * @param {Function}                        setAttributes   Block attribute update function.
- * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
- *
- */
-
-export const updateAttributes = (
-	updatedValue = {},
-	setAttributes,
-	blockAttributes = {}
-) => {
-	const {
-		label: originalLabel = '',
-		kind: originalKind = '',
-		type: originalType = '',
-	} = blockAttributes;
-
-	const {
-		title: newLabel = '', // the title of any provided Post.
-		url: newUrl = '',
-		opensInNewTab,
-		id,
-		kind: newKind = originalKind,
-		type: newType = originalType,
-	} = updatedValue;
-
-	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
-	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
-
-	const useNewLabel =
-		newLabel &&
-		newLabel !== originalLabel &&
-		// LinkControl without the title field relies
-		// on the check below. Specifically, it assumes that
-		// the URL is the same as a title.
-		// This logic a) looks suspicious and b) should really
-		// live in the LinkControl and not here. It's a great
-		// candidate for future refactoring.
-		newLabelWithoutHttp !== newUrlWithoutHttp;
-
-	// Unfortunately this causes the escaping model to be inverted.
-	// The escaped content is stored in the block attributes (and ultimately in the database),
-	// and then the raw data is "recovered" when outputting into the DOM.
-	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
-	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
-	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
-	// See also:
-	// - https://github.com/WordPress/gutenberg/pull/41063
-	// - https://github.com/WordPress/gutenberg/pull/18617.
-	const label = useNewLabel
-		? escapeHTML( newLabel )
-		: originalLabel || escapeHTML( newUrlWithoutHttp );
-
-	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
-	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
-
-	const isBuiltInType =
-		[ 'post', 'page', 'tag', 'category' ].indexOf( type ) > -1;
-
-	const isCustomLink =
-		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
-	const kind = isCustomLink ? 'custom' : newKind;
-
-	setAttributes( {
-		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
-		...( label && { label } ),
-		...( undefined !== opensInNewTab && { opensInNewTab } ),
-		...( id && Number.isInteger( id ) && { id } ),
-		...( kind && { kind } ),
-		...( type && type !== 'URL' && { type } ),
-	} );
-};