@wordpress/edit-post 7.32.0 → 7.33.0

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

@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const textFormattingShortcuts = [
-	{
-		keyCombination: { modifier: 'primary', character: 'b' },
-		description: __( 'Make the selected text bold.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'i' },
-		description: __( 'Make the selected text italic.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'k' },
-		description: __( 'Convert the selected text into a link.' ),
-	},
-	{
-		keyCombination: { modifier: 'primaryShift', character: 'k' },
-		description: __( 'Remove a link.' ),
-	},
-	{
-		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'u' },
-		description: __( 'Underline the selected text.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: 'd' },
-		description: __( 'Strikethrough the selected text.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: 'x' },
-		description: __( 'Make the selected text inline code.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: '0' },
-		description: __( 'Convert the current heading to a paragraph.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: '1-6' },
-		description: __(
-			'Convert the current paragraph or heading to a heading of level 1 to 6.'
-		),
-	},
-	{
-		keyCombination: { modifier: 'primaryShift', character: '\u00a0' },
-		description: __( 'Add non breaking space.' ),
-	},
-];

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

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import Shortcut from './shortcut';
-
-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 }
-		/>
-	);
-}
-
-export default DynamicShortcut;

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

@@ -1,163 +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 { withSelect, withDispatch, useSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { store as interfaceStore } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { textFormattingShortcuts } from './config';
-import Shortcut from './shortcut';
-import DynamicShortcut from './dynamic-shortcut';
-
-export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
-	'edit-post/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-post-keyboard-shortcut-help-modal__shortcut-list"
-		role="list"
-	>
-		{ shortcuts.map( ( shortcut, index ) => (
-			<li
-				className="edit-post-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-post-keyboard-shortcut-help-modal__section',
-			className
-		) }
-	>
-		{ !! title && (
-			<h2 className="edit-post-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 function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
-	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal );
-
-	if ( ! isModalActive ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			className="edit-post-keyboard-shortcut-help-modal"
-			title={ __( 'Keyboard shortcuts' ) }
-			closeButtonLabel={ __( 'Close' ) }
-			onRequestClose={ toggleModal }
-		>
-			<ShortcutSection
-				className="edit-post-keyboard-shortcut-help-modal__main-shortcuts"
-				shortcuts={ [ 'core/edit-post/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>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => ( {
-		isModalActive: select( interfaceStore ).isModalActive(
-			KEYBOARD_SHORTCUT_HELP_MODAL_NAME
-		),
-	} ) ),
-	withDispatch( ( dispatch, { isModalActive } ) => {
-		const { openModal, closeModal } = dispatch( interfaceStore );
-
-		return {
-			toggleModal: () =>
-				isModalActive
-					? closeModal()
-					: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME ),
-		};
-	} ),
-] )( KeyboardShortcutHelpModal );

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

@@ -1,67 +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-post-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-post-keyboard-shortcut-help-modal__shortcut-key"
-						>
-							{ character }
-						</kbd>
-					);
-				}
-			) }
-		</kbd>
-	);
-}
-
-function Shortcut( { description, keyCombination, aliases = [], ariaLabel } ) {
-	return (
-		<>
-			<div className="edit-post-keyboard-shortcut-help-modal__shortcut-description">
-				{ description }
-			</div>
-			<div className="edit-post-keyboard-shortcut-help-modal__shortcut-term">
-				<KeyCombination
-					keyCombination={ keyCombination }
-					forceAriaLabel={ ariaLabel }
-				/>
-				{ aliases.map( ( alias, index ) => (
-					<KeyCombination
-						keyCombination={ alias }
-						forceAriaLabel={ ariaLabel }
-						key={ index }
-					/>
-				) ) }
-			</div>
-		</>
-	);
-}
-
-export default Shortcut;

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

@@ -1,61 +0,0 @@
-.edit-post-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-post-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-shortcut-help-modal/test/index.js

@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { EditorKeyboardShortcutsRegister } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { KeyboardShortcutHelpModal } from '../index';
-
-const noop = () => {};
-
-describe( 'KeyboardShortcutHelpModal', () => {
-	it( 'should not render the modal when inactive', () => {
-		render(
-			<>
-				<EditorKeyboardShortcutsRegister />
-				<KeyboardShortcutHelpModal
-					isModalActive={ false }
-					toggleModal={ noop }
-				/>
-			</>
-		);
-
-		expect(
-			screen.queryByRole( 'dialog', {
-				name: 'Keyboard shortcuts',
-			} )
-		).not.toBeInTheDocument();
-	} );
-} );

package/src/components/sidebar/plugin-post-status-info/index.js

@@ -1,63 +0,0 @@
-/**
- * Defines as extensibility slot for the Summary panel.
- */
-
-/**
- * WordPress dependencies
- */
-import { createSlotFill, PanelRow } from '@wordpress/components';
-
-const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
-
-/**
- * Renders a row in the Summary panel of the Document sidebar.
- * It should be noted that this is named and implemented around the function it serves
- * and not its location, which may change in future iterations.
- *
- * @param {Object}  props             Component properties.
- * @param {string}  [props.className] An optional class name added to the row.
- * @param {Element} props.children    Children to be rendered.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
- *
- * function MyPluginPostStatusInfo() {
- * 	return React.createElement(
- * 		PluginPostStatusInfo,
- * 		{
- * 			className: 'my-plugin-post-status-info',
- * 		},
- * 		__( 'My post status info' )
- * 	)
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPostStatusInfo } from '@wordpress/edit-post';
- *
- * const MyPluginPostStatusInfo = () => (
- * 	<PluginPostStatusInfo
- * 		className="my-plugin-post-status-info"
- * 	>
- * 		{ __( 'My post status info' ) }
- * 	</PluginPostStatusInfo>
- * );
- * ```
- *
- * @return {Component} The component to be rendered.
- */
-const PluginPostStatusInfo = ( { children, className } ) => (
-	<Fill>
-		<PanelRow className={ className }>{ children }</PanelRow>
-	</Fill>
-);
-
-PluginPostStatusInfo.Slot = Slot;
-
-export default PluginPostStatusInfo;

package/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PluginPostStatusInfo renders fill properly 1`] = `
-<div>
-  <div
-    class="components-panel__row my-plugin-post-status-info"
-  >
-    My plugin post status info
-  </div>
-</div>
-`;

package/src/components/sidebar/plugin-post-status-info/test/index.js

@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PluginPostStatusInfo from '../';
-
-describe( 'PluginPostStatusInfo', () => {
-	test( 'renders fill properly', () => {
-		const { container } = render(
-			<SlotFillProvider>
-				<PluginPostStatusInfo className="my-plugin-post-status-info">
-					My plugin post status info
-				</PluginPostStatusInfo>
-				<PluginPostStatusInfo.Slot />
-			</SlotFillProvider>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );

package/src/components/sidebar/plugin-sidebar/index.js

@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ComplementaryArea } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
- * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
- * If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
- *
- * ```js
- * wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
- * ```
- *
- * @see PluginSidebarMoreMenuItem
- *
- * @param {Object}                props                                 Element props.
- * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
- * @param {string}                [props.className]                     An optional class name added to the sidebar body.
- * @param {string}                props.title                           Title displayed at the top of the sidebar.
- * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var el = React.createElement;
- * var PanelBody = wp.components.PanelBody;
- * var PluginSidebar = wp.editPost.PluginSidebar;
- * var moreIcon = React.createElement( 'svg' ); //... svg element.
- *
- * function MyPluginSidebar() {
- * 	return el(
- * 			PluginSidebar,
- * 			{
- * 				name: 'my-sidebar',
- * 				title: 'My sidebar title',
- * 				icon: moreIcon,
- * 			},
- * 			el(
- * 				PanelBody,
- * 				{},
- * 				__( 'My sidebar content' )
- * 			)
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PanelBody } from '@wordpress/components';
- * import { PluginSidebar } from '@wordpress/edit-post';
- * import { more } from '@wordpress/icons';
- *
- * const MyPluginSidebar = () => (
- * 	<PluginSidebar
- * 		name="my-sidebar"
- * 		title="My sidebar title"
- * 		icon={ more }
- * 	>
- * 		<PanelBody>
- * 			{ __( 'My sidebar content' ) }
- * 		</PanelBody>
- * 	</PluginSidebar>
- * );
- * ```
- */
-export default function PluginSidebarEditPost( { className, ...props } ) {
-	const { postTitle, shortcut } = useSelect( ( select ) => {
-		return {
-			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-		};
-	}, [] );
-	return (
-		<ComplementaryArea
-			panelClassName={ className }
-			className="edit-post-sidebar"
-			smallScreenTitle={ postTitle || __( '(no title)' ) }
-			scope="core/edit-post"
-			toggleShortcut={ shortcut }
-			{ ...props }
-		/>
-	);
-}