@wordpress/block-editor 12.15.0 → 12.16.0

package/src/components/block-list/use-block-props/use-block-default-class-name.js

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { getBlockType, getBlockDefaultClassName } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Returns the default class name if the block is a light block and it supports
- * `className`.
- *
- * @param {string} clientId The block client ID.
- *
- * @return {string} The class name, e.g. `wp-block-paragraph`.
- */
-export function useBlockDefaultClassName( clientId ) {
-	return useSelect(
-		( select ) => {
-			const name = select( blockEditorStore ).getBlockName( clientId );
-			const blockType = getBlockType( name );
-			const hasLightBlockWrapper = blockType?.apiVersion > 1;
-
-			if ( ! hasLightBlockWrapper ) {
-				return;
-			}
-
-			return getBlockDefaultClassName( name );
-		},
-		[ clientId ]
-	);
-}

package/src/components/block-parent-selector/style.scss

@@ -1,11 +0,0 @@
-.block-editor-block-parent-selector {
-	background: $white;
-	border-radius: $radius-block-ui;
-
-	.block-editor-block-parent-selector__button {
-		width: $grid-unit-60;
-		height: $grid-unit-60;
-		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
-	}
-}

package/src/components/block-tools/back-compat.js

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import { Disabled } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './selected-block-tools';
-
-export default function BlockToolsBackCompat( { children } ) {
-	const openRef = useContext( InsertionPointOpenRef );
-	const isDisabled = useContext( Disabled.Context );
-
-	// If context is set, `BlockTools` is a parent component.
-	if ( openRef || isDisabled ) {
-		return children;
-	}
-
-	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
-		alternative: 'wp.blockEditor.BlockTools',
-		since: '5.8',
-		version: '6.3',
-	} );
-
-	return (
-		<InsertionPoint __unstablePopoverSlot="block-toolbar">
-			<BlockPopover __unstablePopoverSlot="block-toolbar" />
-			{ children }
-		</InsertionPoint>
-	);
-}

package/src/components/block-tools/block-contextual-toolbar.js

@@ -1,100 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import NavigableToolbar from '../navigable-toolbar';
-import BlockToolbar from '../block-toolbar';
-import { store as blockEditorStore } from '../../store';
-import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
-
-export default function BlockContextualToolbar( {
-	focusOnMount,
-	isFixed,
-	...props
-} ) {
-	const {
-		blockType,
-		blockEditingMode,
-		hasParents,
-		showParentSelector,
-		selectedBlockClientId,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockName,
-			getBlockParents,
-			getSelectedBlockClientIds,
-			getBlockEditingMode,
-		} = select( blockEditorStore );
-		const { getBlockType } = select( blocksStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const parents = getBlockParents( _selectedBlockClientId );
-		const firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( firstParentClientId );
-		const parentBlockType = getBlockType( parentBlockName );
-
-		return {
-			selectedBlockClientId: _selectedBlockClientId,
-			blockType:
-				_selectedBlockClientId &&
-				getBlockType( getBlockName( _selectedBlockClientId ) ),
-			blockEditingMode: getBlockEditingMode( _selectedBlockClientId ),
-			hasParents: parents.length,
-			showParentSelector:
-				parentBlockType &&
-				getBlockEditingMode( firstParentClientId ) === 'default' &&
-				hasBlockSupport(
-					parentBlockType,
-					'__experimentalParentSelector',
-					true
-				) &&
-				selectedBlockClientIds.length <= 1 &&
-				getBlockEditingMode( _selectedBlockClientId ) === 'default',
-		};
-	}, [] );
-
-	const isToolbarEnabled =
-		blockType &&
-		hasBlockSupport( blockType, '__experimentalToolbar', true );
-	const hasAnyBlockControls = useHasAnyBlockControls();
-	if (
-		! isToolbarEnabled ||
-		( blockEditingMode !== 'default' && ! hasAnyBlockControls )
-	) {
-		return null;
-	}
-
-	// Shifts the toolbar to make room for the parent block selector.
-	const classes = classnames( 'block-editor-block-contextual-toolbar', {
-		'has-parent': hasParents && showParentSelector,
-		'is-fixed': isFixed,
-	} );
-
-	return (
-		<NavigableToolbar
-			focusOnMount={ focusOnMount }
-			focusEditorOnEscape
-			className={ classes }
-			/* translators: accessibility text for the block toolbar */
-			aria-label={ __( 'Block tools' ) }
-			variant={ isFixed ? 'unstyled' : undefined }
-			// Resets the index whenever the active block changes so
-			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-			key={ selectedBlockClientId }
-			{ ...props }
-		>
-			<BlockToolbar hideDragHandle={ isFixed } />
-		</NavigableToolbar>
-	);
-}

package/src/components/block-tools/selected-block-tools.js

@@ -1,127 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import BlockContextualToolbar from './block-contextual-toolbar';
-import { store as blockEditorStore } from '../../store';
-import BlockPopover from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-import { useShouldContextualToolbarShow } from '../../utils/use-should-contextual-toolbar-show';
-
-export default function SelectedBlockTools( {
-	clientId,
-	showEmptyBlockSideInserter,
-	__unstableContentRef,
-} ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
-
-	const { shouldShowBreadcrumb } = useSelect( ( select ) => {
-		const { hasMultiSelection, __unstableGetEditorMode } =
-			select( blockEditorStore );
-
-		const editorMode = __unstableGetEditorMode();
-
-		return {
-			shouldShowBreadcrumb:
-				! hasMultiSelection() &&
-				( editorMode === 'navigation' || editorMode === 'zoom-out' ),
-		};
-	}, [] );
-
-	const isToolbarForced = useRef( false );
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow();
-
-	const { stopTyping } = useDispatch( blockEditorStore );
-
-	useShortcut(
-		'core/block-editor/focus-toolbar',
-		() => {
-			isToolbarForced.current = true;
-			stopTyping( true );
-		},
-		{
-			isDisabled: ! canFocusHiddenToolbar,
-		}
-	);
-
-	useEffect( () => {
-		isToolbarForced.current = false;
-	} );
-
-	// Stores the active toolbar item index so the block toolbar can return focus
-	// to it when re-mounting.
-	const initialToolbarItemIndexRef = useRef();
-
-	useEffect( () => {
-		// Resets the index whenever the active block changes so this is not
-		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-		initialToolbarItemIndexRef.current = undefined;
-	}, [ clientId ] );
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	if ( showEmptyBlockSideInserter ) {
-		return null;
-	}
-
-	if ( shouldShowBreadcrumb || shouldShowContextualToolbar ) {
-		return (
-			<BlockPopover
-				clientId={ capturingClientId || clientId }
-				bottomClientId={ lastClientId }
-				className={ classnames(
-					'block-editor-block-list__block-popover',
-					{
-						'is-insertion-point-visible': isInsertionPointVisible,
-					}
-				) }
-				resize={ false }
-				{ ...popoverProps }
-			>
-				{ shouldShowContextualToolbar && (
-					<BlockContextualToolbar
-						// If the toolbar is being shown because of being forced
-						// it should focus the toolbar right after the mount.
-						focusOnMount={ isToolbarForced.current }
-						__experimentalInitialIndex={
-							initialToolbarItemIndexRef.current
-						}
-						__experimentalOnIndexChange={ ( index ) => {
-							initialToolbarItemIndexRef.current = index;
-						} }
-					/>
-				) }
-				{ shouldShowBreadcrumb && (
-					<BlockSelectionButton
-						clientId={ clientId }
-						rootClientId={ rootClientId }
-					/>
-				) }
-			</BlockPopover>
-		);
-	}
-
-	return null;
-}

package/src/components/inserter/hooks/use-debounced-input.js

@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
-
-export default function useDebouncedInput( defaultValue = '' ) {
-	const [ input, setInput ] = useState( defaultValue );
-	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
-
-	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
-
-	useEffect( () => {
-		setDebouncedInput( input );
-	}, [ input ] );
-
-	return [ input, setInput, debouncedInput ];
-}

package/src/components/preview-options/README.md

@@ -1,94 +0,0 @@
-# Preview Options
-
-The `PreviewOptions` component displays the list of different preview options available in the editor.
-
-It returns a [`DropdownMenu`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/dropdown-menu) component with these different options. The options currently available in the editor are Desktop, Mobile, Tablet and "Preview in new tab".
-
-![Preview options dropdown menu](https://make.wordpress.org/core/files/2020/09/preview-options-dropdown-menu.png)
-
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
-## Development guidelines
-
-### Usage
-
-Renders the previews options of the editor in a dropdown menu.
-
-```jsx
-import { Icon, MenuGroup } from '@wordpress/components';
-import { PostPreviewButton } from '@wordpress/editor';
-import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';
-
-const MyPreviewOptions = () => (
-	<PreviewOptions
-		isEnabled={ true }
-		className="edit-post-post-preview-dropdown"
-		deviceType={ deviceType }
-		setDeviceType={ setPreviewDeviceType }
-	> { ( { onClose } ) => (
-			<MenuGroup>
-				<div className="edit-post-header-preview__grouping-external">
-					<PostPreviewButton
-						className="edit-post-header-preview__button-external"
-						role="menuitem"
-						forceIsAutosaveable={ hasActiveMetaboxes }
-						textContent={
-							<>
-								{ __( 'Preview in new tab' ) }
-								<Icon icon={ external } />
-							</>
-						}
-						onPreview={ onClose }
-					/>
-				</div>
-			</MenuGroup>
-		) }
-	</PreviewOptions>
-);
-```
-
-### Props
-
-#### className
-
-The CSS classes added to the component.
-
--   Type: `String`
--   Required: no
-
-#### isEnabled
-
-Wheter or not the preview options are enabled for the current post.
-And example of when the preview options are not enabled is when the current post is not savable.
-
--   Type: `boolean`
--   Required: no
--   Default: true
-
-#### deviceType
-
-The device type in the preview options. It can be either Desktop or Tablet or Mobile among others.
-
--   Type: `String`
--   Required: yes
-
-#### setDeviceType
-
-Used to set the device type that will be used to display the preview inside the editor.
-
--   Type: `func`
--   Required: yes
-
-#### children
-
-A function that returns nodes to be rendered within the dropdown.
-
--   Type: `Function`
--   Required: No
-
-## Related components
-
-Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/preview-options/style.scss

@@ -1,64 +0,0 @@
-.block-editor-post-preview__dropdown {
-	padding: 0;
-}
-
-.block-editor-post-preview__button-resize.block-editor-post-preview__button-resize {
-	padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
-
-	&.has-icon {
-		padding-left: $grid-unit-10;
-	}
-}
-
-.block-editor-post-preview__dropdown-content {
-	&.edit-post-post-preview-dropdown {
-		.components-menu-group {
-			&:first-child {
-				padding-bottom: $grid-unit-10;
-			}
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-	}
-
-	.components-menu-group + .components-menu-group {
-		padding: $grid-unit-10;
-	}
-}
-
-.edit-post-header__settings,
-.edit-site-header-edit-mode__actions {
-	@include break-small () {
-		.editor-post-preview {
-			display: none;
-		}
-	}
-}
-
-// Reduced UI.
-.edit-post-header.has-reduced-ui {
-	@include break-small() {
-		// Apply transition to first two buttons.
-		.edit-post-header__settings .editor-post-save-draft,
-		.edit-post-header__settings .editor-post-saved-state,
-		.edit-post-header__settings .block-editor-post-preview__button-toggle {
-			transition: opacity 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		// Zero out opacity unless hovered.
-		&:not(:hover) {
-			.edit-post-header__settings .editor-post-save-draft,
-			.edit-post-header__settings .editor-post-saved-state,
-			.edit-post-header__settings .block-editor-post-preview__button-toggle {
-				opacity: 0;
-			}
-
-			// ... or opened.
-			.edit-post-header__settings .block-editor-post-preview__button-toggle.is-opened {
-				opacity: 1;
-			}
-		}
-	}
-}

package/src/components/use-display-block-controls/index.js

@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-import { store as blockEditorStore } from '../../store';
-
-export default function useDisplayBlockControls() {
-	const { isSelected, clientId, name } = useBlockEditContext();
-	return useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return true;
-			}
-
-			const {
-				getBlockName,
-				isFirstMultiSelectedBlock,
-				getMultiSelectedBlockClientIds,
-			} = select( blockEditorStore );
-
-			if ( isFirstMultiSelectedBlock( clientId ) ) {
-				return getMultiSelectedBlockClientIds().every(
-					( id ) => getBlockName( id ) === name
-				);
-			}
-
-			return false;
-		},
-		[ clientId, isSelected, name ]
-	);
-}

package/src/components/use-display-block-controls/index.native.js

@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-import { store as blockEditorStore } from '../../store';
-
-export default function useDisplayBlockControls() {
-	const { isSelected, clientId, name } = useBlockEditContext();
-	return useSelect(
-		( select ) => {
-			const { getBlockName, getBlockRootClientId } =
-				select( blockEditorStore );
-
-			const parentId = getBlockRootClientId( clientId );
-			const parentBlockName = getBlockName( parentId );
-
-			const hideControls = hasBlockSupport(
-				parentBlockName,
-				'__experimentalHideChildBlockControls',
-				false
-			);
-
-			if ( ! hideControls && isSelected ) {
-				return true;
-			}
-
-			return false;
-		},
-		[ clientId, isSelected, name ]
-	);
-}

package/src/hooks/test/color.js

@@ -1,112 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import BlockEditorProvider from '../../components/provider';
-import { withColorPaletteStyles } from '../color';
-
-describe( 'withColorPaletteStyles', () => {
-	const settings = {
-		__experimentalFeatures: {
-			color: {
-				palette: {
-					default: [
-						{
-							name: 'Pale pink',
-							slug: 'pale-pink',
-							color: '#f78da7',
-						},
-						{
-							name: 'Vivid green cyan',
-							slug: 'vivid-green-cyan',
-							color: '#00d084',
-						},
-					],
-				},
-			},
-		},
-	};
-
-	const EnhancedComponent = withColorPaletteStyles(
-		( { getStyleObj, wrapperProps } ) => (
-			<div>{ getStyleObj( wrapperProps.style ) }</div>
-		)
-	);
-
-	beforeAll( () => {
-		registerBlockType( 'core/test-block', {
-			save: () => undefined,
-			edit: () => undefined,
-			category: 'text',
-			title: 'test block',
-			supports: {
-				color: {
-					text: true,
-					background: true,
-				},
-			},
-		} );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( 'core/test-block' );
-	} );
-
-	it( 'should add color styles from attributes', () => {
-		const getStyleObj = jest.fn();
-
-		render(
-			<BlockEditorProvider settings={ settings } value={ [] }>
-				<EnhancedComponent
-					attributes={ {
-						backgroundColor: 'vivid-green-cyan',
-						textColor: 'pale-pink',
-					} }
-					name="core/test-block"
-					getStyleObj={ getStyleObj }
-				/>
-			</BlockEditorProvider>
-		);
-
-		expect( getStyleObj ).toHaveBeenLastCalledWith( {
-			color: '#f78da7',
-			backgroundColor: '#00d084',
-		} );
-	} );
-
-	it( 'should not add undefined style values', () => {
-		// This test ensures that undefined `color` and `backgroundColor` styles
-		// are not added to the styles object. An undefined `backgroundColor`
-		// style causes a React warning when gradients are used, as the gradient
-		// style currently uses the `background` shorthand syntax.
-		// See: https://github.com/WordPress/gutenberg/issues/36899.
-		const getStyleObj = jest.fn();
-
-		render(
-			<BlockEditorProvider settings={ settings } value={ [] }>
-				<EnhancedComponent
-					attributes={ {
-						backgroundColor: undefined,
-						textColor: undefined,
-					} }
-					name="core/test-block"
-					getStyleObj={ getStyleObj }
-				/>
-			</BlockEditorProvider>
-		);
-		// Check explictly for the object used in the call, because
-		// `toHaveBeenCalledWith` does not check for empty keys.
-		expect(
-			getStyleObj.mock.calls[ getStyleObj.mock.calls.length - 1 ][ 0 ]
-		).toStrictEqual( {} );
-	} );
-} );