@wordpress/edit-site 5.32.0 → 5.34.0

package/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import Shortcut from './shortcut';
-
-export default function DynamicShortcut( { name } ) {
-	const { keyCombination, description, aliases } = useSelect(
-		( select ) => {
-			const {
-				getShortcutKeyCombination,
-				getShortcutDescription,
-				getShortcutAliases,
-			} = select( keyboardShortcutsStore );
-
-			return {
-				keyCombination: getShortcutKeyCombination( name ),
-				aliases: getShortcutAliases( name ),
-				description: getShortcutDescription( name ),
-			};
-		},
-		[ name ]
-	);
-
-	if ( ! keyCombination ) {
-		return null;
-	}
-
-	return (
-		<Shortcut
-			keyCombination={ keyCombination }
-			description={ description }
-			aliases={ aliases }
-		/>
-	);
-}

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -1,151 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { store as interfaceStore } from '@wordpress/interface';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { textFormattingShortcuts } from './config';
-import Shortcut from './shortcut';
-import DynamicShortcut from './dynamic-shortcut';
-
-export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
-	'edit-site/keyboard-shortcut-help';
-
-const ShortcutList = ( { shortcuts } ) => (
-	/*
-	 * Disable reason: The `list` ARIA role is redundant but
-	 * Safari+VoiceOver won't announce the list otherwise.
-	 */
-	/* eslint-disable jsx-a11y/no-redundant-roles */
-	<ul
-		className="edit-site-keyboard-shortcut-help-modal__shortcut-list"
-		role="list"
-	>
-		{ shortcuts.map( ( shortcut, index ) => (
-			<li
-				className="edit-site-keyboard-shortcut-help-modal__shortcut"
-				key={ index }
-			>
-				{ typeof shortcut === 'string' ? (
-					<DynamicShortcut name={ shortcut } />
-				) : (
-					<Shortcut { ...shortcut } />
-				) }
-			</li>
-		) ) }
-	</ul>
-	/* eslint-enable jsx-a11y/no-redundant-roles */
-);
-
-const ShortcutSection = ( { title, shortcuts, className } ) => (
-	<section
-		className={ classnames(
-			'edit-site-keyboard-shortcut-help-modal__section',
-			className
-		) }
-	>
-		{ !! title && (
-			<h2 className="edit-site-keyboard-shortcut-help-modal__section-title">
-				{ title }
-			</h2>
-		) }
-		<ShortcutList shortcuts={ shortcuts } />
-	</section>
-);
-
-const ShortcutCategorySection = ( {
-	title,
-	categoryName,
-	additionalShortcuts = [],
-} ) => {
-	const categoryShortcuts = useSelect(
-		( select ) => {
-			return select( keyboardShortcutsStore ).getCategoryShortcuts(
-				categoryName
-			);
-		},
-		[ categoryName ]
-	);
-
-	return (
-		<ShortcutSection
-			title={ title }
-			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
-		/>
-	);
-};
-
-export default function KeyboardShortcutHelpModal() {
-	const isModalActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive(
-			KEYBOARD_SHORTCUT_HELP_MODAL_NAME
-		)
-	);
-	const { closeModal, openModal } = useDispatch( interfaceStore );
-	const toggleModal = () =>
-		isModalActive
-			? closeModal()
-			: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
-	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
-	if ( ! isModalActive ) {
-		return null;
-	}
-	return (
-		<Modal
-			className="edit-site-keyboard-shortcut-help-modal"
-			title={ __( 'Keyboard shortcuts' ) }
-			onRequestClose={ toggleModal }
-		>
-			<ShortcutSection
-				className="edit-site-keyboard-shortcut-help-modal__main-shortcuts"
-				shortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }
-			/>
-			<ShortcutCategorySection
-				title={ __( 'Global shortcuts' ) }
-				categoryName="global"
-			/>
-
-			<ShortcutCategorySection
-				title={ __( 'Selection shortcuts' ) }
-				categoryName="selection"
-			/>
-
-			<ShortcutCategorySection
-				title={ __( 'Block shortcuts' ) }
-				categoryName="block"
-				additionalShortcuts={ [
-					{
-						keyCombination: { character: '/' },
-						description: __(
-							'Change the block type after adding a new paragraph.'
-						),
-						/* translators: The forward-slash character. e.g. '/'. */
-						ariaLabel: __( 'Forward-slash' ),
-					},
-				] }
-			/>
-			<ShortcutSection
-				title={ __( 'Text formatting' ) }
-				shortcuts={ textFormattingShortcuts }
-			/>
-			<ShortcutCategorySection
-				title={ __( 'List View shortcuts' ) }
-				categoryName="list-view"
-			/>
-		</Modal>
-	);
-}

package/src/components/keyboard-shortcut-help-modal/shortcut.js

@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
-
-function KeyCombination( { keyCombination, forceAriaLabel } ) {
-	const shortcut = keyCombination.modifier
-		? displayShortcutList[ keyCombination.modifier ](
-				keyCombination.character
-		  )
-		: keyCombination.character;
-	const ariaLabel = keyCombination.modifier
-		? shortcutAriaLabel[ keyCombination.modifier ](
-				keyCombination.character
-		  )
-		: keyCombination.character;
-
-	return (
-		<kbd
-			className="edit-site-keyboard-shortcut-help-modal__shortcut-key-combination"
-			aria-label={ forceAriaLabel || ariaLabel }
-		>
-			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
-				( character, index ) => {
-					if ( character === '+' ) {
-						return <Fragment key={ index }>{ character }</Fragment>;
-					}
-
-					return (
-						<kbd
-							key={ index }
-							className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
-						>
-							{ character }
-						</kbd>
-					);
-				}
-			) }
-		</kbd>
-	);
-}
-
-export default function Shortcut( {
-	description,
-	keyCombination,
-	aliases = [],
-	ariaLabel,
-} ) {
-	return (
-		<>
-			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-description">
-				{ description }
-			</div>
-			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-term">
-				<KeyCombination
-					keyCombination={ keyCombination }
-					forceAriaLabel={ ariaLabel }
-				/>
-				{ aliases.map( ( alias, index ) => (
-					<KeyCombination
-						keyCombination={ alias }
-						forceAriaLabel={ ariaLabel }
-						key={ index }
-					/>
-				) ) }
-			</div>
-		</>
-	);
-}

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -1,61 +0,0 @@
-.edit-site-keyboard-shortcut-help-modal {
-	&__section {
-		margin: 0 0 2rem 0;
-	}
-
-	&__section-title {
-		font-size: 0.9rem;
-		font-weight: 600;
-	}
-
-	&__shortcut {
-		display: flex;
-		align-items: baseline;
-		padding: 0.6rem 0;
-		border-top: 1px solid $gray-300;
-		margin-bottom: 0;
-
-		&:last-child {
-			border-bottom: 1px solid $gray-300;
-		}
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	&__shortcut-term {
-		font-weight: 600;
-		margin: 0 0 0 1rem;
-		text-align: right;
-	}
-
-	&__shortcut-description {
-		flex: 1;
-		margin: 0;
-
-		// IE 11 flex item fix - ensure the item does not collapse.
-		flex-basis: auto;
-	}
-
-	&__shortcut-key-combination {
-		display: block;
-		background: none;
-		margin: 0;
-		padding: 0;
-
-		& + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
-			margin-top: 10px;
-		}
-	}
-
-	&__shortcut-key {
-		padding: 0.25rem 0.5rem;
-		border-radius: 8%;
-		margin: 0 0.2rem 0 0.2rem;
-
-		&:last-child {
-			margin: 0 0 0 0.2rem;
-		}
-	}
-}

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -1,88 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as interfaceStore } from '@wordpress/interface';
-import { createBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
-import { STORE_NAME } from '../../store/constants';
-
-function KeyboardShortcutsEditMode() {
-	const isBlockInspectorOpen = useSelect(
-		( select ) =>
-			select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			) === SIDEBAR_BLOCK,
-		[]
-	);
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
-		useSelect( blockEditorStore );
-
-	const handleTextLevelShortcut = ( event, level ) => {
-		event.preventDefault();
-		const destinationBlockName =
-			level === 0 ? 'core/paragraph' : 'core/heading';
-		const currentClientId = getSelectedBlockClientId();
-		if ( currentClientId === null ) {
-			return;
-		}
-		const blockName = getBlockName( currentClientId );
-		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
-			return;
-		}
-		const attributes = getBlockAttributes( currentClientId );
-		const textAlign =
-			blockName === 'core/paragraph' ? 'align' : 'textAlign';
-		const destinationTextAlign =
-			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
-
-		replaceBlocks(
-			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: attributes.content,
-				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
-			} )
-		);
-	};
-
-	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isBlockInspectorOpen ) {
-			disableComplementaryArea( STORE_NAME );
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-		}
-	} );
-
-	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
-		handleTextLevelShortcut( event, 0 )
-	);
-
-	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-		//the loop is based off on a constant therefore
-		//the hook will execute the same way every time
-		//eslint-disable-next-line react-hooks/rules-of-hooks
-		useShortcut(
-			`core/edit-site/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTextLevelShortcut( event, level )
-		);
-	} );
-
-	return null;
-}
-
-export default KeyboardShortcutsEditMode;

package/src/components/page-actions/index.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import TrashPageMenuItem from './trash-page-menu-item';
-
-export default function PageActions( { postId, toggleProps, onRemove } ) {
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			toggleProps={ toggleProps }
-		>
-			{ () => (
-				<MenuGroup>
-					<TrashPageMenuItem
-						postId={ postId }
-						onRemove={ onRemove }
-					/>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}

package/src/components/page-actions/trash-page-menu-item.js

@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function TrashPageMenuItem( { postId, onRemove } ) {
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-	const { deleteEntityRecord } = useDispatch( coreStore );
-	const page = useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecord( 'postType', 'page', postId ),
-		[ postId ]
-	);
-	async function removePage() {
-		try {
-			await deleteEntityRecord(
-				'postType',
-				'page',
-				postId,
-				{},
-				{ throwOnError: true }
-			);
-			createSuccessNotice(
-				sprintf(
-					/* translators: The page's title. */
-					__( '"%s" moved to the Trash.' ),
-					decodeEntities( page.title.rendered )
-				),
-				{
-					type: 'snackbar',
-					id: 'edit-site-page-trashed',
-				}
-			);
-			onRemove?.();
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __(
-							'An error occurred while moving the page to the trash.'
-					  );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-	return (
-		<>
-			<MenuItem
-				onClick={ () => removePage() }
-				isDestructive
-				variant="secondary"
-			>
-				{ __( 'Move to Trash' ) }
-			</MenuItem>
-		</>
-	);
-}