@wordpress/edit-post 7.31.0 → 7.33.0

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-publish-panel/test/__snapshots__/index.js.snap

@@ -1,39 +0,0 @@
-// 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/sidebar/plugin-post-publish-panel/test/index.js

@@ -1,33 +0,0 @@
-/**
- * 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();
-	} );
-} );

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-pre-publish-panel/test/index.js

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

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 }
-		/>
-	);
-}

package/src/components/sidebar/template-summary/index.js

@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon, layout } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-
-function TemplateSummary() {
-	const template = useSelect( ( select ) => {
-		const { getCurrentPost } = select( editorStore );
-		return getCurrentPost();
-	}, [] );
-
-	if ( ! template ) {
-		return null;
-	}
-
-	return (
-		<PanelBody>
-			<Flex align="flex-start" gap="3">
-				<FlexItem>
-					<Icon icon={ layout } />
-				</FlexItem>
-
-				<FlexBlock>
-					<h2 className="edit-post-template-summary__title">
-						{ template?.title || template?.slug }
-					</h2>
-					<p>{ template?.description }</p>
-				</FlexBlock>
-			</Flex>
-		</PanelBody>
-	);
-}
-
-export default TemplateSummary;

package/src/components/sidebar/template-summary/style.scss

@@ -1,5 +0,0 @@
-h2.edit-post-template-summary__title {
-	line-height: $icon-size;
-	margin: 0 0 $grid-unit-05;
-	font-weight: 500;
-}

package/src/components/start-page-options/index.js

@@ -1,108 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	store as blockEditorStore,
-	__experimentalBlockPatternsList as BlockPatternsList,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-function useStartPatterns() {
-	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
-	// and it has no postTypes declared and the current post type is page or if
-	// the current post type is part of the postTypes declared.
-	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
-		( select ) => {
-			const { getPatternsByBlockTypes } = select( blockEditorStore );
-			const { getCurrentPostType } = select( editorStore );
-			return {
-				blockPatternsWithPostContentBlockType:
-					getPatternsByBlockTypes( 'core/post-content' ),
-				postType: getCurrentPostType(),
-			};
-		},
-		[]
-	);
-
-	return useMemo( () => {
-		// filter patterns without postTypes declared if the current postType is page
-		// or patterns that declare the current postType in its post type array.
-		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
-			return (
-				( postType === 'page' && ! pattern.postTypes ) ||
-				( Array.isArray( pattern.postTypes ) &&
-					pattern.postTypes.includes( postType ) )
-			);
-		} );
-	}, [ postType, blockPatternsWithPostContentBlockType ] );
-}
-
-function PatternSelection( { blockPatterns, onChoosePattern } ) {
-	const shownBlockPatterns = useAsyncList( blockPatterns );
-	const { resetEditorBlocks } = useDispatch( editorStore );
-	return (
-		<BlockPatternsList
-			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
-			onClickPattern={ ( _pattern, blocks ) => {
-				resetEditorBlocks( blocks );
-				onChoosePattern();
-			} }
-		/>
-	);
-}
-
-function StartPageOptionsModal( { onClose } ) {
-	const startPatterns = useStartPatterns();
-	const hasStartPattern = startPatterns.length > 0;
-
-	if ( ! hasStartPattern ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			className="edit-post-start-page-options__modal"
-			title={ __( 'Choose a pattern' ) }
-			isFullScreen
-			onRequestClose={ onClose }
-		>
-			<div className="edit-post-start-page-options__modal-content">
-				<PatternSelection
-					blockPatterns={ startPatterns }
-					onChoosePattern={ onClose }
-				/>
-			</div>
-		</Modal>
-	);
-}
-
-export default function StartPageOptions() {
-	const [ isClosed, setIsClosed ] = useState( false );
-	const shouldEnableModal = useSelect( ( select ) => {
-		const { isCleanNewPost, getRenderingMode } = select( editorStore );
-		const { isFeatureActive } = select( editPostStore );
-
-		return (
-			getRenderingMode() === 'post-only' &&
-			! isFeatureActive( 'welcomeGuide' ) &&
-			isCleanNewPost()
-		);
-	}, [] );
-
-	if ( ! shouldEnableModal || isClosed ) {
-		return null;
-	}
-
-	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
-}

package/src/components/start-page-options/style.scss

@@ -1,26 +0,0 @@
-// 2 column masonry layout.
-.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
-	column-count: 2;
-	column-gap: $grid-unit-30;
-
-	@include break-medium() {
-		column-count: 3;
-	}
-
-	@include break-wide() {
-		column-count: 4;
-	}
-
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-		margin-bottom: $grid-unit-30;
-
-		.block-editor-block-preview__container {
-			min-height: 100px;
-		}
-
-		.block-editor-block-preview__content {
-			width: 100%;
-		}
-	}
-}