@wordpress/edit-post 7.24.1 → 7.26.0

package/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap

@@ -65,42 +65,46 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__option"
+    class="interface-preferences-modal__section-content"
   >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="interface-preferences-modal__option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle"
-          >
-            <input
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-0"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
             data-wp-c16t="true"
-            data-wp-component="FlexBlock"
-            for="inspector-toggle-control-0"
+            data-wp-component="HStack"
           >
-            Custom fields
-          </label>
+            <span
+              class="components-form-toggle"
+            >
+              <input
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-0"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-0"
+            >
+              Custom fields
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -173,126 +177,130 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__option"
+    class="interface-preferences-modal__section-content"
   >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="interface-preferences-modal__option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle"
-          >
-            <input
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-3"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
             data-wp-c16t="true"
-            data-wp-component="FlexBlock"
-            for="inspector-toggle-control-3"
+            data-wp-component="HStack"
           >
-            Custom fields
-          </label>
+            <span
+              class="components-form-toggle"
+            >
+              <input
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-3"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-3"
+            >
+              Custom fields
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="interface-preferences-modal__option"
-  >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="interface-preferences-modal__option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
-          >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-4"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
             data-wp-c16t="true"
-            data-wp-component="FlexBlock"
-            for="inspector-toggle-control-4"
+            data-wp-component="HStack"
           >
-            Meta Box 1
-          </label>
+            <span
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-4"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-4"
+            >
+              Meta Box 1
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="interface-preferences-modal__option"
-  >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="interface-preferences-modal__option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
-          >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-5"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
             data-wp-c16t="true"
-            data-wp-component="FlexBlock"
-            for="inspector-toggle-control-5"
+            data-wp-component="HStack"
           >
-            Meta Box 2
-          </label>
+            <span
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-5"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-5"
+            >
+              Meta Box 2
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -365,85 +373,89 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__option"
+    class="interface-preferences-modal__section-content"
   >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="interface-preferences-modal__option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
-          >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-1"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
             data-wp-c16t="true"
-            data-wp-component="FlexBlock"
-            for="inspector-toggle-control-1"
+            data-wp-component="HStack"
           >
-            Meta Box 1
-          </label>
+            <span
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-1"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-1"
+            >
+              Meta Box 1
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="interface-preferences-modal__option"
-  >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="interface-preferences-modal__option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
-          >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-2"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
             data-wp-c16t="true"
-            data-wp-component="FlexBlock"
-            for="inspector-toggle-control-2"
+            data-wp-component="HStack"
           >
-            Meta Box 2
-          </label>
+            <span
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-2"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-2"
+            >
+              Meta Box 2
+            </label>
+          </div>
         </div>
       </div>
     </div>

package/src/components/preferences-modal/test/index.js

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,56 +18,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
-	describe( 'should match snapshot when the modal is active', () => {
-		afterEach( () => {
-			useViewportMatch.mockClear();
-		} );
-		it( 'large viewports', async () => {
-			useSelect.mockImplementation( () => [ true, true, false ] );
-			useViewportMatch.mockImplementation( () => true );
-			render( <EditPostPreferencesModal /> );
-			const tabPanel = await screen.findByRole( 'tabpanel', {
-				name: 'General',
-			} );
-
-			expect(
-				within( tabPanel ).getByLabelText(
-					'Include pre-publish checklist'
-				)
-			).toBeInTheDocument();
-		} );
-		it( 'small viewports', async () => {
-			useSelect.mockImplementation( () => [ true, true, false ] );
-			useViewportMatch.mockImplementation( () => false );
-			render( <EditPostPreferencesModal /> );
-
-			// The tabpanel is not rendered in small viewports.
-			expect(
-				screen.queryByRole( 'tabpanel', {
-					name: 'General',
-				} )
-			).not.toBeInTheDocument();
-
-			const dialog = screen.getByRole( 'dialog', {
-				name: 'Preferences',
-			} );
-
-			// Checkbox toggle controls are not rendered in small viewports.
-			expect(
-				within( dialog ).queryByLabelText(
-					'Include pre-publish checklist'
-				)
-			).not.toBeInTheDocument();
-
-			// Individual preference nav buttons are rendered in small viewports.
-			expect(
-				within( dialog ).getByRole( 'button', {
-					name: 'General',
-				} )
-			).toBeInTheDocument();
-		} );
-	} );
-
 	it( 'should not render when the modal is not active', () => {
 		useSelect.mockImplementation( () => [ false, false, false ] );
 		render( <EditPostPreferencesModal /> );

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -5,12 +5,12 @@ import { createSlotFill, PanelBody } from '@wordpress/components';
 import { usePluginContext } from '@wordpress/plugins';
 import { useDispatch, useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
-import { store as editPostStore } from '../../../store';
 
 const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
 
@@ -78,7 +78,7 @@ const PluginDocumentSettingPanel = ( {
 	const { opened, isEnabled } = useSelect(
 		( select ) => {
 			const { isEditorPanelOpened, isEditorPanelEnabled } =
-				select( editPostStore );
+				select( editorStore );
 
 			return {
 				opened: isEditorPanelOpened( panelName ),
@@ -87,7 +87,7 @@ const PluginDocumentSettingPanel = ( {
 		},
 		[ panelName ]
 	);
-	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
 
 	if ( undefined === name ) {
 		warning( 'PluginDocumentSettingPanel requires a name property.' );

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

@@ -7,11 +7,6 @@ import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
 
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
 /**
  * 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`.
@@ -78,14 +73,12 @@ import { store as editPostStore } from '../../../store';
  * ```
  */
 export default function PluginSidebarEditPost( { className, ...props } ) {
-	const { postTitle, shortcut, showIconLabels } = useSelect( ( select ) => {
+	const { postTitle, shortcut } = useSelect( ( select ) => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 		};
 	}, [] );
 	return (
@@ -95,7 +88,6 @@ export default function PluginSidebarEditPost( { className, ...props } ) {
 			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core/edit-post"
 			toggleShortcut={ shortcut }
-			showIconLabels={ showIconLabels }
 			{ ...props }
 		/>
 	);

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

@@ -13,6 +13,8 @@ import {
 	PostSwitchToDraftButton,
 	PostSyncStatus,
 	PostURLPanel,
+	PostTemplatePanel,
+	store as editorStore,
 } from '@wordpress/editor';
 
 /**
@@ -25,8 +27,6 @@ import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
-import { store as editPostStore } from '../../../store';
-import PostTemplate from '../post-template';
 
 /**
  * Module Constants
@@ -38,13 +38,13 @@ export default function PostStatus() {
 		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
 		const { isEditorPanelRemoved, isEditorPanelOpened } =
-			select( editPostStore );
+			select( editorStore );
 		return {
 			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
 			isOpened: isEditorPanelOpened( PANEL_NAME ),
 		};
 	}, [] );
-	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
 
 	if ( isRemoved ) {
 		return null;
@@ -62,7 +62,7 @@ export default function PostStatus() {
 					<>
 						<PostVisibility />
 						<PostSchedulePanel />
-						<PostTemplate />
+						<PostTemplatePanel />
 						<PostURLPanel />
 						<PostSyncStatus />
 						<PostSticky />