@wordpress/editor 12.20.0 → 13.0.0

package/build-style/style.css

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -12,6 +18,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -83,6 +95,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -277,7 +291,7 @@
   max-width: 780px;
   padding: 20px;
   margin-top: 60px;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
 }
 
 .editor-page-attributes__order {
@@ -751,7 +765,7 @@
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -839,7 +853,7 @@
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.20.0",
+	"version": "13.0.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,32 +31,33 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/blob": "^3.21.0",
-		"@wordpress/block-editor": "^10.4.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/core-data": "^5.4.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/date": "^4.21.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/html-entities": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/keyboard-shortcuts": "^3.19.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/media-utils": "^4.12.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/preferences": "^2.13.0",
-		"@wordpress/reusable-blocks": "^3.19.0",
-		"@wordpress/rich-text": "^5.19.0",
-		"@wordpress/server-side-render": "^3.19.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/wordcount": "^3.21.0",
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/api-fetch": "^6.20.0",
+		"@wordpress/blob": "^3.23.0",
+		"@wordpress/block-editor": "^11.0.0",
+		"@wordpress/blocks": "^12.0.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/core-data": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/date": "^4.23.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/dom": "^3.23.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/hooks": "^3.23.0",
+		"@wordpress/html-entities": "^3.23.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/keyboard-shortcuts": "^4.0.0",
+		"@wordpress/keycodes": "^3.23.0",
+		"@wordpress/media-utils": "^4.14.0",
+		"@wordpress/notices": "^3.23.0",
+		"@wordpress/preferences": "^3.0.0",
+		"@wordpress/reusable-blocks": "^4.0.0",
+		"@wordpress/rich-text": "^6.0.0",
+		"@wordpress/server-side-render": "^4.0.0",
+		"@wordpress/url": "^3.24.0",
+		"@wordpress/wordcount": "^3.23.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"escape-html": "^1.0.3",
@@ -67,11 +68,11 @@
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/components/document-outline/check.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -10,8 +5,7 @@ import { withSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 function DocumentOutlineCheck( { blocks, children } ) {
-	const headings = filter(
-		blocks,
+	const headings = blocks.filter(
 		( block ) => block.name === 'core/heading'
 	);
 

package/src/components/editor-help/test/index.native.js

@@ -32,7 +32,7 @@ it( 'navigates back from help topic detail screen', async () => {
 	const helpTopic = await screen.findByText( 'Customize blocks' );
 	fireEvent.press( helpTopic );
 
-	const backButton = screen.getAllByA11yLabel( 'Go back' );
+	const backButton = screen.getAllByLabelText( 'Go back' );
 	fireEvent.press( backButton[ backButton.length - 1 ] );
 
 	// Currently logs `act` warning due to https://github.com/callstack/react-native-testing-library/issues/379
@@ -46,7 +46,7 @@ it( 'navigates back from help topic detail screen', async () => {
 it( 'dismisses when close button is pressed', async () => {
 	const closeMock = jest.fn();
 	const screen = render( <EditorHelp isVisible close={ closeMock } /> );
-	const closeButton = await screen.findByA11yLabel( 'Go back' );
+	const closeButton = await screen.findByLabelText( 'Go back' );
 	fireEvent.press( closeButton );
 
 	expect( closeMock ).toHaveBeenCalled();

package/src/components/editor-notices/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,14 +12,12 @@ import { store as noticesStore } from '@wordpress/notices';
 import TemplateValidationNotice from '../template-validation-notice';
 
 export function EditorNotices( { notices, onRemove } ) {
-	const dismissibleNotices = filter( notices, {
-		isDismissible: true,
-		type: 'default',
-	} );
-	const nonDismissibleNotices = filter( notices, {
-		isDismissible: false,
-		type: 'default',
-	} );
+	const dismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => isDismissible && type === 'default'
+	);
+	const nonDismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => ! isDismissible && type === 'default'
+	);
 
 	return (
 		<>

package/src/components/editor-snackbars/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,9 +11,9 @@ export default function EditorSnackbars() {
 		[]
 	);
 	const { removeNotice } = useDispatch( noticesStore );
-	const snackbarNotices = filter( notices, {
-		type: 'snackbar',
-	} );
+	const snackbarNotices = notices.filter(
+		( { type } ) => type === 'snackbar'
+	);
 
 	return (
 		<SnackbarList

package/src/components/entities-saved-states/entity-record-item.js

@@ -77,6 +77,7 @@ export default function EntityRecordItem( {
 	return (
 		<PanelRow>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={
 					<strong>
 						{ decodeEntities( entityRecordTitle ) ||

package/src/components/page-attributes/parent.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, unescape as unescapeString, find } from 'lodash';
+import { get, unescape as unescapeString } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -122,8 +122,7 @@ export function PageAttributesParent() {
 		const opts = getOptionsFromTree( tree );
 
 		// Ensure the current parent is in the options list.
-		const optsHasParent = find(
-			opts,
+		const optsHasParent = opts.find(
 			( item ) => item.value === parentPostId
 		);
 		if ( parentPost && ! optsHasParent ) {
@@ -158,6 +157,7 @@ export function PageAttributesParent() {
 
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
 			className="editor-page-attributes__parent"
 			label={ parentPageLabel }
 			value={ parentPostId }

package/src/components/post-author/combobox.js

@@ -95,6 +95,7 @@ function PostAuthorCombobox() {
 
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ authorId }

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

@@ -19,6 +19,7 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow comments' ) }
 			checked={ commentStatus === 'open' }
 			onChange={ onToggleComments }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -69,8 +64,7 @@ export default function PostFormat() {
 			supportedFormats?.includes( format.id ) || postFormat === format.id
 		);
 	} );
-	const suggestion = find(
-		formats,
+	const suggestion = formats.find(
 		( format ) => format.id === suggestedFormat
 	);
 

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

@@ -21,6 +21,7 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	return (
 		<PostPendingStatusCheck>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={ __( 'Pending review' ) }
 				checked={ status === 'pending' }
 				onChange={ togglePendingStatus }

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

@@ -19,6 +19,7 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }

package/src/components/post-publish-button/index.js

@@ -34,12 +34,22 @@ export class PostPublishButton extends Component {
 			entitiesSavedStatesCallback: false,
 		};
 	}
+
 	componentDidMount() {
 		if ( this.props.focusOnMount ) {
-			this.buttonNode.current.focus();
+			// This timeout is necessary to make sure the `useEffect` hook of
+			// `useFocusReturn` gets the correct element (the button that opens the
+			// PostPublishPanel) otherwise it will get this button.
+			this.timeoutID = setTimeout( () => {
+				this.buttonNode.current.focus();
+			}, 0 );
 		}
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.timeoutID );
+	}
+
 	createOnClick( callback ) {
 		return ( ...args ) => {
 			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =

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

@@ -125,6 +125,7 @@ export class PostPublishPanel extends Component {
 				</div>
 				<div className="editor-post-publish-panel__footer">
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						label={ __( 'Always show pre-publish checks.' ) }
 						checked={ isPublishSidebarEnabled }
 						onChange={ onTogglePublishSidebar }

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -16,17 +16,14 @@ import { store as editorStore } from '../../store';
 function MaybeCategoryPanel() {
 	const hasNoCategory = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const categoriesTaxonomy =
-			select( coreStore ).getTaxonomy( 'category' );
-		const defaultCategoryId = select( coreStore ).getEntityRecord(
-			'root',
-			'site'
-		)?.default_category;
-		const defaultCategory = select( coreStore ).getEntityRecord(
-			'taxonomy',
-			'category',
-			defaultCategoryId
-		);
+		const { canUser, getEntityRecord, getTaxonomy } = select( coreStore );
+		const categoriesTaxonomy = getTaxonomy( 'category' );
+		const defaultCategoryId = canUser( 'read', 'settings' )
+			? getEntityRecord( 'root', 'site' )?.default_category
+			: undefined;
+		const defaultCategory = defaultCategoryId
+			? getEntityRecord( 'taxonomy', 'category', defaultCategoryId )
+			: undefined;
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
 			categoriesTaxonomy.types.some( ( type ) => type === postType );
@@ -45,7 +42,7 @@ function MaybeCategoryPanel() {
 			postTypeSupportsCategories &&
 			( categories?.length === 0 ||
 				( categories?.length === 1 &&
-					defaultCategory.id === categories[ 0 ] ) )
+					defaultCategory?.id === categories[ 0 ] ) )
 		);
 	}, [] );
 	const [ shouldShowPanel, setShouldShowPanel ] = useState( false );

package/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,7 @@ const getSuggestion = ( supportedFormats, suggestedPostFormat ) => {
 	const formats = POST_FORMATS.filter( ( format ) =>
 		supportedFormats?.includes( format.id )
 	);
-	return find( formats, ( format ) => format.id === suggestedPostFormat );
+	return formats.find( ( format ) => format.id === suggestedPostFormat );
 };
 
 const PostFormatSuggestion = ( {

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

@@ -31,6 +31,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
+.components-panel__row .emotion-8 {
+  margin-bottom: inherit;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -141,7 +145,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-2 emotion-3"
+          class="components-base-control__field emotion-8 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -197,6 +201,10 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
+.components-panel__row .emotion-8 {
+  margin-bottom: inherit;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -307,7 +315,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-2 emotion-3"
+          class="components-base-control__field emotion-8 emotion-3"
         >
           <span
             class="components-checkbox-control__input-container"
@@ -345,10 +353,6 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -472,10 +476,6 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -609,7 +609,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   display: inline-block;
   margin: 5px 11px 0;
   position: relative;
-  color: var( --wp-admin-theme-color );
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   overflow: visible;
 }
 
@@ -641,10 +641,6 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   box-sizing: inherit;
 }
 
-.emotion-8 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-8 {
   margin-bottom: inherit;
 }

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

@@ -151,10 +151,22 @@ export default function PostSavedState( {
 					: undefined
 			}
 			onClick={ isDisabled ? undefined : () => savePost() }
-			shortcut={ displayShortcut.primary( 's' ) }
-			variant={ isLargeViewport ? 'tertiary' : undefined }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
+			/*
+			 * Displaying the keyboard shortcut conditionally makes the tooltip
+			 * itself show conditionally. This would trigger a full-rerendering
+			 * of the button that we want to avoid. By setting `showTooltip`,
+			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 */
+			showTooltip
+			variant="tertiary"
 			icon={ isLargeViewport ? undefined : cloudUpload }
-			label={ showIconLabels ? undefined : label }
+			// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
+			label={ text || label }
 			aria-disabled={ isDisabled }
 		>
 			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }

package/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button has-icon"
+  class="components-button is-tertiary has-icon"
   type="button"
 >
   <svg

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

@@ -16,6 +16,7 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				label={ __( 'Stick to the top of the blog' ) }
 				checked={ postSticky }
 				onChange={ () => onUpdateSticky( ! postSticky ) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import escapeHtml from 'escape-html';
 
 /**
@@ -50,7 +50,7 @@ const isSameTermName = ( termA, termB ) =>
 const termNamesToIds = ( names, terms ) => {
 	return names.map(
 		( termName ) =>
-			find( terms, ( term ) => isSameTermName( term.name, termName ) ).id
+			terms.find( ( term ) => isSameTermName( term.name, termName ) ).id
 	);
 };
 
@@ -203,7 +203,7 @@ export function FlatTermSelector( { slug } ) {
 
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>
-				! find( availableTerms, ( term ) =>
+				! availableTerms.find( ( term ) =>
 					isSameTermName( term.name, termName )
 				)
 		);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, unescape as unescapeString } from 'lodash';
+import { get, unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -95,7 +95,7 @@ export function sortBySelected( termsTree, terms ) {
  * @return {Object} Term object.
  */
 export function findTerm( terms, parent, name ) {
-	return find( terms, ( term ) => {
+	return terms.find( ( term ) => {
 		return (
 			( ( ! term.parent && ! parent ) ||
 				parseInt( term.parent ) === parseInt( parent ) ) &&
@@ -358,6 +358,7 @@ export function HierarchicalTermSelector( { slug } ) {
 					className="editor-post-taxonomies__hierarchical-terms-choice"
 				>
 					<CheckboxControl
+						__nextHasNoMarginBottom
 						checked={ terms.indexOf( term.id ) !== -1 }
 						onChange={ () => {
 							const termId = parseInt( term.id, 10 );

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -25,11 +20,10 @@ export function PostTaxonomies( {
 	taxonomies,
 	taxonomyWrapper = identity,
 } ) {
-	const availableTaxonomies = filter( taxonomies, ( taxonomy ) =>
+	const availableTaxonomies = ( taxonomies ?? [] ).filter( ( taxonomy ) =>
 		taxonomy.types.includes( postType )
 	);
-	const visibleTaxonomies = filter(
-		availableTaxonomies,
+	const visibleTaxonomies = availableTaxonomies.filter(
 		// In some circumstances .visibility can end up as undefined so optional chaining operator required.
 		// https://github.com/WordPress/gutenberg/issues/40326
 		( taxonomy ) => taxonomy.visibility?.show_ui

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

@@ -85,7 +85,7 @@ describe( 'PostTaxonomies', () => {
 	} );
 
 	it( 'should render no children if taxonomy data not available', () => {
-		const taxonomies = {};
+		const taxonomies = null;
 
 		const { container } = render(
 			<PostTaxonomies postType="page" taxonomies={ taxonomies } />

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

@@ -26,6 +26,7 @@ import {
 	insert,
 } from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -166,7 +167,7 @@ function PostTitle( _, forwardedRef ) {
 				( firstBlock.name === 'core/heading' ||
 					firstBlock.name === 'core/paragraph' )
 			) {
-				onUpdate( firstBlock.attributes.content );
+				onUpdate( stripHTML( firstBlock.attributes.content ) );
 				onInsertBlockAfter( content.slice( 1 ) );
 			} else {
 				onInsertBlockAfter( content );
@@ -176,7 +177,10 @@ function PostTitle( _, forwardedRef ) {
 				...create( { html: title } ),
 				...selection,
 			};
-			const newValue = insert( value, create( { html: content } ) );
+			const newValue = insert(
+				value,
+				create( { html: stripHTML( content ) } )
+			);
 			onUpdate( toHTMLString( { value: newValue } ) );
 			setSelection( {
 				start: newValue.start,