@wordpress/edit-post 7.19.2 → 7.20.0

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -871,7 +871,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1621,12 +1622,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   align-items: stretch;
 }
 
-.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
-  margin-top: 15px;
-  width: 100%;
-  text-align: center;
-}
-
 .edit-post-post-template {
   width: 100%;
   justify-content: flex-start;
@@ -1983,7 +1978,8 @@ body.is-fullscreen-mode .edit-post-visual-editor .block-editor-block-contextual-
 .edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .edit-post-welcome-guide__heading,
 .edit-template-welcome-guide__heading {
@@ -2150,7 +2146,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2165,7 +2161,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2180,7 +2176,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2195,7 +2191,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2210,7 +2206,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2225,7 +2221,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2240,7 +2236,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -2255,7 +2251,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.19.2",
+	"version": "7.20.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,36 +27,36 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.2",
-		"@wordpress/api-fetch": "^6.39.2",
-		"@wordpress/block-editor": "^12.10.2",
-		"@wordpress/block-library": "^8.19.2",
-		"@wordpress/blocks": "^12.19.2",
-		"@wordpress/commands": "^0.13.2",
-		"@wordpress/components": "^25.8.2",
-		"@wordpress/compose": "^6.19.2",
-		"@wordpress/core-commands": "^0.11.2",
-		"@wordpress/core-data": "^6.19.2",
-		"@wordpress/data": "^9.12.2",
-		"@wordpress/deprecated": "^3.42.2",
-		"@wordpress/dom": "^3.42.2",
-		"@wordpress/editor": "^13.19.2",
-		"@wordpress/element": "^5.19.2",
-		"@wordpress/hooks": "^3.42.2",
-		"@wordpress/i18n": "^4.42.2",
-		"@wordpress/icons": "^9.33.2",
-		"@wordpress/interface": "^5.19.2",
-		"@wordpress/keyboard-shortcuts": "^4.19.2",
-		"@wordpress/keycodes": "^3.42.2",
-		"@wordpress/media-utils": "^4.33.2",
-		"@wordpress/notices": "^4.10.2",
-		"@wordpress/plugins": "^6.10.2",
-		"@wordpress/preferences": "^3.19.2",
-		"@wordpress/private-apis": "^0.24.2",
-		"@wordpress/url": "^3.43.2",
-		"@wordpress/viewport": "^5.19.2",
-		"@wordpress/warning": "^2.42.2",
-		"@wordpress/widgets": "^3.19.2",
+		"@wordpress/a11y": "^3.43.0",
+		"@wordpress/api-fetch": "^6.40.0",
+		"@wordpress/block-editor": "^12.11.0",
+		"@wordpress/block-library": "^8.20.0",
+		"@wordpress/blocks": "^12.20.0",
+		"@wordpress/commands": "^0.14.0",
+		"@wordpress/components": "^25.9.0",
+		"@wordpress/compose": "^6.20.0",
+		"@wordpress/core-commands": "^0.12.0",
+		"@wordpress/core-data": "^6.20.0",
+		"@wordpress/data": "^9.13.0",
+		"@wordpress/deprecated": "^3.43.0",
+		"@wordpress/dom": "^3.43.0",
+		"@wordpress/editor": "^13.20.0",
+		"@wordpress/element": "^5.20.0",
+		"@wordpress/hooks": "^3.43.0",
+		"@wordpress/i18n": "^4.43.0",
+		"@wordpress/icons": "^9.34.0",
+		"@wordpress/interface": "^5.20.0",
+		"@wordpress/keyboard-shortcuts": "^4.20.0",
+		"@wordpress/keycodes": "^3.43.0",
+		"@wordpress/media-utils": "^4.34.0",
+		"@wordpress/notices": "^4.11.0",
+		"@wordpress/plugins": "^6.11.0",
+		"@wordpress/preferences": "^3.20.0",
+		"@wordpress/private-apis": "^0.25.0",
+		"@wordpress/url": "^3.44.0",
+		"@wordpress/viewport": "^5.20.0",
+		"@wordpress/warning": "^2.43.0",
+		"@wordpress/widgets": "^3.20.0",
 		"classnames": "^2.3.1",
 		"memize": "^2.1.0",
 		"rememo": "^4.0.2"
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5d2e3d07cc97af8090fc32c1e5d5013a2967e752"
+	"gitHead": "9b8e598c5418d38fe72197c24ef1d3dd6c712151"
 }

package/src/components/block-settings-menu/plugin-block-settings-menu-item.js

@@ -45,7 +45,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
  * }
  *
  * function MyPluginBlockSettingsMenuItem() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginBlockSettingsMenuItem,
  * 		{
  * 			allowedBlocks: [ 'core/paragraph' ],
@@ -76,7 +76,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const PluginBlockSettingsMenuItem = ( {
 	allowedBlocks,

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

@@ -21,14 +21,14 @@ import { withPluginContext } from '@wordpress/plugins';
  * // Using ES5 syntax
  * var __ = wp.i18n.__;
  * var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
  *
  * function onButtonClick() {
  * 	alert( 'Button clicked.' );
  * }
  *
  * function MyButtonMoreMenuItem() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginMoreMenuItem,
  * 		{
  * 			icon: moreIcon,
@@ -60,7 +60,7 @@ import { withPluginContext } from '@wordpress/plugins';
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default compose(
 	withPluginContext( ( context, ownProps ) => {

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

@@ -17,10 +17,10 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
  * // Using ES5 syntax
  * var __ = wp.i18n.__;
  * var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
  *
  * function MySidebarMoreMenuItem() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginSidebarMoreMenuItem,
  * 		{
  * 			target: 'my-sidebar',
@@ -48,7 +48,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 
 export default function PluginSidebarMoreMenuItem( props ) {

package/src/components/meta-boxes/meta-boxes-area/index.js

@@ -20,7 +20,7 @@ import { store as editPostStore } from '../../../store';
  *
  * @param {Object} props          Component props.
  * @param {string} props.location metabox location.
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 function MetaBoxesArea( { location } ) {
 	const container = useRef( null );

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

@@ -22,12 +22,12 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
  * @param {string}                [props.className]                     An optional class name added to the row.
  * @param {string}                [props.title]                         The title of the panel
  * @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 {WPElement}             props.children                        Children to be rendered
+ * @param {Element}               props.children                        Children to be rendered
  *
  * @example
  * ```js
  * // Using ES5 syntax
- * var el = wp.element.createElement;
+ * var el = React.createElement;
  * var __ = wp.i18n.__;
  * var registerPlugin = wp.plugins.registerPlugin;
  * var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
@@ -64,7 +64,7 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
  *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const PluginDocumentSettingPanel = ( {
 	name,

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

@@ -15,7 +15,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
  * @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 {WPElement}             props.children                        Children to be rendered
+ * @param {Element}               props.children                        Children to be rendered
  *
  * @example
  * ```js
@@ -24,7 +24,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
  * var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
  *
  * function MyPluginPostPublishPanel() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginPostPublishPanel,
  * 		{
  * 			className: 'my-plugin-post-publish-panel',
@@ -53,7 +53,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const PluginPostPublishPanel = ( {
 	children,

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

@@ -14,9 +14,9 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  * 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 {WPElement} props.children    Children to be rendered.
+ * @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
@@ -25,7 +25,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  * var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
  *
  * function MyPluginPostStatusInfo() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginPostStatusInfo,
  * 		{
  * 			className: 'my-plugin-post-status-info',
@@ -50,7 +50,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const PluginPostStatusInfo = ( { children, className } ) => (
 	<Fill>

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

@@ -18,7 +18,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  * @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 {WPElement}             props.children                        Children to be rendered
+ * @param {Element}               props.children                        Children to be rendered
  *
  * @example
  * ```js
@@ -27,7 +27,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  * var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
  *
  * function MyPluginPrePublishPanel() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginPrePublishPanel,
  * 		{
  * 			className: 'my-plugin-pre-publish-panel',
@@ -56,7 +56,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const PluginPrePublishPanel = ( {
 	children,

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

@@ -34,10 +34,10 @@ import { store as editPostStore } from '../../../store';
  * ```js
  * // Using ES5 syntax
  * var __ = wp.i18n.__;
- * var el = wp.element.createElement;
+ * var el = React.createElement;
  * var PanelBody = wp.components.PanelBody;
  * var PluginSidebar = wp.editPost.PluginSidebar;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
  *
  * function MyPluginSidebar() {
  * 	return el(

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

@@ -6,8 +6,7 @@ import {
 	__experimentalHStack as HStack,
 	PanelBody,
 } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, ifCondition } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
 
 /**
@@ -31,13 +30,29 @@ import PostURL from '../post-url';
  */
 const PANEL_NAME = 'post-status';
 
-function PostStatus( { isOpened, onTogglePanel } ) {
+export default function PostStatus() {
+	const { isOpened, isRemoved } = useSelect( ( select ) => {
+		// 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 );
+		return {
+			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
+	if ( isRemoved ) {
+		return null;
+	}
+
 	return (
 		<PanelBody
 			className="edit-post-post-status"
 			title={ __( 'Summary' ) }
 			opened={ isOpened }
-			onToggle={ onTogglePanel }
+			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
 		>
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
@@ -69,24 +84,3 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 		</PanelBody>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		// 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 );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostStatus );

package/src/hooks/validate-multiple-use/index.js

@@ -23,9 +23,9 @@ const enhance = compose(
 	 * "original" block is not the current one. Thus, an inexisting
 	 * `originalBlockClientId` prop signals that the block is valid.
 	 *
-	 * @param {WPComponent} WrappedBlockEdit A filtered BlockEdit instance.
+	 * @param {Component} WrappedBlockEdit A filtered BlockEdit instance.
 	 *
-	 * @return {WPComponent} Enhanced component with merged state data props.
+	 * @return {Component} Enhanced component with merged state data props.
 	 */
 	withSelect( ( select, block ) => {
 		const multiple = hasBlockSupport( block.name, 'multiple', true );

package/src/style.scss

@@ -14,7 +14,6 @@
 @import "./components/sidebar/post-format/style.scss";
 @import "./components/sidebar/post-schedule/style.scss";
 @import "./components/sidebar/post-slug/style.scss";
-@import "./components/sidebar/post-status/style.scss";
 @import "./components/sidebar/post-template/style.scss";
 @import "./components/sidebar/post-url/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";

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

@@ -1,5 +0,0 @@
-.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
-	margin-top: 15px;
-	width: 100%;
-	text-align: center;
-}