@wordpress/editor 13.31.0 → 13.33.0

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

@@ -0,0 +1,53 @@
+/**
+ * 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: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
+];

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

@@ -0,0 +1,43 @@
+/**
+ * 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

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

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

@@ -0,0 +1,67 @@
+/**
+ * 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="editor-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="editor-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
+		</kbd>
+	);
+}
+
+function Shortcut( { description, keyCombination, aliases = [], ariaLabel } ) {
+	return (
+		<>
+			<div className="editor-keyboard-shortcut-help-modal__shortcut-description">
+				{ description }
+			</div>
+			<div className="editor-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

@@ -0,0 +1,61 @@
+.editor-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;
+
+		& + .editor-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/list-view-sidebar/index.js

@@ -135,6 +135,7 @@ export default function ListViewSidebar() {
 						icon={ closeSmall }
 						label={ __( 'Close' ) }
 						onClick={ closeListView }
+						size="small"
 					/>
 					<Tabs.TabList
 						className="editor-list-view-sidebar__tabs-tablist"

package/src/components/list-view-sidebar/style.scss

@@ -16,7 +16,7 @@
 		background: $white;
 		order: 1;
 		align-self: center;
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-15;
 	}
 }
 

package/src/components/pattern-overrides-panel/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { OverridesPanel } = unlock( patternsPrivateApis );
+
+export default function PatternOverridesPanel() {
+	const supportsPatternOverridesPanel = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType() === 'wp_block',
+		[]
+	);
+
+	if ( ! supportsPatternOverridesPanel ) {
+		return null;
+	}
+
+	return <OverridesPanel />;
+}

package/src/components/plugin-more-menu-item/index.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
+import { withPluginContext } from '@wordpress/plugins';
+import { ActionItem } from '@wordpress/interface';
+
+/**
+ * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
+ * @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 to the left of the menu item label.
+ * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
+ * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ *
+ * function onButtonClick() {
+ * 	alert( 'Button clicked.' );
+ * }
+ *
+ * function MyButtonMoreMenuItem() {
+ * 	return wp.element.createElement(
+ * 		PluginMoreMenuItem,
+ * 		{
+ * 			icon: moreIcon,
+ * 			onClick: onButtonClick,
+ * 		},
+ * 		__( 'My button title' )
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginMoreMenuItem } from '@wordpress/editor';
+ * import { more } from '@wordpress/icons';
+ *
+ * function onButtonClick() {
+ * 	alert( 'Button clicked.' );
+ * }
+ *
+ * const MyButtonMoreMenuItem = () => (
+ * 	<PluginMoreMenuItem
+ * 		icon={ more }
+ * 		onClick={ onButtonClick }
+ * 	>
+ * 		{ __( 'My button title' ) }
+ * 	</PluginMoreMenuItem>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default compose(
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			as: ownProps.as ?? MenuItem,
+			icon: ownProps.icon || context.icon,
+			name: 'core/plugin-more-menu',
+		};
+	} )
+)( ActionItem );

package/src/components/plugin-post-publish-panel/index.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { usePluginContext } from '@wordpress/plugins';
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
+
+/**
+ * Renders provided content to the post-publish panel in the publish flow
+ * (side panel that opens after a user publishes the post).
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                [props.className]                     An optional class name added to the panel.
+ * @param {string}                [props.title]                         Title displayed at the top of the panel.
+ * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
+ * @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.
+ * @param {Element}               props.children                        Children to be rendered
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostPublishPanel } from '@wordpress/edit-post';
+ *
+ * const MyPluginPostPublishPanel = () => (
+ * 	<PluginPostPublishPanel
+ * 		className="my-plugin-post-publish-panel"
+ * 		title={ __( 'My panel title' ) }
+ * 		initialOpen={ true }
+ * 	>
+ *         { __( 'My panel content' ) }
+ * 	</PluginPostPublishPanel>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginPostPublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
+
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
+
+PluginPostPublishPanel.Slot = Slot;
+
+export default PluginPostPublishPanel;

package/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPostPublishPanel renders fill properly 1`] = `
+<div>
+  <div
+    class="components-panel__body my-plugin-post-publish-panel is-opened"
+  >
+    <h2
+      class="components-panel__body-title"
+    >
+      <button
+        aria-expanded="true"
+        class="components-button components-panel__body-toggle"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+        >
+          <svg
+            aria-hidden="true"
+            class="components-panel__arrow"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+            />
+          </svg>
+        </span>
+        My panel title
+      </button>
+    </h2>
+    My panel content
+  </div>
+</div>
+`;

package/src/components/plugin-post-publish-panel/test/index.js

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