@wordpress/block-library 8.21.1-next.f8d8eceb.0 → 8.23.0

package/build-style/image/style.css

@@ -219,22 +219,28 @@
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -244,7 +250,7 @@
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 
@@ -254,7 +260,7 @@
   left: 0;
   z-index: 100000;
   overflow: hidden;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   box-sizing: border-box;
   visibility: hidden;
@@ -387,7 +393,7 @@
 }
 @keyframes lightbox-zoom-in {
   0% {
-    transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
   100% {
     transform: translate(-50%, -50%) scale(1, 1);
@@ -403,6 +409,6 @@
   }
   100% {
     visibility: hidden;
-    transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
 }

package/build-style/post-featured-image/editor-rtl.css

@@ -178,6 +178,15 @@
   height: 100%;
   width: 100%;
 }
+.wp-block-post-featured-image > a {
+  cursor: default;
+}
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
+  opacity: 1;
+  pointer-events: auto;
+}
 
 div[data-type="core/post-featured-image"] img {
   max-width: 100%;

package/build-style/post-featured-image/editor.css

@@ -178,6 +178,15 @@
   height: 100%;
   width: 100%;
 }
+.wp-block-post-featured-image > a {
+  cursor: default;
+}
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
+.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
+  opacity: 1;
+  pointer-events: auto;
+}
 
 div[data-type="core/post-featured-image"] img {
   max-width: 100%;

package/build-style/quote/style-rtl.css

@@ -104,4 +104,7 @@
 .wp-block-quote.is-large:where(:not(.is-style-plain)) footer {
   font-size: 1.125em;
   text-align: left;
+}
+.wp-block-quote > cite {
+  display: block;
 }

package/build-style/quote/style.css

@@ -104,4 +104,7 @@
 .wp-block-quote.is-large:where(:not(.is-style-plain)) footer {
   font-size: 1.125em;
   text-align: right;
+}
+.wp-block-quote > cite {
+  display: block;
 }

package/build-style/read-more/style-rtl.css

@@ -91,9 +91,9 @@
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }

package/build-style/read-more/style.css

@@ -91,9 +91,9 @@
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }

package/build-style/style-rtl.css

@@ -1672,22 +1672,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  left: 10px;
+  top: 16px;
+  left: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1697,7 +1703,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 
@@ -1707,7 +1713,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   right: 0;
   z-index: 100000;
   overflow: hidden;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   box-sizing: border-box;
   visibility: hidden;
@@ -1840,7 +1846,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 @keyframes lightbox-zoom-in {
   0% {
-    transform: translate(calc(-1*(-50vw + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
   100% {
     transform: translate(50%, -50%) scale(1, 1);
@@ -1856,7 +1862,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
   100% {
     visibility: hidden;
-    transform: translate(calc(-1*(-50vw + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
 }
 ol.wp-block-latest-comments {
@@ -3118,16 +3124,19 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   font-size: 1.125em;
   text-align: left;
 }
+.wp-block-quote > cite {
+  display: block;
+}
 
 .wp-block-read-more {
   display: block;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }
 

package/build-style/style.css

@@ -1686,22 +1686,28 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 .wp-lightbox-container button {
   opacity: 0;
   border: none;
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
   cursor: zoom-in;
-  width: 24px;
-  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
   position: absolute;
   z-index: 100;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   text-align: center;
   padding: 0;
-  border-radius: 10%;
+  border-radius: 4px;
+  transition: opacity 0.2s ease;
 }
 .wp-lightbox-container button:focus-visible {
-  outline: 5px auto #212121;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 5px;
+  outline: 3px auto rgba(90, 90, 90, 0.25);
+  outline: 3px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
 }
 .wp-lightbox-container button:hover {
   cursor: pointer;
@@ -1711,7 +1717,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   opacity: 1;
 }
 .wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
-  background: #000;
+  background-color: rgba(90, 90, 90, 0.25);
   border: none;
 }
 
@@ -1721,7 +1727,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   left: 0;
   z-index: 100000;
   overflow: hidden;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   box-sizing: border-box;
   visibility: hidden;
@@ -1854,7 +1860,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
 }
 @keyframes lightbox-zoom-in {
   0% {
-    transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
   100% {
     transform: translate(-50%, -50%) scale(1, 1);
@@ -1870,7 +1876,7 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
   100% {
     visibility: hidden;
-    transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+    transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
   }
 }
 ol.wp-block-latest-comments {
@@ -3150,16 +3156,19 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   font-size: 1.125em;
   text-align: right;
 }
+.wp-block-quote > cite {
+  display: block;
+}
 
 .wp-block-read-more {
   display: block;
   width: -moz-fit-content;
   width: fit-content;
 }
-.wp-block-read-more:not([style*=text-decoration]) {
+.wp-block-read-more:where(:not([style*="text-decoration"])) {
   text-decoration: none;
 }
-.wp-block-read-more:not([style*=text-decoration]):focus, .wp-block-read-more:not([style*=text-decoration]):active {
+.wp-block-read-more:where(:not([style*="text-decoration"])):focus, .wp-block-read-more:where(:not([style*="text-decoration"])):active {
   text-decoration: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.21.1-next.f8d8eceb.0",
+	"version": "8.23.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/api-fetch": "^6.41.1-next.f8d8eceb.0",
-		"@wordpress/autop": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/blob": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/block-editor": "^12.12.2-next.f8d8eceb.0",
-		"@wordpress/blocks": "^12.21.1-next.f8d8eceb.0",
-		"@wordpress/components": "^25.11.1-next.f8d8eceb.0",
-		"@wordpress/compose": "^6.21.1-next.f8d8eceb.0",
-		"@wordpress/core-data": "^6.21.1-next.f8d8eceb.0",
-		"@wordpress/data": "^9.14.1-next.f8d8eceb.0",
-		"@wordpress/date": "^4.44.1-next.f8d8eceb.0",
-		"@wordpress/deprecated": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/dom": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/element": "^5.21.1-next.f8d8eceb.0",
-		"@wordpress/escape-html": "^2.44.1-next.f8d8eceb.0",
-		"@wordpress/hooks": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/html-entities": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/i18n": "^4.44.1-next.f8d8eceb.0",
-		"@wordpress/icons": "^9.35.1-next.f8d8eceb.0",
-		"@wordpress/interactivity": "^2.5.2-next.f8d8eceb.0",
-		"@wordpress/keycodes": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/notices": "^4.12.1-next.f8d8eceb.0",
-		"@wordpress/primitives": "^3.42.1-next.f8d8eceb.0",
-		"@wordpress/private-apis": "^0.26.1-next.f8d8eceb.0",
-		"@wordpress/reusable-blocks": "^4.21.1-next.f8d8eceb.0",
-		"@wordpress/rich-text": "^6.21.1-next.f8d8eceb.0",
-		"@wordpress/server-side-render": "^4.21.1-next.f8d8eceb.0",
-		"@wordpress/url": "^3.45.1-next.f8d8eceb.0",
-		"@wordpress/viewport": "^5.21.1-next.f8d8eceb.0",
-		"@wordpress/wordcount": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/a11y": "^3.46.0",
+		"@wordpress/api-fetch": "^6.43.0",
+		"@wordpress/autop": "^3.46.0",
+		"@wordpress/blob": "^3.46.0",
+		"@wordpress/block-editor": "^12.14.0",
+		"@wordpress/blocks": "^12.23.0",
+		"@wordpress/components": "^25.12.0",
+		"@wordpress/compose": "^6.23.0",
+		"@wordpress/core-data": "^6.23.0",
+		"@wordpress/data": "^9.16.0",
+		"@wordpress/date": "^4.46.0",
+		"@wordpress/deprecated": "^3.46.0",
+		"@wordpress/dom": "^3.46.0",
+		"@wordpress/element": "^5.23.0",
+		"@wordpress/escape-html": "^2.46.0",
+		"@wordpress/hooks": "^3.46.0",
+		"@wordpress/html-entities": "^3.46.0",
+		"@wordpress/i18n": "^4.46.0",
+		"@wordpress/icons": "^9.37.0",
+		"@wordpress/interactivity": "^2.7.0",
+		"@wordpress/keycodes": "^3.46.0",
+		"@wordpress/notices": "^4.14.0",
+		"@wordpress/primitives": "^3.44.0",
+		"@wordpress/private-apis": "^0.28.0",
+		"@wordpress/reusable-blocks": "^4.23.0",
+		"@wordpress/rich-text": "^6.23.0",
+		"@wordpress/server-side-render": "^4.23.0",
+		"@wordpress/url": "^3.47.0",
+		"@wordpress/viewport": "^5.23.0",
+		"@wordpress/wordcount": "^3.46.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d8fd197e202b8104ffb1cb83048efd0a6c3faf4"
+	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
 }

package/src/block/edit.js

@@ -35,6 +35,7 @@ import { useRef, useMemo } from '@wordpress/element';
  */
 import { unlock } from '../lock-unlock';
 
+const { useLayoutClasses } = unlock( blockEditorPrivateApis );
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
 const useInferredLayout = ( blocks, parentLayout ) => {
@@ -71,7 +72,6 @@ export default function ReusableBlockEdit( {
 	attributes: { ref },
 	__unstableParentLayout: parentLayout,
 } ) {
-	const { useLayoutClasses } = unlock( blockEditorPrivateApis );
 	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
@@ -149,10 +149,11 @@ export default function ReusableBlockEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<TextControl
-						__nextHasNoMarginBottom
 						label={ __( 'Name' ) }
 						value={ title }
 						onChange={ setTitle }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 				</PanelBody>
 			</InspectorControls>

package/src/button/edit.js

@@ -33,11 +33,17 @@ import {
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
 	__experimentalGetElementClassName,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
+import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	createBlock,
+	cloneBlock,
+	getDefaultBlockName,
+} from '@wordpress/blocks';
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
@@ -47,6 +53,62 @@ const LINK_SETTINGS = [
 	},
 ];
 
+function useEnter( props ) {
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
+				return;
+			}
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			event.preventDefault();
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			const blockIndex = getBlockIndex( clientId );
+			const head = cloneBlock( {
+				...topParentListBlock,
+				innerBlocks: topParentListBlock.innerBlocks.slice(
+					0,
+					blockIndex
+				),
+			} );
+			const middle = createBlock( getDefaultBlockName() );
+			const after = topParentListBlock.innerBlocks.slice(
+				blockIndex + 1
+			);
+			const tail = after.length
+				? [
+						cloneBlock( {
+							...topParentListBlock,
+							innerBlocks: after,
+						} ),
+				  ]
+				: [];
+			replaceBlocks(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}
+
 function WidthPanel( { selectedWidth, setAttributes } ) {
 	function handleChange( newWidth ) {
 		// Check if we are toggling the width off
@@ -88,6 +150,7 @@ function ButtonEdit( props ) {
 		isSelected,
 		onReplace,
 		mergeBlocks,
+		clientId,
 	} = props;
 	const {
 		tagName,
@@ -164,6 +227,9 @@ function ButtonEdit( props ) {
 		[ url, opensInNewTab, nofollow ]
 	);
 
+	const useEnterRef = useEnter( { content: text, clientId } );
+	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
+
 	return (
 		<>
 			<div
@@ -175,7 +241,7 @@ function ButtonEdit( props ) {
 				} ) }
 			>
 				<RichText
-					ref={ richTextRef }
+					ref={ mergedRef }
 					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }

package/src/code/transforms.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { create, toHTMLString } from '@wordpress/rich-text';
 
 const transforms = {
 	from: [
@@ -12,10 +13,18 @@ const transforms = {
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/html', 'core/paragraph' ],
-			transform: ( { content } ) => {
+			blocks: [ 'core/paragraph' ],
+			transform: ( { content } ) =>
+				createBlock( 'core/code', { content } ),
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/html' ],
+			transform: ( { content: text } ) => {
 				return createBlock( 'core/code', {
-					content,
+					// The HTML is plain text (with plain line breaks), so
+					// convert it to rich text.
+					content: toHTMLString( { value: create( { text } ) } ),
 				} );
 			},
 		},
@@ -42,11 +51,8 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) => {
-				return createBlock( 'core/paragraph', {
-					content: content.replace( /\n/g, '<br>' ),
-				} );
-			},
+			transform: ( { content } ) =>
+				createBlock( 'core/paragraph', { content } ),
 		},
 	],
 };

package/src/comments/edit/comments-inspector-controls.js

@@ -22,6 +22,7 @@ export default function CommentsInspectorControls( {
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },

package/src/cover/edit/inspector-controls.js

@@ -319,6 +319,7 @@ export default function CoverInspectorControls( {
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },

package/src/details/edit.js

@@ -72,7 +72,6 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 						onChange={ ( newSummary ) =>
 							setAttributes( { summary: newSummary } )
 						}
-						multiline={ false }
 					/>
 				</summary>
 				{ innerBlocksProps.children }

package/src/form/edit.js

@@ -26,6 +26,8 @@ const ALLOWED_BLOCKS = [
 	'core/form-input',
 	'core/form-submit-button',
 	'core/form-submission-notification',
+	'core/group',
+	'core/columns',
 ];
 
 const TEMPLATE = [