@wordpress/edit-post 6.13.1-next.957ca95e4c.0 → 6.14.1

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

@@ -1,48 +1,407 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
-<Section
-  title="Advanced panels"
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: calc(4px * 3);
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
+<fieldset
+  class="interface-preferences-modal__section"
 >
-  <WithSelect(EnableCustomFieldsOption)
-    label="Custom fields"
-  />
-</Section>
+  <legend
+    class="interface-preferences-modal__section-legend"
+  >
+    <h2
+      class="interface-preferences-modal__section-title"
+    >
+      Advanced panels
+    </h2>
+  </legend>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <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-toggle-control__label"
+            for="inspector-toggle-control-0"
+          >
+            Custom fields
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
 `;
 
 exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`] = `
-<Section
-  title="Advanced panels"
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: calc(4px * 3);
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
+<fieldset
+  class="interface-preferences-modal__section"
 >
-  <WithSelect(EnableCustomFieldsOption)
-    label="Custom fields"
-  />
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test1"
-    label="Meta Box 1"
-    panelName="meta-box-test1"
-  />
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test2"
-    label="Meta Box 2"
-    panelName="meta-box-test2"
-  />
-</Section>
+  <legend
+    class="interface-preferences-modal__section-legend"
+  >
+    <h2
+      class="interface-preferences-modal__section-title"
+    >
+      Advanced panels
+    </h2>
+  </legend>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <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-toggle-control__label"
+            for="inspector-toggle-control-3"
+          >
+            Custom fields
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <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-toggle-control__label"
+            for="inspector-toggle-control-4"
+          >
+            Meta Box 1
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <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-toggle-control__label"
+            for="inspector-toggle-control-5"
+          >
+            Meta Box 2
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
 `;
 
 exports[`MetaBoxesSection renders meta box options 1`] = `
-<Section
-  title="Advanced panels"
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: calc(4px * 3);
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
+<fieldset
+  class="interface-preferences-modal__section"
 >
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test1"
-    label="Meta Box 1"
-    panelName="meta-box-test1"
-  />
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test2"
-    label="Meta Box 2"
-    panelName="meta-box-test2"
-  />
-</Section>
+  <legend
+    class="interface-preferences-modal__section-legend"
+  >
+    <h2
+      class="interface-preferences-modal__section-title"
+    >
+      Advanced panels
+    </h2>
+  </legend>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <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-toggle-control__label"
+            for="inspector-toggle-control-1"
+          >
+            Meta Box 1
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <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-toggle-control__label"
+            for="inspector-toggle-control-2"
+          >
+            Meta Box 2
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
 `;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -23,20 +23,26 @@ describe( 'EditPostPreferencesModal', () => {
 		it( 'large viewports', () => {
 			useSelect.mockImplementation( () => true );
 			useViewportMatch.mockImplementation( () => true );
-			const wrapper = shallow( <EditPostPreferencesModal /> );
-			expect( wrapper ).toMatchSnapshot();
+			render( <EditPostPreferencesModal /> );
+			expect(
+				screen.getByRole( 'dialog', { name: 'Preferences' } )
+			).toMatchSnapshot();
 		} );
 		it( 'small viewports', () => {
 			useSelect.mockImplementation( () => true );
 			useViewportMatch.mockImplementation( () => false );
-			const wrapper = shallow( <EditPostPreferencesModal /> );
-			expect( wrapper ).toMatchSnapshot();
+			render( <EditPostPreferencesModal /> );
+			expect(
+				screen.getByRole( 'dialog', { name: 'Preferences' } )
+			).toMatchSnapshot();
 		} );
 	} );
 
 	it( 'should not render when the modal is not active', () => {
 		useSelect.mockImplementation( () => false );
-		const wrapper = shallow( <EditPostPreferencesModal /> );
-		expect( wrapper.isEmptyRender() ).toBe( true );
+		render( <EditPostPreferencesModal /> );
+		expect(
+			screen.queryByRole( 'dialog', { name: 'Preferences' } )
+		).not.toBeInTheDocument();
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { MetaBoxesSection } from '../meta-boxes-section';
 
 describe( 'MetaBoxesSection', () => {
 	it( 'does not render if there are no options', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				areCustomFieldsRegistered={ false }
 				metaBoxes={ [
@@ -18,11 +18,11 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper.isEmptyRender() ).toBe( true );
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a Custom Fields option', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				title="Advanced panels"
 				areCustomFieldsRegistered
@@ -31,11 +31,13 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'group', { name: 'Advanced panels' } )
+		).toMatchSnapshot();
 	} );
 
 	it( 'renders meta box options', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				title="Advanced panels"
 				areCustomFieldsRegistered={ false }
@@ -46,11 +48,13 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'group', { name: 'Advanced panels' } )
+		).toMatchSnapshot();
 	} );
 
 	it( 'renders a Custom Fields option and meta box options', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				title="Advanced panels"
 				areCustomFieldsRegistered
@@ -61,6 +65,8 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'group', { name: 'Advanced panels' } )
+		).toMatchSnapshot();
 	} );
 } );

package/src/components/sidebar/featured-image/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, partial } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,8 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 	const { toggleEditorPanelOpened } = dispatch( editPostStore );
 
 	return {
-		onTogglePanel: partial( toggleEditorPanelOpened, PANEL_NAME ),
+		onTogglePanel: ( ...args ) =>
+			toggleEditorPanelOpened( PANEL_NAME, ...args ),
 	};
 } );
 

package/src/components/sidebar/page-attributes/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, partial } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,8 @@ export function PageAttributes() {
 		return null;
 	}
 
-	const onTogglePanel = partial( toggleEditorPanelOpened, PANEL_NAME );
+	const onTogglePanel = ( ...args ) =>
+		toggleEditorPanelOpened( PANEL_NAME, ...args );
 
 	return (
 		<PageAttributesCheck>

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

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

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

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

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

@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
 	PostScheduleCheck,
@@ -11,13 +11,24 @@ import {
 } from '@wordpress/editor';
 
 export default function PostSchedule() {
-	const anchorRef = useRef();
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( { anchor: popoverAnchor } ),
+		[ popoverAnchor ]
+	);
+
 	return (
 		<PostScheduleCheck>
-			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
+			<PanelRow
+				className="edit-post-post-schedule"
+				ref={ setPopoverAnchor }
+			>
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
-					popoverProps={ { anchorRef } }
+					popoverProps={ popoverProps }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
 					focusOnMount

package/src/components/sidebar/post-schedule/style.scss

@@ -15,7 +15,7 @@
 	white-space: normal;
 	height: auto;
 
-	// This span is added by the Popover in Tooltip when no anchorRef is
+	// This span is added by the Popover in Tooltip when no anchor is
 	// provided. We set its width to 0 so that it does not cause the button text
 	// to wrap to a new line when displaying the tooltip. A better fix would be
 	// to pass anchorRef and avoid the need for a span alltogether, which is