@wordpress/editor 13.19.3 → 13.20.0

package/build-module/components/table-of-contents/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/table-of-contents/panel.js

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/template-validation-notice/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/time-to-read/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/unsaved-changes-warning/index.js

@@ -10,7 +10,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Warns the user if there are unsaved changes before leaving the editor.
  * Compatible with Post Editor and Site Editor.
  *
- * @return {WPComponent} The component.
+ * @return {Component} The component.
  */
 export default function UnsavedChangesWarning() {
   const {

package/build-module/components/unsaved-changes-warning/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","useEffect","useSelect","store","coreStore","UnsavedChangesWarning","__experimentalGetDirtyEntityRecords","warnIfUnsavedChanges","event","dirtyEntityRecords","length","returnValue","window","addEventListener","removeEventListener"],"sources":["@wordpress/editor/src/components/unsaved-changes-warning/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Warns the user if there are unsaved changes before leaving the editor.\n * Compatible with Post Editor and Site Editor.\n *\n * @return {WPComponent} The component.\n */\nexport default function UnsavedChangesWarning() {\n\tconst { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );\n\n\tuseEffect( () => {\n\t\t/**\n\t\t * Warns the user if there are unsaved changes before leaving the editor.\n\t\t *\n\t\t * @param {Event} event `beforeunload` event.\n\t\t *\n\t\t * @return {string | undefined} Warning prompt message, if unsaved changes exist.\n\t\t */\n\t\tconst warnIfUnsavedChanges = ( event ) => {\n\t\t\t// We need to call the selector directly in the listener to avoid race\n\t\t\t// conditions with `BrowserURL` where `componentDidUpdate` gets the\n\t\t\t// new value of `isEditedPostDirty` before this component does,\n\t\t\t// causing this component to incorrectly think a trashed post is still dirty.\n\t\t\tconst dirtyEntityRecords = __experimentalGetDirtyEntityRecords();\n\t\t\tif ( dirtyEntityRecords.length > 0 ) {\n\t\t\t\tevent.returnValue = __(\n\t\t\t\t\t'You have unsaved changes. If you proceed, they will be lost.'\n\t\t\t\t);\n\t\t\t\treturn event.returnValue;\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener( 'beforeunload', warnIfUnsavedChanges );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'beforeunload', warnIfUnsavedChanges );\n\t\t};\n\t}, [ __experimentalGetDirtyEntityRecords ] );\n\n\treturn null;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,qBAAqBA,CAAA,EAAG;EAC/C,MAAM;IAAEC;EAAoC,CAAC,GAAGJ,SAAS,CAAEE,SAAU,CAAC;EAEtEH,SAAS,CAAE,MAAM;IAChB;AACF;AACA;AACA;AACA;AACA;AACA;IACE,MAAMM,oBAAoB,GAAKC,KAAK,IAAM;MACzC;MACA;MACA;MACA;MACA,MAAMC,kBAAkB,GAAGH,mCAAmC,CAAC,CAAC;MAChE,IAAKG,kBAAkB,CAACC,MAAM,GAAG,CAAC,EAAG;QACpCF,KAAK,CAACG,WAAW,GAAGX,EAAE,CACrB,8DACD,CAAC;QACD,OAAOQ,KAAK,CAACG,WAAW;MACzB;IACD,CAAC;IAEDC,MAAM,CAACC,gBAAgB,CAAE,cAAc,EAAEN,oBAAqB,CAAC;IAE/D,OAAO,MAAM;MACZK,MAAM,CAACE,mBAAmB,CAAE,cAAc,EAAEP,oBAAqB,CAAC;IACnE,CAAC;EACF,CAAC,EAAE,CAAED,mCAAmC,CAAG,CAAC;EAE5C,OAAO,IAAI;AACZ"}
+{"version":3,"names":["__","useEffect","useSelect","store","coreStore","UnsavedChangesWarning","__experimentalGetDirtyEntityRecords","warnIfUnsavedChanges","event","dirtyEntityRecords","length","returnValue","window","addEventListener","removeEventListener"],"sources":["@wordpress/editor/src/components/unsaved-changes-warning/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Warns the user if there are unsaved changes before leaving the editor.\n * Compatible with Post Editor and Site Editor.\n *\n * @return {Component} The component.\n */\nexport default function UnsavedChangesWarning() {\n\tconst { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );\n\n\tuseEffect( () => {\n\t\t/**\n\t\t * Warns the user if there are unsaved changes before leaving the editor.\n\t\t *\n\t\t * @param {Event} event `beforeunload` event.\n\t\t *\n\t\t * @return {string | undefined} Warning prompt message, if unsaved changes exist.\n\t\t */\n\t\tconst warnIfUnsavedChanges = ( event ) => {\n\t\t\t// We need to call the selector directly in the listener to avoid race\n\t\t\t// conditions with `BrowserURL` where `componentDidUpdate` gets the\n\t\t\t// new value of `isEditedPostDirty` before this component does,\n\t\t\t// causing this component to incorrectly think a trashed post is still dirty.\n\t\t\tconst dirtyEntityRecords = __experimentalGetDirtyEntityRecords();\n\t\t\tif ( dirtyEntityRecords.length > 0 ) {\n\t\t\t\tevent.returnValue = __(\n\t\t\t\t\t'You have unsaved changes. If you proceed, they will be lost.'\n\t\t\t\t);\n\t\t\t\treturn event.returnValue;\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener( 'beforeunload', warnIfUnsavedChanges );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'beforeunload', warnIfUnsavedChanges );\n\t\t};\n\t}, [ __experimentalGetDirtyEntityRecords ] );\n\n\treturn null;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,qBAAqBA,CAAA,EAAG;EAC/C,MAAM;IAAEC;EAAoC,CAAC,GAAGJ,SAAS,CAAEE,SAAU,CAAC;EAEtEH,SAAS,CAAE,MAAM;IAChB;AACF;AACA;AACA;AACA;AACA;AACA;IACE,MAAMM,oBAAoB,GAAKC,KAAK,IAAM;MACzC;MACA;MACA;MACA;MACA,MAAMC,kBAAkB,GAAGH,mCAAmC,CAAC,CAAC;MAChE,IAAKG,kBAAkB,CAACC,MAAM,GAAG,CAAC,EAAG;QACpCF,KAAK,CAACG,WAAW,GAAGX,EAAE,CACrB,8DACD,CAAC;QACD,OAAOQ,KAAK,CAACG,WAAW;MACzB;IACD,CAAC;IAEDC,MAAM,CAACC,gBAAgB,CAAE,cAAc,EAAEN,oBAAqB,CAAC;IAE/D,OAAO,MAAM;MACZK,MAAM,CAACE,mBAAmB,CAAE,cAAc,EAAEP,oBAAqB,CAAC;IACnE,CAAC;EACF,CAAC,EAAE,CAAED,mCAAmC,CAAG,CAAC;EAE5C,OAAO,IAAI;AACZ"}

package/build-module/components/word-count/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/hooks/custom-sources-backwards-compatibility.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-style/style-rtl.css

@@ -98,7 +98,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;
   }

package/build-style/style.css

@@ -98,7 +98,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;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.19.3",
+	"version": "13.20.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,35 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.3",
-		"@wordpress/api-fetch": "^6.39.3",
-		"@wordpress/blob": "^3.42.3",
-		"@wordpress/block-editor": "^12.10.3",
-		"@wordpress/blocks": "^12.19.3",
-		"@wordpress/components": "^25.8.3",
-		"@wordpress/compose": "^6.19.3",
-		"@wordpress/core-data": "^6.19.3",
-		"@wordpress/data": "^9.12.3",
-		"@wordpress/date": "^4.42.3",
-		"@wordpress/deprecated": "^3.42.3",
-		"@wordpress/dom": "^3.42.3",
-		"@wordpress/element": "^5.19.3",
-		"@wordpress/hooks": "^3.42.3",
-		"@wordpress/html-entities": "^3.42.3",
-		"@wordpress/i18n": "^4.42.3",
-		"@wordpress/icons": "^9.33.3",
-		"@wordpress/keyboard-shortcuts": "^4.19.3",
-		"@wordpress/keycodes": "^3.42.3",
-		"@wordpress/media-utils": "^4.33.3",
-		"@wordpress/notices": "^4.10.3",
-		"@wordpress/patterns": "^1.3.3",
-		"@wordpress/preferences": "^3.19.3",
-		"@wordpress/private-apis": "^0.24.3",
-		"@wordpress/reusable-blocks": "^4.19.3",
-		"@wordpress/rich-text": "^6.19.3",
-		"@wordpress/server-side-render": "^4.19.3",
-		"@wordpress/url": "^3.43.3",
-		"@wordpress/wordcount": "^3.42.3",
+		"@wordpress/a11y": "^3.43.0",
+		"@wordpress/api-fetch": "^6.40.0",
+		"@wordpress/blob": "^3.43.0",
+		"@wordpress/block-editor": "^12.11.0",
+		"@wordpress/blocks": "^12.20.0",
+		"@wordpress/components": "^25.9.0",
+		"@wordpress/compose": "^6.20.0",
+		"@wordpress/core-data": "^6.20.0",
+		"@wordpress/data": "^9.13.0",
+		"@wordpress/date": "^4.43.0",
+		"@wordpress/deprecated": "^3.43.0",
+		"@wordpress/dom": "^3.43.0",
+		"@wordpress/element": "^5.20.0",
+		"@wordpress/hooks": "^3.43.0",
+		"@wordpress/html-entities": "^3.43.0",
+		"@wordpress/i18n": "^4.43.0",
+		"@wordpress/icons": "^9.34.0",
+		"@wordpress/keyboard-shortcuts": "^4.20.0",
+		"@wordpress/keycodes": "^3.43.0",
+		"@wordpress/media-utils": "^4.34.0",
+		"@wordpress/notices": "^4.11.0",
+		"@wordpress/patterns": "^1.4.0",
+		"@wordpress/preferences": "^3.20.0",
+		"@wordpress/private-apis": "^0.25.0",
+		"@wordpress/reusable-blocks": "^4.20.0",
+		"@wordpress/rich-text": "^6.20.0",
+		"@wordpress/server-side-render": "^4.20.0",
+		"@wordpress/url": "^3.44.0",
+		"@wordpress/wordcount": "^3.43.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
+	"gitHead": "9b8e598c5418d38fe72197c24ef1d3dd6c712151"
 }

package/src/components/post-featured-image/README.md

@@ -13,7 +13,7 @@ Replace the contents of the panel:
 ```js
 function replacePostFeaturedImage() {
 	return function () {
-		return wp.element.createElement(
+		return React.createElement(
 			'div',
 			{},
 			'The replacement contents or components.'
@@ -31,12 +31,12 @@ wp.hooks.addFilter(
 Prepend and append to the panel contents:
 
 ```js
-var el = wp.element.createElement;
+var el = React.createElement;
 
 function wrapPostFeaturedImage( OriginalComponent ) {
 	return function ( props ) {
 		return el(
-			wp.element.Fragment,
+			React.Fragment,
 			{},
 			'Prepend above',
 			el( OriginalComponent, props ),

package/src/components/post-saved-state/index.js

@@ -30,7 +30,7 @@ import { store as editorStore } from '../../store';
  * @param {?boolean} props.forceIsDirty   Whether to force the post to be marked
  *                                        as dirty.
  * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
- * @return {import('@wordpress/element').WPComponent} The component.
+ * @return {import('react').ComponentType} The component.
  */
 export default function PostSavedState( {
 	forceIsDirty,

package/src/components/post-sticky/check.js

@@ -1,28 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostStickyCheck( { hasStickyAction, postType, children } ) {
+export default function PostStickyCheck( { children } ) {
+	const { hasStickyAction, postType } = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		return {
+			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
+			postType: select( editorStore ).getCurrentPostType(),
+		};
+	}, [] );
+
 	if ( postType !== 'post' || ! hasStickyAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const post = select( editorStore ).getCurrentPost();
-		return {
-			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
-			postType: select( editorStore ).getCurrentPostType(),
-		};
-	} ),
-] )( PostStickyCheck );

package/src/components/post-sticky/index.js

@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,31 +11,22 @@ import { compose } from '@wordpress/compose';
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
 
-export function PostSticky( { onUpdateSticky, postSticky = false } ) {
+export default function PostSticky() {
+	const postSticky = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getEditedPostAttribute( 'sticky' ) ?? false
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				label={ __( 'Stick to the top of the blog' ) }
 				checked={ postSticky }
-				onChange={ () => onUpdateSticky( ! postSticky ) }
+				onChange={ () => editPost( { sticky: ! postSticky } ) }
 			/>
 		</PostStickyCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postSticky:
-				select( editorStore ).getEditedPostAttribute( 'sticky' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onUpdateSticky( postSticky ) {
-				dispatch( editorStore ).editPost( { sticky: postSticky } );
-			},
-		};
-	} ),
-] )( PostSticky );

package/src/components/post-sticky/test/index.js

@@ -3,40 +3,55 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostStickyCheck } from '../check';
+import PostStickyCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function setupUseSelectMock( { hasStickyAction, postType } ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getCurrentPostType: () => postType,
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-sticky': hasStickyAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
-		render(
-			<PostStickyCheck postType="page" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect(
 			screen.queryByText( 'Can Toggle Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ false }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect(
 			screen.queryByText( 'Can Toggle Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
+		render( <PostStickyCheck>Can Toggle Sticky</PostStickyCheck> );
 		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-switch-to-draft-button/index.js

@@ -6,8 +6,7 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 
 /**
@@ -15,17 +14,21 @@ import { useState } from '@wordpress/element';
  */
 import { store as editorStore } from '../../store';
 
-function PostSwitchToDraftButton( {
-	isSaving,
-	isPublished,
-	isScheduled,
-	onClick,
-} ) {
+export default function PostSwitchToDraftButton() {
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
-	if ( ! isPublished && ! isScheduled ) {
-		return null;
-	}
+	const { editPost, savePost } = useDispatch( editorStore );
+	const { isSaving, isPublished, isScheduled } = useSelect( ( select ) => {
+		const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
+			select( editorStore );
+		return {
+			isSaving: isSavingPost(),
+			isPublished: isCurrentPostPublished(),
+			isScheduled: isCurrentPostScheduled(),
+		};
+	}, [] );
+
+	const isDisabled = isSaving || ( ! isPublished && ! isScheduled );
 
 	let alertMessage;
 	if ( isPublished ) {
@@ -36,7 +39,8 @@ function PostSwitchToDraftButton( {
 
 	const handleConfirm = () => {
 		setShowConfirmDialog( false );
-		onClick();
+		editPost( { status: 'draft' } );
+		savePost();
 	};
 
 	return (
@@ -44,9 +48,11 @@ function PostSwitchToDraftButton( {
 			<Button
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
-					setShowConfirmDialog( true );
+					if ( ! isDisabled ) {
+						setShowConfirmDialog( true );
+					}
 				} }
-				disabled={ isSaving }
+				aria-disabled={ isDisabled }
 				variant="secondary"
 				style={ { flexGrow: '1', justifyContent: 'center' } }
 			>
@@ -62,24 +68,3 @@ function PostSwitchToDraftButton( {
 		</>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
-			select( editorStore );
-		return {
-			isSaving: isSavingPost(),
-			isPublished: isCurrentPostPublished(),
-			isScheduled: isCurrentPostScheduled(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost, savePost } = dispatch( editorStore );
-		return {
-			onClick: () => {
-				editPost( { status: 'draft' } );
-				savePost();
-			},
-		};
-	} ),
-] )( PostSwitchToDraftButton );

package/src/components/post-taxonomies/README.md

@@ -19,7 +19,7 @@ For example, to render alternative UI for the taxonomy `product-type`,
 we can render custom markup or use the original component as shown below.
 
 ```js
-var el = wp.element.createElement;
+var el = React.createElement;
 
 function customizeProductTypeSelector( OriginalComponent ) {
 	return function ( props ) {
@@ -42,7 +42,7 @@ Or, to use the hierarchical term selector with a non-hierarchical taxonomy `trac
 you can set the `HierarchicalTermSelector` component as shown below.
 
 ```js
-const el = wp.element.createElement;
+const el = React.createElement;
 const HierarchicalTermSelector = wp.editor.PostTaxonomiesHierarchicalTermSelector;
 
 function customizeTrackSelector( OriginalComponent ) {

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -149,7 +149,7 @@ export function getFilterMatcher( filterValue ) {
  *
  * @param {Object} props      Component props.
  * @param {string} props.slug Taxonomy slug.
- * @return {WPElement}        Hierarchical term selector component.
+ * @return {Element}        Hierarchical term selector component.
  */
 export function HierarchicalTermSelector( { slug } ) {
 	const [ adding, setAdding ] = useState( false );

package/src/components/post-trash/index.js

@@ -2,8 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,21 +24,40 @@ export default function PostTrash() {
 		};
 	}, [] );
 	const { trashPost } = useDispatch( editorStore );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( isNew || ! postId ) {
 		return null;
 	}
 
+	const handleConfirm = () => {
+		setShowConfirmDialog( false );
+		trashPost();
+	};
+
 	return (
-		<Button
-			className="editor-post-trash"
-			isDestructive
-			variant="secondary"
-			isBusy={ isDeleting }
-			aria-disabled={ isDeleting }
-			onClick={ isDeleting ? undefined : () => trashPost() }
-		>
-			{ __( 'Move to trash' ) }
-		</Button>
+		<>
+			<Button
+				className="editor-post-trash"
+				isDestructive
+				variant="secondary"
+				isBusy={ isDeleting }
+				aria-disabled={ isDeleting }
+				onClick={
+					isDeleting ? undefined : () => setShowConfirmDialog( true )
+				}
+			>
+				{ __( 'Move to trash' ) }
+			</Button>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				onConfirm={ handleConfirm }
+				onCancel={ () => setShowConfirmDialog( false ) }
+			>
+				{ __(
+					'Are you sure you want to move this post to the trash?'
+				) }
+			</ConfirmDialog>
+		</>
 	);
 }

package/src/components/post-type-support-check/README.md

@@ -16,7 +16,7 @@ If the post type is not yet known, it will be assumed to be supported.
 
 ### `children`
 
-_Type:_ `WPElement`
+_Type:_ `Element`
 
 Children to be rendered if post type supports.
 

package/src/components/post-type-support-check/index.js

@@ -14,12 +14,12 @@ import { store as editorStore } from '../../store';
  * type supports one of the given `supportKeys` prop.
  *
  * @param {Object}            props             Props.
- * @param {WPElement}         props.children    Children to be rendered if post
+ * @param {Element}           props.children    Children to be rendered if post
  *                                              type supports.
  * @param {(string|string[])} props.supportKeys String or string array of keys
  *                                              to test.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 function PostTypeSupportCheck( { children, supportKeys } ) {
 	const postType = useSelect( ( select ) => {

package/src/components/unsaved-changes-warning/index.js

@@ -10,7 +10,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Warns the user if there are unsaved changes before leaving the editor.
  * Compatible with Post Editor and Site Editor.
  *
- * @return {WPComponent} The component.
+ * @return {Component} The component.
  */
 export default function UnsavedChangesWarning() {
 	const { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );