@wordpress/block-library 10.1.0 → 10.2.0

package/src/gallery/use-dynamic-gallery.js

@@ -0,0 +1,275 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { pickRelevantMediaFiles } from './shared';
+import { getHrefAndDestination } from './utils';
+import { getUpdatedLinkTargetSettings } from '../image/utils';
+import {
+	getSourceQuery,
+	getDynamicSource,
+	ATTACHED_MEDIA,
+	DEFAULT_ORDERBY,
+	DEFAULT_ORDER,
+	MAX_IMAGES,
+} from './dynamic-source';
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Builds the attributes for a `core/image` block from a media (attachment)
+ * record, applying the gallery-wide settings that affect how the image renders.
+ *
+ * Used to construct the (non-persisted) image blocks previewed in dynamic mode,
+ * and the real image blocks created when a dynamic gallery is converted
+ * ("pinned") back to individual images. The frontend equivalent is
+ * `block_core_gallery_render_dynamic_image()` in `index.php`.
+ *
+ * @param {Object} media             A media object as returned by the REST API.
+ * @param {Object} galleryAttributes The gallery block's attributes.
+ * @return {Object} Attributes to pass to `createBlock( 'core/image', ... )`.
+ */
+function buildImageBlockAttributes( media, galleryAttributes ) {
+	const { sizeSlug, linkTo, linkTarget, aspectRatio } = galleryAttributes;
+	const hasAspectRatio = !! aspectRatio && aspectRatio !== 'auto';
+
+	return {
+		id: media.id,
+		...pickRelevantMediaFiles( media, sizeSlug ),
+		...getHrefAndDestination( media, linkTo ),
+		...getUpdatedLinkTargetSettings( linkTarget, galleryAttributes ),
+		sizeSlug,
+		// Raw caption, mirroring the frontend (`index.php`). Gap: the REST API
+		// exposes no caption run through `wp_get_attachment_caption`, so neither
+		// side applies that filter.
+		caption: media.caption?.raw || '',
+		alt: media.alt_text || '',
+		aspectRatio: hasAspectRatio ? aspectRatio : undefined,
+		// Pair `scale` with `aspectRatio` so the image crops rather than stretches,
+		// matching the image block's UI and the frontend (`index.php`).
+		scale: hasAspectRatio ? 'cover' : undefined,
+	};
+}
+
+/**
+ * Builds a set of `core/image` blocks from the resolved media, applying the
+ * gallery-wide settings. Each call mints fresh client IDs, so it can produce
+ * both the editor preview and the materialized inner blocks on convert.
+ *
+ * @param {Object[]} media             Media records from the REST API.
+ * @param {Object}   galleryAttributes The image-relevant gallery attributes.
+ * @return {Object[]} New `core/image` block instances.
+ */
+function buildImageBlocks( media, galleryAttributes ) {
+	return media.map( ( mediaItem ) =>
+		createBlock(
+			'core/image',
+			buildImageBlockAttributes( mediaItem, galleryAttributes )
+		)
+	);
+}
+
+/**
+ * Bundles the Gallery block's "dynamic mode" source resolution and actions.
+ *
+ * Dynamic mode resolves the gallery's images from a configured source
+ * (`attributes.dynamicContent`) instead of from manually-added inner image
+ * blocks. This hook centralizes the shared, single-instance pieces — the source
+ * resolution (one `getEntityRecords`), the editor-preview blocks, and the
+ * mode/ordering actions — out of the block's `edit` component. Transient UI
+ * concerns (e.g. the convert-to-dynamic confirmation) live in the components
+ * that own them.
+ *
+ * @param {Object}   options
+ * @param {Object}   options.attributes    The gallery block attributes.
+ * @param {Function} options.setAttributes The block's `setAttributes`.
+ * @param {string}   options.clientId      The block client ID.
+ * @param {?number}  options.postId        The current post ID (from block context).
+ * @param {?string}  options.postType      The current post type (from block context).
+ * @return {Object} Dynamic-mode source data and actions.
+ */
+export default function useDynamicGallery( {
+	attributes,
+	setAttributes,
+	clientId,
+	postId,
+	postType,
+} ) {
+	const { dynamicContent } = attributes;
+
+	// Whether dynamic mode makes sense in the current editing context. A
+	// `postType` means the block will resolve against some post at render time —
+	// either a concrete post (post/page editor, Query Loop item) or a post-bound
+	// template (`single`, `page`) whose post is filled in by `get_the_ID()` on the
+	// frontend (see `index.php`). Without it (template part, pattern, generic
+	// template) there's no post to attach to, so the source can never resolve.
+	const canUseDynamicSource = !! postType;
+
+	// The descriptor for the configured source (its `title`/`description`/
+	// `emptyMessage`), resolved once here so consumers read the copy without
+	// re-deriving it from `dynamicContent`. `undefined` for an unknown source.
+	const sourceDescriptor = getDynamicSource( dynamicContent?.source );
+
+	// Current source ordering, falling back to the shared defaults when unset.
+	const sourceOrderby = dynamicContent?.args?.orderBy ?? DEFAULT_ORDERBY;
+	const sourceOrder = dynamicContent?.args?.order ?? DEFAULT_ORDER;
+
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+
+	// Resolve the configured source to a media query. `null` (static mode, or an
+	// unresolvable source) short-circuits the select below so no request fires.
+	const query = useMemo(
+		() =>
+			dynamicContent
+				? getSourceQuery( dynamicContent, { postId } )
+				: null,
+		[ dynamicContent, postId ]
+	);
+
+	const { dynamicMedia, dynamicMediaTotal, isResolvingDynamic } = useSelect(
+		( select ) => {
+			if ( ! query ) {
+				return {
+					dynamicMedia: EMPTY_ARRAY,
+					dynamicMediaTotal: 0,
+					isResolvingDynamic: false,
+				};
+			}
+			const selectorArgs = [ 'postType', 'attachment', query ];
+			return {
+				dynamicMedia:
+					select( coreStore ).getEntityRecords( ...selectorArgs ) ??
+					EMPTY_ARRAY,
+				// Total matching attachments (the `X-WP-Total` header), which the
+				// query's `per_page` cap doesn't bound — so it reveals when the
+				// post has more attached images than are shown.
+				dynamicMediaTotal:
+					select( coreStore ).getEntityRecordsTotalItems(
+						...selectorArgs
+					) ?? 0,
+				isResolvingDynamic: ! select( coreStore ).hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ query ]
+	);
+
+	// The source caps results at `MAX_IMAGES` (matching the frontend), so flag
+	// when the post has more attached images than the gallery can show.
+	const hasMoreImagesThanCap = dynamicMediaTotal > MAX_IMAGES;
+
+	// The only gallery settings that affect how an image renders, and so the
+	// only ones `buildImageBlockAttributes` reads. Depending on this narrowed
+	// set (rather than the whole `attributes` object) keeps the preview from
+	// rebuilding on unrelated edits, e.g. typing in the gallery caption.
+	const { sizeSlug, linkTo, linkTarget, aspectRatio } = attributes;
+	const imageAttributes = useMemo(
+		() => ( { sizeSlug, linkTo, linkTarget, aspectRatio } ),
+		[ sizeSlug, linkTo, linkTarget, aspectRatio ]
+	);
+
+	// The (non-persisted) `core/image` blocks used for the editor preview.
+	// Rebuilt when the resolved media or an image-relevant setting changes.
+	const dynamicImageBlocks = useMemo(
+		() => buildImageBlocks( dynamicMedia, imageAttributes ),
+		[ dynamicMedia, imageAttributes ]
+	);
+
+	// Context the gallery provides to its (previewed) image blocks.
+	const galleryContext = useMemo(
+		() => ( {
+			allowResize: attributes.allowResize ?? false,
+			imageCrop: attributes.imageCrop,
+			fixedHeight: attributes.fixedHeight,
+			navigationButtonType: attributes.navigationButtonType,
+		} ),
+		[
+			attributes.allowResize,
+			attributes.imageCrop,
+			attributes.fixedHeight,
+			attributes.navigationButtonType,
+		]
+	);
+
+	// Switches the gallery into dynamic mode, displaying images attached to the
+	// current post. Clearing the inner blocks removes the manually-added images:
+	// they're the gallery's image data, so there's nothing else to reset. The
+	// legacy `images`/`ids` attributes aren't touched — they're back-compat shims
+	// for the pre-innerBlocks format (see `deprecated.js`/`transforms.js`), empty
+	// on any gallery reachable here.
+	function enableDynamicMode() {
+		setAttributes( { dynamicContent: { source: ATTACHED_MEDIA } } );
+		replaceInnerBlocks( clientId, [] );
+	}
+
+	// "Pins" a dynamic gallery: materializes the currently-resolved media as
+	// real, editable image blocks and leaves dynamic mode.
+	function convertToStatic() {
+		// Build fresh blocks rather than reusing the preview's `dynamicImageBlocks`
+		// so the materialized inner blocks get their own client IDs, distinct from
+		// the (disabled) preview instances.
+		replaceInnerBlocks(
+			clientId,
+			buildImageBlocks( dynamicMedia, imageAttributes )
+		);
+		setAttributes( { dynamicContent: undefined } );
+	}
+
+	// Updates the source ordering within `dynamicContent.args`. Passing
+	// `undefined` (or the default order) strips the keys so they aren't
+	// persisted redundantly and the ToolsPanel item reads as unset.
+	function setSourceOrder( nextOrderby, nextOrder ) {
+		const nextArgs = { ...dynamicContent?.args };
+		delete nextArgs.orderBy;
+		delete nextArgs.order;
+		if (
+			nextOrderby !== undefined &&
+			( nextOrderby !== DEFAULT_ORDERBY || nextOrder !== DEFAULT_ORDER )
+		) {
+			nextArgs.orderBy = nextOrderby;
+			nextArgs.order = nextOrder;
+		}
+		const nextSource = { ...dynamicContent };
+		if ( Object.keys( nextArgs ).length ) {
+			nextSource.args = nextArgs;
+		} else {
+			delete nextSource.args;
+		}
+		setAttributes( { dynamicContent: nextSource } );
+	}
+
+	// Resets the source to its bare form: keeps the source kind, drops its args.
+	function resetSource() {
+		setAttributes( {
+			dynamicContent: { source: dynamicContent.source },
+		} );
+	}
+
+	return {
+		dynamicContent,
+		canUseDynamicSource,
+		sourceDescriptor,
+		hasMoreImagesThanCap,
+		dynamicMediaTotal,
+		sourceOrderby,
+		sourceOrder,
+		dynamicMedia,
+		dynamicImageBlocks,
+		isResolvingDynamic,
+		galleryContext,
+		enableDynamicMode,
+		convertToStatic,
+		setSourceOrder,
+		resetSource,
+	};
+}

package/src/gallery/variations.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ATTACHED_MEDIA } from './dynamic-source';
+
+const variations = [
+	{
+		name: 'dynamic-gallery',
+		title: __( 'Dynamic Gallery' ),
+		description: __(
+			'Display images from a source, such as those attached to the current post.'
+		),
+		attributes: {
+			dynamicContent: { source: ATTACHED_MEDIA },
+		},
+		// Match any gallery that has a dynamic source configured, regardless of
+		// the specific source or options, so the variation's title and
+		// description describe the block whenever it runs in dynamic mode.
+		isActive: ( blockAttributes ) => !! blockAttributes.dynamicContent,
+		// No scopes for now. While dynamic mode only supports the "attached to the
+		// current post" source, `'inserter'` is intentionally omitted: a dedicated
+		// inserter entry would surface in post-less contexts (templates, template
+		// parts, synced patterns) where there's no post to resolve images from. The
+		// entry point is instead the inspector toggle on a regular Gallery.
+		// `isActive` still relabels the block card to "Dynamic Gallery" regardless
+		// of scope. Revisit adding `'inserter'` in a follow-up as the feature grows
+		// beyond the post-attached source.
+		scope: [],
+	},
+];
+
+export default variations;

package/src/group/edit.js

@@ -12,7 +12,6 @@ import {
 } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -132,13 +131,13 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 				clientId={ clientId }
 			/>
 			{ showPlaceholder && (
-				<View>
+				<div>
 					{ innerBlocksProps.children }
 					<GroupPlaceHolder
 						name={ name }
 						onSelect={ selectVariation }
 					/>
-				</View>
+				</div>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...innerBlocksProps } />

package/src/group/transforms.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, cloneSanitizedBlock } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -29,13 +29,9 @@ const transforms = {
 				// to be replaced in the switchToBlockType call thereby meaning they
 				// are removed both from their original location and within the
 				// new group block.
-				const groupInnerBlocks = blocks.map( ( block ) => {
-					return createBlock(
-						block.name,
-						block.attributes,
-						block.innerBlocks
-					);
-				} );
+				const groupInnerBlocks = blocks.map( ( block ) =>
+					cloneSanitizedBlock( block )
+				);
 
 				return createBlock(
 					'core/group',

package/src/heading/edit.js

@@ -64,7 +64,14 @@ function HeadingEdit( props ) {
 
 		// Remove anchor map when block unmounts.
 		return () => setAnchor( clientId, null );
-	}, [ anchor, content, clientId, canGenerateAnchors ] );
+	}, [
+		anchor,
+		content,
+		clientId,
+		canGenerateAnchors,
+		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
 
 	const onContentChange = ( value ) => {
 		const newAttrs = { content: value };
@@ -80,19 +87,17 @@ function HeadingEdit( props ) {
 	};
 
 	return (
-		<>
-			<RichText
-				identifier="content"
-				tagName={ tagName }
-				value={ content }
-				onChange={ onContentChange }
-				onMerge={ mergeBlocks }
-				onReplace={ onReplace }
-				onRemove={ () => onReplace( [] ) }
-				placeholder={ placeholder || __( 'Heading' ) }
-				{ ...blockProps }
-			/>
-		</>
+		<RichText
+			identifier="content"
+			tagName={ tagName }
+			value={ content }
+			onChange={ onContentChange }
+			onMerge={ mergeBlocks }
+			onReplace={ onReplace }
+			onRemove={ () => onReplace( [] ) }
+			placeholder={ placeholder || __( 'Heading' ) }
+			{ ...blockProps }
+		/>
 	);
 }
 

package/src/home-link/index.php

@@ -73,7 +73,7 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$colors['css_classes']
 	);
 
-	$style_attribute = ( $colors['inline_styles'] );
+	$style_attribute = $colors['inline_styles'];
 	$classes[]       = 'wp-block-navigation-item';
 
 	if ( is_front_page() ) {

package/src/html/README.md

@@ -15,7 +15,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
-| `content` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `raw`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `content` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
 
 ## Supports
 
@@ -26,6 +26,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`listView`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#listview): `true`
 - `customCSS`: `false`
 - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
 

package/src/html/block.json

@@ -10,8 +10,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "raw",
-			"role": "content"
+			"role": "local"
 		}
 	},
 	"supports": {
@@ -21,6 +20,7 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"listView": true,
 		"customCSS": false,
 		"visibility": false
 	},

package/src/html/edit.js

@@ -2,13 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	BlockIcon,
 	InspectorControls,
 	useBlockProps,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { parse, serialize, getBlockContent } from '@wordpress/blocks';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import {
 	ToolbarButton,
 	ToolbarGroup,
@@ -21,17 +26,87 @@ import { code } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Preview from './preview';
+import { unlock } from '../lock-unlock';
 import HTMLEditModal from './modal';
 
-export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
+const { InnerContent } = unlock( blockEditorPrivateApis );
+
+export default function HTMLEdit( { clientId, attributes } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const registry = useRegistry();
+	const { updateBlock, replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const content = useSelect(
+		( select ) => {
+			const block = select( blockEditorStore ).getBlock( clientId );
+			return block ? getBlockContent( block ) : '';
+		},
+		[ clientId ]
+	);
 	const blockProps = useBlockProps( {
 		className: 'block-library-html__edit',
 	} );
 
+	// Re-parse the edited content: static HTML becomes the block's
+	// `innerContent` fragments and `<!-- wp:* -->` delimited segments become
+	// inner blocks mounted at their positions within the static markup.
+	const onUpdate = ( nextContent ) => {
+		if ( nextContent === content ) {
+			return;
+		}
+
+		const [ parsedBlock ] = parse(
+			`<!-- wp:html -->\n${ nextContent }\n<!-- /wp:html -->`
+		);
+		const nextInnerBlocks = parsedBlock?.innerBlocks ?? [];
+		const prevInnerBlocks = registry
+			.select( blockEditorStore )
+			.getBlocks( clientId );
+		// Keep the existing inner blocks, and thereby their client IDs and
+		// selection, when their markup is unchanged — e.g. when only the
+		// surrounding static HTML was edited.
+		const innerBlocksUnchanged =
+			prevInnerBlocks.length === nextInnerBlocks.length &&
+			prevInnerBlocks.every(
+				( block, index ) =>
+					serialize( block ) === serialize( nextInnerBlocks[ index ] )
+			);
+
+		registry.batch( () => {
+			updateBlock( clientId, {
+				innerContent:
+					parsedBlock?.innerContent ??
+					( nextContent ? [ nextContent ] : [] ),
+			} );
+			if ( ! innerBlocksUnchanged ) {
+				replaceInnerBlocks( clientId, nextInnerBlocks, false );
+			}
+		} );
+	};
+
+	// Migrate the deprecated `content` attribute. The block's markup now lives
+	// in its inner content, but a block created via `createBlock( 'core/html',
+	// { content } )` still arrives with a `content` attribute. As soon as it
+	// loads, move that markup into the block's inner content and clear the
+	// attribute.
+	useEffect( () => {
+		if ( ! attributes.content ) {
+			return;
+		}
+
+		deprecated( 'The content attribute on the Custom HTML block', {
+			since: '7.1',
+			alternative: 'inner content',
+		} );
+
+		updateBlock( clientId, {
+			attributes: { content: undefined },
+			innerContent: [ attributes.content ],
+		} );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ attributes.content ] );
+
 	// Show placeholder when content is empty
-	if ( ! attributes.content?.trim() ) {
+	if ( ! content?.trim() ) {
 		return (
 			<div { ...blockProps }>
 				<Placeholder
@@ -52,8 +127,8 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				{ isModalOpen && (
 					<HTMLEditModal
 						onRequestClose={ () => setIsModalOpen( false ) }
-						content={ attributes.content }
-						setAttributes={ setAttributes }
+						content={ content }
+						onUpdate={ onUpdate }
 					/>
 				) }
 			</div>
@@ -70,12 +145,9 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			<InspectorControls>
-				<VStack
-					className="block-editor-block-inspector-edit-contents"
-					expanded
-				>
+				<VStack className="block-library-html__edit-code" expanded>
 					<Button
-						className="block-editor-block-inspector-edit-contents__button"
+						className="block-library-html__edit-code-button"
 						__next40pxDefaultSize
 						variant="secondary"
 						onClick={ () => setIsModalOpen( true ) }
@@ -84,12 +156,12 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</Button>
 				</VStack>
 			</InspectorControls>
-			<Preview content={ attributes.content } isSelected={ isSelected } />
+			<InnerContent clientId={ clientId } />
 			{ isModalOpen && (
 				<HTMLEditModal
 					onRequestClose={ () => setIsModalOpen( false ) }
-					content={ attributes.content }
-					setAttributes={ setAttributes }
+					content={ content }
+					onUpdate={ onUpdate }
 				/>
 			) }
 		</div>

package/src/html/editor.scss

@@ -12,6 +12,16 @@
 	}
 }
 
+// The "Edit code" button in the inspector renders inside the tabs panel, so
+// it needs spacing on all sides, including against the tab list above it.
+.block-library-html__edit-code {
+	margin: $grid-unit-20;
+
+	.block-library-html__edit-code-button {
+		justify-content: center;
+	}
+}
+
 // Modal styles
 .block-library-html__modal {
 

package/src/html/index.js

@@ -20,12 +20,11 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
-		attributes: {
-			content:
-				'<marquee>' +
+		innerContent: [
+			'<marquee>' +
 				__( 'Welcome to the wonderful world of blocks…' ) +
 				'</marquee>',
-		},
+		],
 	},
 	edit,
 	save,

package/src/html/modal.js

@@ -26,11 +26,7 @@ import { parseContent, serializeContent } from './utils';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-export default function HTMLEditModal( {
-	onRequestClose,
-	content,
-	setAttributes,
-} ) {
+export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 	// Parse content into separate sections and use as initial state
 	const { html, css, js } = parseContent( content );
 	const [ editedHtml, setEditedHtml ] = useState( html );
@@ -56,13 +52,13 @@ export default function HTMLEditModal( {
 	const handleUpdate = () => {
 		// For users without unfiltered_html capability, strip CSS and JS content
 		// to prevent kses from leaving broken content
-		setAttributes( {
-			content: serializeContent( {
+		onUpdate(
+			serializeContent( {
 				html: editedHtml,
 				css: canUserUseUnfilteredHTML ? editedCss : '',
 				js: canUserUseUnfilteredHTML ? editedJs : '',
-			} ),
-		} );
+			} )
+		);
 	};
 	const handleUpdateAndClose = () => {
 		handleUpdate();