@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

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/custom-fields.js

@@ -1,142 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { PanelBody, TextControl } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { InspectorControls } from '../components';
-import { useBlockEditingMode } from '../components/block-editing-mode';
-
-/**
- * Filters registered block settings, extending attributes to include `connections`.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addAttribute( settings ) {
-	if ( hasBlockSupport( settings, '__experimentalConnections', true ) ) {
-		// Gracefully handle if settings.attributes.connections is undefined.
-		settings.attributes = {
-			...settings.attributes,
-			connections: {
-				type: 'object',
-			},
-		};
-	}
-
-	return settings;
-}
-
-function CustomFieldsControl( props ) {
-	const blockEditingMode = useBlockEditingMode();
-	if ( blockEditingMode !== 'default' ) {
-		return null;
-	}
-
-	// If the block is a paragraph or image block, we need to know which
-	// attribute to use for the connection. Only the `content` attribute
-	// of the paragraph block and the `url` attribute of the image block are supported.
-	let attributeName;
-	if ( props.name === 'core/paragraph' ) attributeName = 'content';
-	if ( props.name === 'core/image' ) attributeName = 'url';
-
-	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Connections' ) } initialOpen={ true }>
-				<TextControl
-					__nextHasNoMarginBottom
-					autoComplete="off"
-					label={ __( 'Custom field meta_key' ) }
-					value={
-						props.attributes?.connections?.attributes?.[
-							attributeName
-						]?.value || ''
-					}
-					onChange={ ( nextValue ) => {
-						if ( nextValue === '' ) {
-							props.setAttributes( {
-								connections: undefined,
-								[ attributeName ]: undefined,
-								placeholder: undefined,
-							} );
-						} else {
-							props.setAttributes( {
-								connections: {
-									attributes: {
-										// The attributeName will be either `content` or `url`.
-										[ attributeName ]: {
-											// Source will be variable, could be post_meta, user_meta, term_meta, etc.
-											// Could even be a custom source like a social media attribute.
-											source: 'meta_fields',
-											value: nextValue,
-										},
-									},
-								},
-								[ attributeName ]: undefined,
-								placeholder: sprintf(
-									'This content will be replaced on the frontend by the value of "%s" custom field.',
-									nextValue
-								),
-							} );
-						}
-					} }
-				/>
-			</PanelBody>
-		</InspectorControls>
-	);
-}
-
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning a connection to blocks that has support for connections.
- * Currently, only the `core/paragraph` block is supported and there is only a relation
- * between paragraph content and a custom field.
- *
- * @param {Component} BlockEdit Original component.
- *
- * @return {Component} Wrapped component.
- */
-const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
-		const hasCustomFieldsSupport = hasBlockSupport(
-			props.name,
-			'__experimentalConnections',
-			false
-		);
-
-		// Check if the current block is a paragraph or image block.
-		// Currently, only these two blocks are supported.
-		if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
-
-		return (
-			<>
-				<BlockEdit key="edit" { ...props } />
-				{ hasCustomFieldsSupport && props.isSelected && (
-					<CustomFieldsControl { ...props } />
-				) }
-			</>
-		);
-	};
-}, 'withCustomFieldsControls' );
-
-if ( window.__experimentalConnections ) {
-	addFilter(
-		'blocks.registerBlockType',
-		'core/editor/connections/attribute',
-		addAttribute
-	);
-	addFilter(
-		'editor.BlockEdit',
-		'core/editor/connections/with-inspector-controls',
-		withCustomFieldsControls
-	);
-}