@wordpress/block-editor 12.14.0 → 12.16.0

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/block-rename-ui.js

@@ -1,228 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
-import { addFilter } from '@wordpress/hooks';
-import { __, sprintf } from '@wordpress/i18n';
-import { hasBlockSupport } from '@wordpress/blocks';
-import {
-	MenuItem,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Button,
-	TextControl,
-	Modal,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import {
-	BlockSettingsMenuControls,
-	useBlockDisplayInformation,
-	InspectorControls,
-} from '../components';
-
-const emptyString = ( testString ) => testString?.trim()?.length === 0;
-
-function RenameModal( { blockName, originalBlockName, onClose, onSave } ) {
-	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
-
-	const nameHasChanged = editedBlockName !== blockName;
-	const nameIsOriginal = editedBlockName === originalBlockName;
-	const nameIsEmpty = emptyString( editedBlockName );
-
-	const isNameValid = nameHasChanged || nameIsOriginal;
-
-	const autoSelectInputText = ( event ) => event.target.select();
-
-	const dialogDescription = useInstanceId(
-		RenameModal,
-		`block-editor-rename-modal__description`
-	);
-
-	const handleSubmit = () => {
-		const message =
-			nameIsOriginal || nameIsEmpty
-				? sprintf(
-						/* translators: %s: new name/label for the block */
-						__( 'Block name reset to: "%s".' ),
-						editedBlockName
-				  )
-				: sprintf(
-						/* translators: %s: new name/label for the block */
-						__( 'Block name changed to: "%s".' ),
-						editedBlockName
-				  );
-
-		// Must be assertive to immediately announce change.
-		speak( message, 'assertive' );
-		onSave( editedBlockName );
-
-		// Immediate close avoids ability to hit save multiple times.
-		onClose();
-	};
-
-	return (
-		<Modal
-			title={ __( 'Rename' ) }
-			onRequestClose={ onClose }
-			overlayClassName="block-editor-block-rename-modal"
-			aria={ {
-				describedby: dialogDescription,
-			} }
-			focusOnMount="firstContentElement"
-		>
-			<p id={ dialogDescription }>
-				{ __( 'Enter a custom name for this block.' ) }
-			</p>
-			<form
-				onSubmit={ ( e ) => {
-					e.preventDefault();
-
-					if ( ! isNameValid ) {
-						return;
-					}
-
-					handleSubmit();
-				} }
-			>
-				<VStack spacing="3">
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ editedBlockName }
-						label={ __( 'Block name' ) }
-						hideLabelFromVision={ true }
-						placeholder={ originalBlockName }
-						onChange={ setEditedBlockName }
-						onFocus={ autoSelectInputText }
-					/>
-					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onClose }>
-							{ __( 'Cancel' ) }
-						</Button>
-
-						<Button
-							aria-disabled={ ! isNameValid }
-							variant="primary"
-							type="submit"
-						>
-							{ __( 'Save' ) }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
-	);
-}
-
-function BlockRenameControl( props ) {
-	const [ renamingBlock, setRenamingBlock ] = useState( false );
-
-	const { clientId, customName, onChange } = props;
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-
-	return (
-		<>
-			<InspectorControls group="advanced">
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Block name' ) }
-					value={ customName || '' }
-					onChange={ onChange }
-				/>
-			</InspectorControls>
-			<BlockSettingsMenuControls>
-				{ ( { selectedClientIds } ) => {
-					// Only enabled for single selections.
-					const canRename =
-						selectedClientIds.length === 1 &&
-						clientId === selectedClientIds[ 0 ];
-
-					// This check ensures the `BlockSettingsMenuControls` fill
-					// doesn't render multiple times and also that it renders for
-					// the block from which the menu was triggered.
-					if ( ! canRename ) {
-						return null;
-					}
-
-					return (
-						<MenuItem
-							onClick={ () => {
-								setRenamingBlock( true );
-							} }
-							aria-expanded={ renamingBlock }
-							aria-haspopup="dialog"
-						>
-							{ __( 'Rename' ) }
-						</MenuItem>
-					);
-				} }
-			</BlockSettingsMenuControls>
-
-			{ renamingBlock && (
-				<RenameModal
-					blockName={ customName || '' }
-					originalBlockName={ blockInformation?.title }
-					onClose={ () => setRenamingBlock( false ) }
-					onSave={ ( newName ) => {
-						// If the new value is the block's original name (e.g. `Group`)
-						// or it is an empty string then assume the intent is to reset
-						// the value. Therefore reset the metadata.
-						if (
-							newName === blockInformation?.title ||
-							emptyString( newName )
-						) {
-							newName = undefined;
-						}
-
-						onChange( newName );
-					} }
-				/>
-			) }
-		</>
-	);
-}
-
-export const withBlockRenameControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { clientId, name, attributes, setAttributes, isSelected } = props;
-
-		const supportsBlockNaming = hasBlockSupport( name, 'renaming', true );
-
-		return (
-			<>
-				{ isSelected && supportsBlockNaming && (
-					<>
-						<BlockRenameControl
-							clientId={ clientId }
-							customName={ attributes?.metadata?.name }
-							onChange={ ( newName ) => {
-								setAttributes( {
-									metadata: {
-										...attributes?.metadata,
-										name: newName,
-									},
-								} );
-							} }
-						/>
-					</>
-				) }
-
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
-	},
-	'withBlockRenameControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/block-rename-ui/with-block-rename-controls',
-	withBlockRenameControls
-);

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( {} );
-	} );
-} );