@wordpress/block-editor 15.14.0 → 15.14.1-next.v.202603102151.0

package/build-style/style-rtl.css

@@ -3117,6 +3117,7 @@ iframe[name=editor-canvas] {
   position: absolute;
   width: 1px;
   word-wrap: normal !important;
+  word-break: normal !important;
 }
 
 .preset-input-control__wrapper > * {
@@ -3521,14 +3522,15 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-fields__container {
-  padding: 0 16px;
+  padding: 0 16px 16px;
 }
 .block-editor-block-fields__container:first-of-type {
   padding-block-start: 8px;
-  border-top: 1px solid #e0e0e0;
-}
-.block-editor-block-fields__container:last-of-type {
-  padding-block-end: 16px;
+  /*
+   * Add border for the entire content controls and remove the similar border
+   * for tools panel.
+   */
+  border-block-start: 1px solid #e0e0e0;
 }
 
 .block-editor-block-fields__header {
@@ -3542,6 +3544,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-fields__header-title {
   flex: 1;
+  /* Override the default margin on a h2 element. */
   margin: 0 !important;
 }
 

package/build-style/style.css

@@ -3119,6 +3119,7 @@ iframe[name=editor-canvas] {
   position: absolute;
   width: 1px;
   word-wrap: normal !important;
+  word-break: normal !important;
 }
 
 .preset-input-control__wrapper > * {
@@ -3523,14 +3524,15 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-fields__container {
-  padding: 0 16px;
+  padding: 0 16px 16px;
 }
 .block-editor-block-fields__container:first-of-type {
   padding-block-start: 8px;
-  border-top: 1px solid #e0e0e0;
-}
-.block-editor-block-fields__container:last-of-type {
-  padding-block-end: 16px;
+  /*
+   * Add border for the entire content controls and remove the similar border
+   * for tools panel.
+   */
+  border-block-start: 1px solid #e0e0e0;
 }
 
 .block-editor-block-fields__header {
@@ -3544,6 +3546,7 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-fields__header-title {
   flex: 1;
+  /* Override the default margin on a h2 element. */
   margin: 0 !important;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.14.0",
+	"version": "15.14.1-next.v.202603102151.0+59e17f9ec",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.41.0",
-		"@wordpress/api-fetch": "^7.41.0",
-		"@wordpress/base-styles": "^6.17.0",
-		"@wordpress/blob": "^4.41.0",
-		"@wordpress/block-serialization-default-parser": "^5.41.0",
-		"@wordpress/blocks": "^15.14.0",
-		"@wordpress/commands": "^1.41.0",
-		"@wordpress/components": "^32.3.0",
-		"@wordpress/compose": "^7.41.0",
-		"@wordpress/data": "^10.41.0",
-		"@wordpress/dataviews": "^13.0.0",
-		"@wordpress/date": "^5.41.0",
-		"@wordpress/deprecated": "^4.41.0",
-		"@wordpress/dom": "^4.41.0",
-		"@wordpress/element": "^6.41.0",
-		"@wordpress/escape-html": "^3.41.0",
-		"@wordpress/global-styles-engine": "^1.8.0",
-		"@wordpress/hooks": "^4.41.0",
-		"@wordpress/html-entities": "^4.41.0",
-		"@wordpress/i18n": "^6.14.0",
-		"@wordpress/icons": "^11.8.0",
-		"@wordpress/image-cropper": "^1.5.0",
-		"@wordpress/interactivity": "^6.41.0",
-		"@wordpress/is-shallow-equal": "^5.41.0",
-		"@wordpress/keyboard-shortcuts": "^5.41.0",
-		"@wordpress/keycodes": "^4.41.0",
-		"@wordpress/notices": "^5.41.0",
-		"@wordpress/preferences": "^4.41.0",
-		"@wordpress/priority-queue": "^3.41.0",
-		"@wordpress/private-apis": "^1.41.0",
-		"@wordpress/rich-text": "^7.41.0",
-		"@wordpress/style-engine": "^2.41.0",
-		"@wordpress/token-list": "^3.41.0",
-		"@wordpress/upload-media": "^0.26.0",
-		"@wordpress/url": "^4.41.0",
-		"@wordpress/warning": "^3.41.0",
-		"@wordpress/wordcount": "^4.41.0",
+		"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/api-fetch": "^7.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/blob": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/block-serialization-default-parser": "^5.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/blocks": "^15.14.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/commands": "^1.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/dataviews": "^13.1.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/date": "^5.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/deprecated": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/dom": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/escape-html": "^3.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/global-styles-engine": "^1.8.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/hooks": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/html-entities": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/image-cropper": "^1.5.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/interactivity": "^6.41.2-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/is-shallow-equal": "^5.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/keyboard-shortcuts": "^5.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/notices": "^5.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/preferences": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/priority-queue": "^3.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/rich-text": "^7.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/style-engine": "^2.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/token-list": "^3.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/upload-media": "^0.26.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/url": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/warning": "^3.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/wordcount": "^4.41.1-next.v.202603102151.0+59e17f9ec",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
+	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
 }

package/src/components/block-tools/index.js

@@ -92,6 +92,7 @@ export default function BlockTools( {
 		getBlockName,
 		isGroupable,
 		getEditedContentOnlySection,
+		canEditBlock,
 	} = unlock( useSelect( blockEditorStore ) );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
@@ -234,7 +235,10 @@ export default function BlockTools( {
 			if ( clientIds.length === 1 ) {
 				const isContentOnly =
 					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly';
-				const canRenameBlock = canRename && ! isContentOnly;
+				const canRenameBlock =
+					canRename &&
+					! isContentOnly &&
+					canEditBlock( clientIds[ 0 ] );
 				if ( canRenameBlock ) {
 					event.preventDefault();
 					setRenamingBlockClientId( clientIds[ 0 ] );
@@ -255,11 +259,14 @@ export default function BlockTools( {
 					return;
 				}
 
-				// Don't allow visibility toggle for blocks that
-				// are not in the default editing mode.
+				// Don't allow visibility toggle for blocks that are not in the
+				// default editing mode or when block editing is disabled
+				// (e.g. Revisions UI with isPreviewMode).
 				if (
 					clientIds.some(
-						( id ) => getBlockEditingMode( id ) !== 'default'
+						( id ) =>
+							getBlockEditingMode( id ) !== 'default' ||
+							! canEditBlock( id )
 					)
 				) {
 					return;

package/src/components/iframe/index.js

@@ -116,7 +116,6 @@ function getIframeSrc( resolvedAssets ) {
 	<head>
 		<meta charset="utf-8">
 		<base href="${ window.location.href }">
-		<script>window.frameElement._load()</script>
 		<style>
 			html{
 				height: auto !important;
@@ -168,9 +167,6 @@ function Iframe( {
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 
 	const setRef = useRefEffect( ( node ) => {
-		node._load = () => {
-			setIframeDocument( node.contentDocument );
-		};
 		let iFrameDocument;
 		// Prevent the default browser action for files dropped outside of dropzones.
 		function preventFileDropDefault( event ) {
@@ -218,6 +214,7 @@ function Iframe( {
 			const { contentDocument } = node;
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
+			setIframeDocument( contentDocument );
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
 
@@ -257,7 +254,7 @@ function Iframe( {
 		node.addEventListener( 'load', onLoad );
 
 		return () => {
-			delete node._load;
+			setIframeDocument( undefined );
 			node.removeEventListener( 'load', onLoad );
 			iFrameDocument?.removeEventListener(
 				'dragover',
@@ -284,13 +281,29 @@ function Iframe( {
 	} );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
-	const bodyRef = useMergeRefs( [
+
+	const unguardedBodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
 		contentRef,
 		writingFlowRef,
 		disabledRef,
 	] );
 
+	// Attach the body ref only when the iframe document and window are available.
+	// When an iframe element is moved in the DOM, like when reordering a list,
+	// its `window` object is destroyed and recreated, and the `defaultView` field is
+	// briefly `null`. We need to guard for such calls of the ref callbacks.
+	const bodyRef = useRefEffect(
+		( node ) => {
+			if ( node.ownerDocument.defaultView ) {
+				unguardedBodyRef( node );
+				return () => unguardedBodyRef( null );
+			}
+			return () => {};
+		},
+		[ unguardedBodyRef ]
+	);
+
 	const src = getIframeSrc( resolvedAssets );
 
 	// Make sure to not render the before and after focusable div elements in view

package/src/components/observe-typing/index.js

@@ -115,21 +115,15 @@ export function useMouseMoveTypingReset() {
  *   field, presses ESC or TAB, or moves the mouse in the document.
  */
 export function useTypingObserver() {
-	const { isTyping } = useSelect( ( select ) => {
-		const { isTyping: _isTyping } = select( blockEditorStore );
-		return {
-			isTyping: _isTyping(),
-		};
-	}, [] );
+	const isTyping = useSelect(
+		( select ) => select( blockEditorStore ).isTyping(),
+		[]
+	);
 	const { startTyping, stopTyping } = useDispatch( blockEditorStore );
 
 	const ref1 = useMouseMoveTypingReset();
 	const ref2 = useRefEffect(
 		( node ) => {
-			const { ownerDocument } = node;
-			const { defaultView } = ownerDocument;
-			const selection = defaultView.getSelection();
-
 			// Listeners to stop typing should only be added when typing.
 			// Listeners to start typing should only be added when not typing.
 			if ( isTyping ) {
@@ -147,7 +141,7 @@ export function useTypingObserver() {
 					// before the keydown event, wait until after current stack
 					// before evaluating whether typing is to be stopped. Otherwise,
 					// typing will re-start.
-					timerId = defaultView.setTimeout( () => {
+					timerId = node.ownerDocument.defaultView.setTimeout( () => {
 						if ( ! isTextField( target ) ) {
 							stopTyping();
 						}
@@ -174,6 +168,8 @@ export function useTypingObserver() {
 				 * uncollapsed (shift) selection.
 				 */
 				function stopTypingOnSelectionUncollapse() {
+					const selection =
+						node.ownerDocument.defaultView.getSelection();
 					if ( ! selection.isCollapsed ) {
 						stopTyping();
 					}
@@ -182,13 +178,13 @@ export function useTypingObserver() {
 				node.addEventListener( 'focus', stopTypingOnNonTextField );
 				node.addEventListener( 'keydown', stopTypingOnEscapeKey );
 
-				ownerDocument.addEventListener(
+				node.ownerDocument.addEventListener(
 					'selectionchange',
 					stopTypingOnSelectionUncollapse
 				);
 
 				return () => {
-					defaultView.clearTimeout( timerId );
+					node.ownerDocument.defaultView.clearTimeout( timerId );
 					node.removeEventListener(
 						'focus',
 						stopTypingOnNonTextField
@@ -197,7 +193,7 @@ export function useTypingObserver() {
 						'keydown',
 						stopTypingOnEscapeKey
 					);
-					ownerDocument.removeEventListener(
+					node.ownerDocument.removeEventListener(
 						'selectionchange',
 						stopTypingOnSelectionUncollapse
 					);

package/src/components/provider/index.js

@@ -20,6 +20,7 @@ import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import useMediaUploadSettings from './use-media-upload-settings';
+import { mediaUploadOnSuccessKey } from '../../store/private-keys';
 import { SelectionContext } from './selection-context';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
@@ -89,6 +90,7 @@ function shouldEnableClientSideMediaProcessing() {
  * or when adding a file to the editor via drag & drop.
  *
  * @param {WPDataRegistry} registry
+ * @param {Object}         settings          Block editor settings.
  * @param {Object}         $3                Parameters object passed to the function.
  * @param {Array}          $3.allowedTypes   Array with the types of media that can be uploaded, if unset all types are allowed.
  * @param {Object}         $3.additionalData Additional data to include in the request.
@@ -100,6 +102,7 @@ function shouldEnableClientSideMediaProcessing() {
  */
 function mediaUpload(
 	registry,
+	settings,
 	{
 		allowedTypes,
 		additionalData = {},
@@ -113,7 +116,10 @@ function mediaUpload(
 	void registry.dispatch( uploadStore ).addItems( {
 		files: Array.from( filesList ),
 		onChange: onFileChange,
-		onSuccess,
+		onSuccess: ( attachments ) => {
+			settings?.[ mediaUploadOnSuccessKey ]?.( attachments );
+			onSuccess?.( attachments );
+		},
 		onBatchSuccess,
 		onError: ( { message } ) => onError( message ),
 		additionalData,
@@ -146,16 +152,38 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		const isClientSideMediaEnabled =
 			shouldEnableClientSideMediaProcessing();
 
+		// Nested providers (e.g. from useBlockPreview) inherit settings
+		// where mediaUpload has already been replaced with the
+		// interceptor.  Detect this so we skip the replacement and
+		// MediaUploadProvider for them — see the longer comment below.
+		const isMediaUploadIntercepted =
+			!! _settings?.mediaUpload?.__isMediaUploadInterceptor;
+
 		const settings = useMemo( () => {
-			if ( isClientSideMediaEnabled && _settings?.mediaUpload ) {
+			if (
+				isClientSideMediaEnabled &&
+				_settings?.mediaUpload &&
+				! isMediaUploadIntercepted
+			) {
 				// Create a new object so that the original props.settings.mediaUpload is not modified.
+				const interceptor = mediaUpload.bind(
+					null,
+					registry,
+					_settings
+				);
+				interceptor.__isMediaUploadInterceptor = true;
 				return {
 					..._settings,
-					mediaUpload: mediaUpload.bind( null, registry ),
+					mediaUpload: interceptor,
 				};
 			}
 			return _settings;
-		}, [ _settings, registry, isClientSideMediaEnabled ] );
+		}, [
+			_settings,
+			registry,
+			isClientSideMediaEnabled,
+			isMediaUploadIntercepted,
+		] );
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )
@@ -215,7 +243,21 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 			</SelectionContext.Provider>
 		);
 
-		if ( isClientSideMediaEnabled ) {
+		// MediaUploadProvider writes the mediaUpload function from
+		// _settings into the shared upload-media store so the store can
+		// hand files off to the server. useMediaUploadSettings extracts
+		// mediaUpload from the original _settings prop — *before* the
+		// interceptor replacement above — so the store receives the
+		// real server-side upload function.
+		//
+		// Only the first (outermost) provider should do this.
+		// Nested providers (e.g. from useBlockPreview in
+		// core/post-template) inherit settings that already contain
+		// the interceptor, so their MediaUploadProvider would
+		// overwrite the store's server-side function with the
+		// interceptor, causing uploads to loop instead of reaching
+		// the server.
+		if ( isClientSideMediaEnabled && ! isMediaUploadIntercepted ) {
 			return (
 				<MediaUploadProvider
 					settings={ mediaUploadSettings }

package/src/components/responsive-block-control/style.scss

@@ -11,6 +11,7 @@
 	position: absolute;
 	width: 1px;
 	word-wrap: normal !important;
+	word-break: normal !important;
 }
 
 .block-editor-responsive-block-control {

package/src/hooks/block-fields/index.js

@@ -1,23 +1,17 @@
-/**
- * WordPress dependencies
- */
 import {
 	privateApis as blocksPrivateApis,
 	getBlockType,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { useDebounce } from '@wordpress/compose';
 import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { DataForm } from '@wordpress/dataviews';
 import { useContext, useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import BlockContext from '../../components/block-context';
@@ -55,16 +49,18 @@ function createConfiguredControl( ControlComponent, config = {} ) {
  * @param {string}   props.clientId      The clientId of the block.
  * @param {Object}   props.blockType     The blockType definition.
  * @param {Function} props.setAttributes Action to set the block's attributes.
- * @param {boolean}  props.isCollapsed   Whether the DataForm is rendered as 'collapsed' with only the first field
- *                                       displayed by default. When collapsed a dropdown is displayed to allow
- *                                       displaying additional fields. The block's title is displayed as the title.
- *                                       The collapsed mode is often used when multiple BlockForms are shown together.
+ * @param {boolean}  props.isMultiBlock  Whether forms for multiple blocks are shown at the same time.
+ *                                       This changes the behavior of the component:
+ *                                       - Only the first field is shown for each block.
+ *                                       - A dropdown is rendered allowing display of additional fields.
+ *                                       - Hovering the block fields highlights the block in the canvas
+ *                                       - Focusing a block field soft-selects the block in the canvas.
  */
 function BlockFields( {
 	clientId,
 	blockType,
 	setAttributes,
-	isCollapsed = false,
+	isMultiBlock = false,
 } ) {
 	const blockTitle = useBlockDisplayTitle( {
 		clientId,
@@ -103,9 +99,16 @@ function BlockFields( {
 		},
 		[ blockContext, clientId ]
 	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
+
+	const debouncedToggleBlockHighlight = useDebounce(
+		toggleBlockHighlight,
+		50
+	);
 
 	const computedForm = useMemo( () => {
-		if ( ! isCollapsed ) {
+		if ( ! isMultiBlock ) {
 			return blockType?.[ formKey ];
 		}
 
@@ -114,7 +117,7 @@ function BlockFields( {
 			...blockType?.[ formKey ],
 			fields: [ blockType?.[ formKey ]?.fields?.[ 0 ] ],
 		};
-	}, [ blockType, isCollapsed ] );
+	}, [ blockType, isMultiBlock ] );
 
 	const [ form, setForm ] = useState( computedForm );
 
@@ -182,10 +185,32 @@ function BlockFields( {
 	};
 
 	return (
-		<div className="block-editor-block-fields__container">
+		<div
+			className="block-editor-block-fields__container"
+			onMouseEnter={
+				isMultiBlock
+					? () => debouncedToggleBlockHighlight( clientId, true )
+					: undefined
+			}
+			onMouseLeave={ () =>
+				isMultiBlock
+					? debouncedToggleBlockHighlight( clientId, false )
+					: undefined
+			}
+			onFocus={
+				isMultiBlock
+					? () => {
+							selectBlock(
+								clientId,
+								null /* null to avoid focus on the block in the canvas */
+							);
+					  }
+					: undefined
+			}
+		>
 			<div className="block-editor-block-fields__header">
 				<HStack spacing={ 1 }>
-					{ isCollapsed && (
+					{ isMultiBlock && (
 						<>
 							<BlockIcon
 								className="block-editor-block-fields__header-icon"
@@ -203,7 +228,7 @@ function BlockFields( {
 							/>
 						</>
 					) }
-					{ ! isCollapsed && (
+					{ ! isMultiBlock && (
 						<h2 className="block-editor-block-fields__header-title">
 							{ __( 'Content' ) }
 						</h2>
@@ -236,7 +261,7 @@ export function BlockFieldsPanel( props ) {
 			<BlockFields
 				{ ...props }
 				blockType={ blockType }
-				isCollapsed={ isSelectionWithinCurrentSection }
+				isMultiBlock={ isSelectionWithinCurrentSection }
 			/>
 		</InspectorControls>
 	);

package/src/hooks/block-fields/styles.scss

@@ -5,17 +5,15 @@
 @use "./rich-text/styles.scss" as *;
 
 .block-editor-block-fields__container {
-	padding: 0 $grid-unit-20;
+	padding: 0 $grid-unit-20 $grid-unit-20;
 
 	&:first-of-type {
 		padding-block-start: $grid-unit-10;
-		// Add border for the entire content controls and remove the similar border
-		// for tools panel.
-		border-top: $border-width solid $gray-200;
-	}
-
-	&:last-of-type {
-		padding-block-end: $grid-unit-20;
+		/*
+		 * Add border for the entire content controls and remove the similar border
+		 * for tools panel.
+		 */
+		border-block-start: $border-width solid $gray-200;
 	}
 }
 
@@ -30,6 +28,6 @@
 
 .block-editor-block-fields__header-title {
 	flex: 1;
-	// Override the default margin on a h2 element.
+	/* Override the default margin on a h2 element. */
 	margin: 0 !important;
 }