@wordpress/editor 14.12.0 → 14.13.0

package/src/components/block-manager/category.js

@@ -1,96 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, useCallback } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useInstanceId } from '@wordpress/compose';
-import { CheckboxControl } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import BlockTypesChecklist from './checklist';
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-function BlockManagerCategory( { title, blockTypes } ) {
-	const instanceId = useInstanceId( BlockManagerCategory );
-	const { allowedBlockTypes, hiddenBlockTypes } = useSelect( ( select ) => {
-		const { getEditorSettings } = select( editorStore );
-		const { get } = select( preferencesStore );
-		return {
-			allowedBlockTypes: getEditorSettings().allowedBlockTypes,
-			hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
-		};
-	}, [] );
-	const filteredBlockTypes = useMemo( () => {
-		if ( allowedBlockTypes === true ) {
-			return blockTypes;
-		}
-		return blockTypes.filter( ( { name } ) => {
-			return allowedBlockTypes?.includes( name );
-		} );
-	}, [ allowedBlockTypes, blockTypes ] );
-	const { showBlockTypes, hideBlockTypes } = unlock(
-		useDispatch( editorStore )
-	);
-	const toggleVisible = useCallback(
-		( blockName, nextIsChecked ) => {
-			if ( nextIsChecked ) {
-				showBlockTypes( blockName );
-			} else {
-				hideBlockTypes( blockName );
-			}
-		},
-		[ showBlockTypes, hideBlockTypes ]
-	);
-	const toggleAllVisible = useCallback(
-		( nextIsChecked ) => {
-			const blockNames = blockTypes.map( ( { name } ) => name );
-			if ( nextIsChecked ) {
-				showBlockTypes( blockNames );
-			} else {
-				hideBlockTypes( blockNames );
-			}
-		},
-		[ blockTypes, showBlockTypes, hideBlockTypes ]
-	);
-
-	if ( ! filteredBlockTypes.length ) {
-		return null;
-	}
-
-	const checkedBlockNames = filteredBlockTypes
-		.map( ( { name } ) => name )
-		.filter( ( type ) => ! ( hiddenBlockTypes ?? [] ).includes( type ) );
-
-	const titleId = 'editor-block-manager__category-title-' + instanceId;
-
-	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
-	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
-
-	return (
-		<div
-			role="group"
-			aria-labelledby={ titleId }
-			className="editor-block-manager__category"
-		>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				checked={ isAllChecked }
-				onChange={ toggleAllVisible }
-				className="editor-block-manager__category-title"
-				indeterminate={ isIndeterminate }
-				label={ <span id={ titleId }>{ title }</span> }
-			/>
-			<BlockTypesChecklist
-				blockTypes={ filteredBlockTypes }
-				value={ checkedBlockNames }
-				onItemChange={ toggleVisible }
-			/>
-		</div>
-	);
-}
-
-export default BlockManagerCategory;

package/src/components/block-manager/checklist.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BlockIcon } from '@wordpress/block-editor';
-import { CheckboxControl } from '@wordpress/components';
-
-function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
-	return (
-		<ul className="editor-block-manager__checklist">
-			{ blockTypes.map( ( blockType ) => (
-				<li
-					key={ blockType.name }
-					className="editor-block-manager__checklist-item"
-				>
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						label={ blockType.title }
-						checked={ value.includes( blockType.name ) }
-						onChange={ ( ...args ) =>
-							onItemChange( blockType.name, ...args )
-						}
-					/>
-					<BlockIcon icon={ blockType.icon } />
-				</li>
-			) ) }
-		</ul>
-	);
-}
-
-export default BlockTypesChecklist;

package/src/components/block-manager/index.js

@@ -1,145 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { SearchControl, Button } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
-import { speak } from '@wordpress/a11y';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { store as editorStore } from '../../store';
-import BlockManagerCategory from './category';
-
-export default function BlockManager() {
-	const debouncedSpeak = useDebounce( speak, 500 );
-	const [ search, setSearch ] = useState( '' );
-	const { showBlockTypes } = unlock( useDispatch( editorStore ) );
-
-	const {
-		blockTypes,
-		categories,
-		hasBlockSupport,
-		isMatchingSearchTerm,
-		numberOfHiddenBlocks,
-	} = useSelect( ( select ) => {
-		// Some hidden blocks become unregistered
-		// by removing for instance the plugin that registered them, yet
-		// they're still remain as hidden by the user's action.
-		// We consider "hidden", blocks which were hidden and
-		// are still registered.
-		const _blockTypes = select( blocksStore ).getBlockTypes();
-		const hiddenBlockTypes = (
-			select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ?? []
-		).filter( ( hiddenBlock ) => {
-			return _blockTypes.some(
-				( registeredBlock ) => registeredBlock.name === hiddenBlock
-			);
-		} );
-
-		return {
-			blockTypes: _blockTypes,
-			categories: select( blocksStore ).getCategories(),
-			hasBlockSupport: select( blocksStore ).hasBlockSupport,
-			isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm,
-			numberOfHiddenBlocks:
-				Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length,
-		};
-	}, [] );
-
-	function enableAllBlockTypes( newBlockTypes ) {
-		const blockNames = newBlockTypes.map( ( { name } ) => name );
-		showBlockTypes( blockNames );
-	}
-
-	const filteredBlockTypes = blockTypes.filter(
-		( blockType ) =>
-			hasBlockSupport( blockType, 'inserter', true ) &&
-			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
-			( ! blockType.parent ||
-				blockType.parent.includes( 'core/post-content' ) )
-	);
-
-	// Announce search results on change
-	useEffect( () => {
-		if ( ! search ) {
-			return;
-		}
-		const count = filteredBlockTypes.length;
-		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results. */
-			_n( '%d result found.', '%d results found.', count ),
-			count
-		);
-		debouncedSpeak( resultsFoundMessage );
-	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
-
-	return (
-		<div className="editor-block-manager__content">
-			{ !! numberOfHiddenBlocks && (
-				<div className="editor-block-manager__disabled-blocks-count">
-					{ sprintf(
-						/* translators: %d: number of blocks. */
-						_n(
-							'%d block is hidden.',
-							'%d blocks are hidden.',
-							numberOfHiddenBlocks
-						),
-						numberOfHiddenBlocks
-					) }
-					<Button
-						__next40pxDefaultSize
-						variant="link"
-						onClick={ () =>
-							enableAllBlockTypes( filteredBlockTypes )
-						}
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</div>
-			) }
-			<SearchControl
-				__nextHasNoMarginBottom
-				label={ __( 'Search for a block' ) }
-				placeholder={ __( 'Search for a block' ) }
-				value={ search }
-				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
-				className="editor-block-manager__search"
-			/>
-			<div
-				tabIndex="0"
-				role="region"
-				aria-label={ __( 'Available block types' ) }
-				className="editor-block-manager__results"
-			>
-				{ filteredBlockTypes.length === 0 && (
-					<p className="editor-block-manager__no-results">
-						{ __( 'No blocks found.' ) }
-					</p>
-				) }
-				{ categories.map( ( category ) => (
-					<BlockManagerCategory
-						key={ category.slug }
-						title={ category.title }
-						blockTypes={ filteredBlockTypes.filter(
-							( blockType ) =>
-								blockType.category === category.slug
-						) }
-					/>
-				) ) }
-				<BlockManagerCategory
-					title={ __( 'Uncategorized' ) }
-					blockTypes={ filteredBlockTypes.filter(
-						( { category } ) => ! category
-					) }
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/block-manager/style.scss

@@ -1,82 +0,0 @@
-.editor-block-manager__no-results {
-	font-style: italic;
-	padding: $grid-unit-30 0;
-	text-align: center;
-}
-
-.editor-block-manager__search {
-	margin: $grid-unit-20 0;
-}
-
-.editor-block-manager__disabled-blocks-count {
-	border: $border-width solid $gray-300;
-	border-width: $border-width 0;
-	// Cover up horizontal areas off the sides of the box rectangle
-	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
-	padding: $grid-unit-10;
-	background-color: $white;
-	text-align: center;
-	position: sticky;
-	// When sticking, tuck the top border beneath the modal header border
-	top: ($grid-unit-05 + 1) * -1;
-	z-index: z-index(".editor-block-manager__disabled-blocks-count");
-
-	// Stick the category titles to the bottom
-	~ .editor-block-manager__results .editor-block-manager__category-title {
-		top: $grid-unit-40 - 1;
-	}
-	.is-link {
-		margin-left: 12px;
-	}
-}
-
-.editor-block-manager__category {
-	margin: 0 0 $grid-unit-30 0;
-}
-
-.editor-block-manager__category-title {
-	position: sticky;
-	top: - $grid-unit-05; // Offsets the top padding on the modal content container
-	padding: $grid-unit-20 0;
-	background-color: $white;
-	z-index: z-index(".editor-block-manager__category-title");
-
-	.components-checkbox-control__label {
-		font-weight: 600;
-	}
-}
-
-.editor-block-manager__checklist {
-	margin-top: 0;
-}
-
-.editor-block-manager__category-title,
-.editor-block-manager__checklist-item {
-	border-bottom: 1px solid $gray-300;
-}
-
-.editor-block-manager__checklist-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0;
-	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
-
-	.components-modal__content &.components-checkbox-control__input-container {
-		margin: 0 $grid-unit-10;
-	}
-
-	.block-editor-block-icon {
-		margin-right: 10px;
-		fill: $gray-900;
-	}
-}
-
-.editor-block-manager__results {
-	border-top: $border-width solid $gray-300;
-}
-
-// Remove the top border from results when adjacent to the disabled block count
-.editor-block-manager__disabled-blocks-count + .editor-block-manager__results {
-	border-top-width: 0;
-}