@wordpress/edit-post 7.24.1 → 7.26.0

package/src/components/header/document-actions/index.js

@@ -1,82 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockIcon, store as blockEditorStore } from '@wordpress/block-editor';
-import {
-	Button,
-	VisuallyHidden,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
-import { store as commandsStore } from '@wordpress/commands';
-import { displayShortcut } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-function DocumentActions() {
-	const { template } = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-
-		return {
-			template: getEditedPostTemplate(),
-		};
-	}, [] );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
-	const { open: openCommandCenter } = useDispatch( commandsStore );
-
-	if ( ! template ) {
-		return null;
-	}
-
-	let templateTitle = __( 'Default' );
-	if ( template?.title ) {
-		templateTitle = template.title;
-	} else if ( !! template ) {
-		templateTitle = template.slug;
-	}
-
-	return (
-		<div className="edit-post-document-actions">
-			<Button
-				className="edit-post-document-actions__back"
-				onClick={ () => {
-					clearSelectedBlock();
-					setIsEditingTemplate( false );
-				} }
-				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
-			>
-				{ __( 'Back' ) }
-			</Button>
-			<Button
-				className="edit-post-document-actions__command"
-				onClick={ () => openCommandCenter() }
-			>
-				<HStack
-					className="edit-post-document-actions__title"
-					spacing={ 1 }
-					justify="center"
-				>
-					<BlockIcon icon={ layout } />
-					<Text size="body" as="h1">
-						<VisuallyHidden as="span">
-							{ __( 'Editing template: ' ) }
-						</VisuallyHidden>
-						{ templateTitle }
-					</Text>
-				</HStack>
-				<span className="edit-post-document-actions__shortcut">
-					{ displayShortcut.primary( 'k' ) }
-				</span>
-			</Button>
-		</div>
-	);
-}
-
-export default DocumentActions;

package/src/components/header/document-actions/style.scss

@@ -1,64 +0,0 @@
-.edit-post-document-actions {
-	display: flex;
-	align-items: center;
-	gap: $grid-unit;
-	height: $button-size;
-	justify-content: space-between;
-	// Flex items will, by default, refuse to shrink below a minimum
-	// intrinsic width. In order to shrink this flexbox item, and
-	// subsequently truncate child text, we set an explicit min-width.
-	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-	min-width: 0;
-	background: $gray-100;
-	border-radius: 4px;
-	width: min(100%, 450px);
-
-	.components-button {
-		&:hover {
-			color: var(--wp-block-synced-color);
-			background: $gray-200;
-		}
-	}
-}
-
-.edit-post-document-actions__command {
-	flex-grow: 1;
-	color: var(--wp-block-synced-color);
-	overflow: hidden;
-}
-
-.edit-post-document-actions__title {
-	flex-grow: 1;
-	color: var(--wp-block-synced-color);
-	overflow: hidden;
-
-	&:hover {
-		color: var(--wp-block-synced-color);
-	}
-
-	.block-editor-block-icon {
-		flex-shrink: 0;
-	}
-
-	h1 {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		color: var(--wp-block-synced-color);
-	}
-}
-
-.edit-post-document-actions__shortcut {
-	color: $gray-800;
-}
-
-.edit-post-document-actions__back.components-button.has-icon.has-text {
-	min-width: $button-size;
-	flex-shrink: 0;
-	color: $gray-700;
-	gap: 0;
-
-	&:hover {
-		color: currentColor;
-	}
-}

package/src/components/header/header-toolbar/index.js

@@ -1,182 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import {
-	NavigableToolbar,
-	ToolSelector,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	EditorHistoryRedo,
-	EditorHistoryUndo,
-	store as editorStore,
-} from '@wordpress/editor';
-import { Button, ToolbarItem } from '@wordpress/components';
-import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-import { unlock } from '../../../lock-unlock';
-
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
-
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
-
-function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
-	const inserterButton = useRef();
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editPostStore );
-	const {
-		isInserterEnabled,
-		isInserterOpened,
-		isTextModeEnabled,
-		showIconLabels,
-		isListViewOpen,
-		listViewShortcut,
-	} = useSelect( ( select ) => {
-		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
-			select( blockEditorStore );
-		const { getEditorSettings } = select( editorStore );
-		const { getEditorMode, isFeatureActive, isListViewOpened } =
-			select( editPostStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-
-		return {
-			// This setting (richEditingEnabled) should not live in the block editor's setting.
-			isInserterEnabled:
-				getEditorMode() === 'visual' &&
-				getEditorSettings().richEditingEnabled &&
-				hasInserterItems(
-					getBlockRootClientId( getBlockSelectionEnd() )
-				),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
-			isTextModeEnabled: getEditorMode() === 'text',
-			showIconLabels: isFeatureActive( 'showIconLabels' ),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/edit-post/toggle-list-view'
-			),
-		};
-	}, [] );
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideViewport = useViewportMatch( 'wide' );
-	const {
-		shouldShowContextualToolbar,
-		canFocusHiddenToolbar,
-		fixedToolbarCanBeFocused,
-	} = useShouldContextualToolbarShow();
-	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
-	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
-	const blockToolbarCanBeFocused =
-		shouldShowContextualToolbar ||
-		canFocusHiddenToolbar ||
-		fixedToolbarCanBeFocused;
-	/* translators: accessibility text for the editor toolbar */
-	const toolbarAriaLabel = __( 'Document tools' );
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
-	);
-	const overflowItems = (
-		<>
-			<ToolbarItem
-				as={ Button }
-				className="edit-post-header-toolbar__document-overview-toggle"
-				icon={ listView }
-				disabled={ isTextModeEnabled }
-				isPressed={ isListViewOpen }
-				/* translators: button label text should, if possible, be under 16 characters. */
-				label={ __( 'Document Overview' ) }
-				onClick={ toggleListView }
-				shortcut={ listViewShortcut }
-				showTooltip={ ! showIconLabels }
-				variant={ showIconLabels ? 'tertiary' : undefined }
-				aria-expanded={ isListViewOpen }
-				ref={ setListViewToggleElement }
-			/>
-		</>
-	);
-	const toggleInserter = useCallback( () => {
-		if ( isInserterOpened ) {
-			// Focusing the inserter button should close the inserter popover.
-			// However, there are some cases it won't close when the focus is lost.
-			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
-			inserterButton.current.focus();
-			setIsInserterOpened( false );
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpened, setIsInserterOpened ] );
-
-	/* translators: button label text should, if possible, be under 16 characters. */
-	const longLabel = _x(
-		'Toggle block inserter',
-		'Generic label for block inserter button'
-	);
-	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
-
-	return (
-		<NavigableToolbar
-			className="edit-post-header-toolbar"
-			aria-label={ toolbarAriaLabel }
-			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
-			variant="unstyled"
-		>
-			<div className="edit-post-header-toolbar__left">
-				<ToolbarItem
-					ref={ inserterButton }
-					as={ Button }
-					className="edit-post-header-toolbar__inserter-toggle"
-					variant="primary"
-					isPressed={ isInserterOpened }
-					onMouseDown={ preventDefault }
-					onClick={ toggleInserter }
-					disabled={ ! isInserterEnabled }
-					icon={ plus }
-					label={ showIconLabels ? shortLabel : longLabel }
-					showTooltip={ ! showIconLabels }
-					aria-expanded={ isInserterOpened }
-				/>
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<>
-						{ isLargeViewport && ! hasFixedToolbar && (
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ isTextModeEnabled }
-							/>
-						) }
-						<ToolbarItem
-							as={ EditorHistoryUndo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-						/>
-						<ToolbarItem
-							as={ EditorHistoryRedo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-						/>
-						{ overflowItems }
-					</>
-				) }
-			</div>
-		</NavigableToolbar>
-	);
-}
-
-export default HeaderToolbar;

package/src/components/header/header-toolbar/style.scss

@@ -1,114 +0,0 @@
-.edit-post-header-toolbar {
-	display: inline-flex;
-	align-items: center;
-
-	// Hide all action buttons except the inserter on mobile.
-	.edit-post-header-toolbar__left > .components-button {
-		display: none;
-
-		@include break-small() {
-			display: inline-flex;
-		}
-	}
-
-	.edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
-		display: inline-flex;
-
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-
-	// Hide table of contents and list view on mobile.
-	.block-editor-list-view {
-		display: none;
-
-		@include break-small() {
-			display: flex;
-		}
-	}
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	.edit-post-header-toolbar__left > .components-button.has-icon,
-	.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-}
-
-// Reduced UI.
-.edit-post-header.has-reduced-ui {
-	@include break-small () {
-		// Apply transition to every button but the first one.
-		.edit-post-header-toolbar__left > * + .components-button,
-		.edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
-			transition: opacity 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		// Zero out opacity unless hovered.
-		&:not(:hover) .edit-post-header-toolbar__left > * + .components-button,
-		&:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
-			opacity: 0;
-		}
-	}
-}
-
-.edit-post-header-toolbar__left {
-	display: inline-flex;
-	align-items: center;
-	padding-left: $grid-unit-10;
-
-	// Some plugins add buttons here despite best practices.
-	// Push them a bit rightwards to fit the top toolbar.
-	margin-right: $grid-unit-10;
-
-	@include break-small() {
-		padding-left: $grid-unit-30;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-}
-
-.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
-	margin-right: $grid-unit-10;
-	// Special dimensions for this button.
-	min-width: 32px;
-	width: 32px;
-	height: 32px;
-	padding: 0;
-
-	.show-icon-labels & {
-		width: auto;
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-}
-
-.show-icon-labels .edit-post-header-toolbar__left > * + * {
-	margin-left: $grid-unit-10;
-}