@wordpress/edit-post 6.12.1-next.d6164808d3.0 → 6.14.0

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/visual-editor/index.js

@@ -185,10 +185,14 @@ export default function VisualEditor( { styles } ) {
 			// so we add the constrained type.
 			return { ...defaultLayout, type: 'constrained' };
 		}
-		// Set constrained layout for classic themes so all alignments are supported.
-		return { type: 'constrained' };
+		// Set default layout for classic themes so all alignments are supported.
+		return { type: 'default' };
 	}, [ isTemplateMode, themeSupportsLayout, defaultLayout ] );
 
+	const blockListLayoutClass = themeSupportsLayout
+		? 'is-layout-constrained'
+		: 'is-layout-flow';
+
 	const titleRef = useRef();
 	useEffect( () => {
 		if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
@@ -267,7 +271,7 @@ export default function VisualEditor( { styles } ) {
 								className={
 									isTemplateMode
 										? 'wp-site-blocks'
-										: 'is-layout-constrained' // Ensure root level blocks receive default/flow blockGap styling rules.
+										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
 								}
 								__experimentalLayout={ layout }
 							/>

package/src/editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { forEach, map, without } from 'lodash';
+import { map, without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -162,7 +162,7 @@ function Editor( {
 	const styles = useMemo( () => {
 		const themeStyles = [];
 		const presetStyles = [];
-		forEach( settings.styles, ( style ) => {
+		settings.styles?.forEach( ( style ) => {
 			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
 				themeStyles.push( style );
 			} else {

package/src/index.js

@@ -177,6 +177,10 @@ export function initializeEditor(
 		} );
 	}
 
+	// Prevent the default browser action for files dropped outside of dropzones.
+	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
+	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
+
 	render(
 		<Editor
 			settings={ settings }