@wordpress/block-library 7.15.1-next.4d3b314fd5.0 → 7.17.0

package/build-style/video/editor.css

@@ -74,6 +74,28 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-video.wp-block-video.is-selected .components-placeholder {
+  color: #1e1e1e;
+  background-color: #fff;
+  box-shadow: inset 0 0 0 1px #1e1e1e;
+  border: none;
+  border-radius: 2px;
+}
+.wp-block-video.wp-block-video.is-selected .components-placeholder > svg {
+  opacity: 0;
+}
+.wp-block-video.wp-block-video.is-selected .components-placeholder .components-placeholder__illustration {
+  display: none;
+}
+.wp-block-video.wp-block-video.is-selected .components-placeholder::before {
+  opacity: 0;
+}
+.wp-block-video.wp-block-video .components-placeholder__label,
+.wp-block-video.wp-block-video .components-placeholder__instructions,
+.wp-block-video.wp-block-video .components-button {
+  transition: none;
+}
+
 .wp-block[data-align=center] > .wp-block-video {
   text-align: center;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.15.1-next.4d3b314fd5.0",
+	"version": "7.17.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,32 +31,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
-		"@wordpress/autop": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/blob": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/block-editor": "^10.1.1-next.4d3b314fd5.0",
-		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
-		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
-		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/core-data": "^5.1.1-next.4d3b314fd5.0",
-		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
-		"@wordpress/date": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/primitives": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/reusable-blocks": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/rich-text": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/server-side-render": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
-		"@wordpress/viewport": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/a11y": "^3.20.0",
+		"@wordpress/api-fetch": "^6.17.0",
+		"@wordpress/autop": "^3.20.0",
+		"@wordpress/blob": "^3.20.0",
+		"@wordpress/block-editor": "^10.3.0",
+		"@wordpress/blocks": "^11.19.0",
+		"@wordpress/components": "^21.3.0",
+		"@wordpress/compose": "^5.18.0",
+		"@wordpress/core-data": "^5.3.0",
+		"@wordpress/data": "^7.4.0",
+		"@wordpress/date": "^4.20.0",
+		"@wordpress/deprecated": "^3.20.0",
+		"@wordpress/dom": "^3.20.0",
+		"@wordpress/element": "^4.18.0",
+		"@wordpress/hooks": "^3.20.0",
+		"@wordpress/html-entities": "^3.20.0",
+		"@wordpress/i18n": "^4.20.0",
+		"@wordpress/icons": "^9.11.0",
+		"@wordpress/keycodes": "^3.20.0",
+		"@wordpress/notices": "^3.20.0",
+		"@wordpress/primitives": "^3.18.0",
+		"@wordpress/reusable-blocks": "^3.18.0",
+		"@wordpress/rich-text": "^5.18.0",
+		"@wordpress/server-side-render": "^3.18.0",
+		"@wordpress/url": "^3.21.0",
+		"@wordpress/viewport": "^4.18.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
 }

package/src/archives/edit.js

@@ -66,6 +66,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 				<Disabled>
 					<ServerSideRender
 						block="core/archives"
+						skipBlockSupportAttributes
 						attributes={ attributes }
 					/>
 				</Disabled>

package/src/archives/style.scss

@@ -1,3 +1,8 @@
+.wp-block-archives {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
+
 .wp-block-archives-dropdown {
 	label {
 		display: block;

package/src/avatar/index.php

@@ -127,7 +127,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			$label = 'aria-label="' . sprintf( esc_attr__( '(%s website link, opens in a new tab)' ), $comment->comment_author ) . '"';
 		}
 		// translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
-		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', $comment->comment_author_url, esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
+		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
 	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 }

package/src/categories/index.php

@@ -14,7 +14,7 @@
  */
 function render_block_core_categories( $attributes ) {
 	static $block_id = 0;
-	$block_id++;
+	++$block_id;
 
 	$args = array(
 		'echo'         => false,

package/src/code/style.scss

@@ -1,8 +1,13 @@
-// Provide a minimum of overflow handling and ensure the code markup inherits
-// the font-family set on pre.
-.wp-block-code code {
-	display: block;
-	font-family: inherit;
-	overflow-wrap: break-word;
-	white-space: pre-wrap;
+.wp-block-code {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	// Provide a minimum of overflow handling and ensure the code markup inherits
+	// the font-family set on pre.
+	code {
+		display: block;
+		font-family: inherit;
+		overflow-wrap: break-word;
+		white-space: pre-wrap;
+	}
 }

package/src/code/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Code renders given text without crashing 1`] = `
+"<!-- wp:code -->
+<pre class=\\"wp-block-code\\"><code>Sample text</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Code renders without crashing 1`] = `
+"<!-- wp:code -->
+<pre class=\\"wp-block-code\\"><code></code></pre>
+<!-- /wp:code -->"
+`;

package/src/code/test/edit.native.js

@@ -1,51 +1,65 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { TextInput } from 'react-native';
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	addBlock,
+	getBlock,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
-
-const Code = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 describe( 'Code', () => {
 	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
+		// Register all core blocks
+		registerCoreBlocks();
 	} );
 
 	afterAll( () => {
-		unregisterBlockType( name );
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
 	} );
 
-	it( 'renders without crashing', () => {
-		const component = renderer.create(
-			<Code attributes={ { content: '' } } />
-		);
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+	it( 'renders without crashing', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Code' );
+
+		// Get block
+		const codeBlock = await getBlock( screen, 'Code' );
+		expect( codeBlock ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = renderer.create(
-			<Code attributes={ { content: 'sample text' } } />
-		);
-		const testInstance = component.root;
-		const textInput = testInstance.findByType( TextInput );
-		expect( textInput ).toBeTruthy();
-		expect( textInput.props.value ).toBe( 'sample text' );
+	it( 'renders given text without crashing', async () => {
+		const initialHtml = `<!-- wp:code -->
+		<pre class="wp-block-code"><code>Sample text</code></pre>
+		<!-- /wp:code -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+		const { getByDisplayValue } = screen;
+
+		// Get block
+		const codeBlock = await getBlock( screen, 'Code' );
+		expect( codeBlock ).toBeVisible();
+		fireEvent.press( codeBlock );
+
+		// Get initial text
+		const codeBlockText = getByDisplayValue( 'Sample text' );
+		expect( codeBlockText ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );

package/src/code/utils.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { flow } from 'lodash';
+import { pipe } from '@wordpress/compose';
 
 /**
  * Escapes ampersands, shortcodes, and links.
@@ -10,7 +10,7 @@ import { flow } from 'lodash';
  * @return {string} The given content with some characters escaped.
  */
 export function escape( content ) {
-	return flow(
+	return pipe(
 		escapeOpeningSquareBrackets,
 		escapeProtocolInIsolatedUrls
 	)( content || '' );

package/src/comment-author-name/index.php

@@ -34,7 +34,7 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 	$comment_author     = get_comment_author( $comment );
 	$link               = get_comment_author_url( $comment );
 
-	if ( ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
+	if ( ! empty( $link ) && ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
 		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
 	}
 	if ( '0' === $comment->comment_approved && ! $show_pending_links ) {

package/src/comment-reply-link/index.php

@@ -34,7 +34,7 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	// Compute comment's depth iterating over its ancestors.
 	while ( ! empty( $parent_id ) ) {
-		$depth++;
+		++$depth;
 		$parent_id = get_comment( $parent_id )->comment_parent;
 	}
 

package/src/comment-template/edit.js

@@ -37,6 +37,7 @@ const TEMPLATE = [
  *
  * @param {Object}  settings                       Discussion Settings.
  * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
+ * @param {boolean} [settings.pageComments]        - Enable break comments into pages setting.
  * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
  * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.
  *
@@ -45,42 +46,53 @@ const TEMPLATE = [
  */
 const getCommentsPlaceholder = ( {
 	perPage,
+	pageComments,
 	threadComments,
 	threadCommentsDepth,
 } ) => {
-	// In case that `threadCommentsDepth` is falsy, we default to a somewhat
-	// arbitrary value of 3.
-	// In case that the value is set but larger than 3 we truncate it to 3.
-	const commentsDepth = Math.min( threadCommentsDepth || 3, 3 );
+	// Limit commentsDepth to 3
+	const commentsDepth = ! threadComments
+		? 1
+		: Math.min( threadCommentsDepth, 3 );
 
-	// We set a limit in order not to overload the editor of empty comments.
-	const defaultCommentsToShow =
-		perPage <= commentsDepth ? perPage : commentsDepth;
-	if ( ! threadComments || defaultCommentsToShow === 1 ) {
-		// If displaying threaded comments is disabled, we only show one comment
-		// A commentId is negative in order to avoid conflicts with the actual comments.
-		return [ { commentId: -1, children: [] } ];
-	} else if ( defaultCommentsToShow === 2 ) {
-		return [
-			{
-				commentId: -1,
-				children: [ { commentId: -2, children: [] } ],
-			},
-		];
-	}
+	const buildChildrenComment = ( commentsLevel ) => {
+		// Render children comments until commentsDepth is reached
+		if ( commentsLevel < commentsDepth ) {
+			const nextLevel = commentsLevel + 1;
 
-	// In case that the value is set but larger than 3 we truncate it to 3.
-	return [
-		{
-			commentId: -1,
-			children: [
+			return [
 				{
-					commentId: -2,
-					children: [ { commentId: -3, children: [] } ],
+					commentId: -( commentsLevel + 3 ),
+					children: buildChildrenComment( nextLevel ),
 				},
-			],
-		},
+			];
+		}
+		return [];
+	};
+
+	// Add the first comment and its children
+	const placeholderComments = [
+		{ commentId: -1, children: buildChildrenComment( 1 ) },
 	];
+
+	// Add a second comment unless the break comments setting is active and set to less than 2, and there is one nested comment max
+	if ( ( ! pageComments || perPage >= 2 ) && commentsDepth < 3 ) {
+		placeholderComments.push( {
+			commentId: -2,
+			children: [],
+		} );
+	}
+
+	// Add a third comment unless the break comments setting is active and set to less than 3, and there aren't nested comments
+	if ( ( ! pageComments || perPage >= 3 ) && commentsDepth < 2 ) {
+		placeholderComments.push( {
+			commentId: -3,
+			children: [],
+		} );
+	}
+
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	return placeholderComments;
 };
 
 /**
@@ -114,12 +126,11 @@ function CommentTemplateInnerBlocks( {
 				: null }
 
 			{ /* To avoid flicker when switching active block contexts, a preview
-			is ALWAYS rendered and the preview for the active block is hidden.
-			This ensures that when switching the active block, the component is not
-			mounted again but rather it only toggles the `isHidden` prop.
-
-			The same strategy is used for preventing the flicker in the Post Template
-			block. */ }
+			 is ALWAYS rendered and the preview for the active block is hidden.
+			 This ensures that when switching the active block, the component is not
+			 mounted again but rather it only toggles the `isHidden` prop.
+			 The same strategy is used for preventing the flicker in the Post Template
+			 block. */ }
 			<MemoizedCommentTemplatePreview
 				blocks={ blocks }
 				commentId={ comment.commentId }
@@ -239,6 +250,7 @@ export default function CommentTemplateEdit( {
 		threadCommentsDepth,
 		threadComments,
 		commentsPerPage,
+		pageComments,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalDiscussionSettings;
@@ -282,6 +294,7 @@ export default function CommentTemplateEdit( {
 	if ( ! postId ) {
 		commentTree = getCommentsPlaceholder( {
 			perPage: commentsPerPage,
+			pageComments,
 			threadComments,
 			threadCommentsDepth,
 		} );

package/src/comment-template/index.php

@@ -50,13 +50,13 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		// comments.
 		if ( ! empty( $children ) && ! empty( $thread_comments ) ) {
 			if ( $comment_depth < $thread_comments_depth ) {
-				$comment_depth += 1;
+				++$comment_depth;
 				$inner_content  = block_core_comment_template_render_comments(
 					$children,
 					$block
 				);
 				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
-				$comment_depth -= 1;
+				--$comment_depth;
 			} else {
 				$inner_content  = block_core_comment_template_render_comments(
 					$children,
@@ -70,7 +70,6 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 	}
 
 	return $content;
-
 }
 
 /**

package/src/comments/block.json

@@ -18,7 +18,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"html": false,
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -28,6 +27,11 @@
 				"link": true
 			}
 		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/comments/edit/placeholder.js

@@ -5,7 +5,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
-import { useDisabled } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,13 +21,8 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 				.__experimentalDiscussionSettings
 	);
 
-	const disabledRef = useDisabled();
-
 	return (
-		<div
-			className="wp-block-comments__legacy-placeholder"
-			ref={ disabledRef }
-		>
+		<div className="wp-block-comments__legacy-placeholder" inert="true">
 			<h3>
 				{
 					/* translators: %s: Post title. */

package/src/comments/style.scss

@@ -1,5 +1,7 @@
 /* Styles for backwards compatibility with the legacy `post-comments` block */
 .wp-block-post-comments {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	/* utility classes */
 	.alignleft {

package/src/comments-title/edit.js

@@ -11,11 +11,13 @@ import {
 	BlockControls,
 	useBlockProps,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -39,9 +41,30 @@ export default function Edit( {
 		} ),
 	} );
 
+	const {
+		threadCommentsDepth,
+		threadComments,
+		commentsPerPage,
+		pageComments,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().__experimentalDiscussionSettings;
+	} );
+
 	useEffect( () => {
 		if ( isSiteEditor ) {
-			setCommentsCount( 3 );
+			// Match the number of comments that will be shown in the comment-template/edit.js placeholder
+
+			const nestedCommentsNumber = threadComments
+				? Math.min( threadCommentsDepth, 3 ) - 1
+				: 0;
+			const topLevelCommentsNumber = pageComments ? commentsPerPage : 3;
+
+			const commentsNumber =
+				parseInt( nestedCommentsNumber ) +
+				parseInt( topLevelCommentsNumber );
+
+			setCommentsCount( Math.min( commentsNumber, 3 ) );
 			return;
 		}
 		const currentPostId = postId;

package/src/cover/edit/index.js

@@ -131,13 +131,7 @@ function CoverEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
-	const mediaElement = useRef();
-	const isCoverDark = useCoverIsDark(
-		url,
-		dimRatio,
-		overlayColor.color,
-		mediaElement
-	);
+	const isCoverDark = useCoverIsDark( url, dimRatio, overlayColor.color );
 
 	useEffect( () => {
 		// This side-effect should not create an undo level.
@@ -201,6 +195,7 @@ function CoverEdit( {
 		}
 	);
 
+	const mediaElement = useRef();
 	const currentSettings = {
 		isVideoBackground,
 		isImageBackground,

package/src/cover/edit/use-cover-is-dark.js

@@ -8,6 +8,7 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
 
 function retrieveFastAverageColor() {
 	if ( ! retrieveFastAverageColor.fastAverageColor ) {
@@ -25,34 +26,33 @@ function retrieveFastAverageColor() {
  *                               color are set, dimRatio is used to decide what is used
  *                               for background darkness checking purposes.
  * @param {?string} overlayColor String containing the overlay color value if one exists.
- * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a
- *                               dom element that renders that media.
  *
  * @return {boolean} True if the cover background is considered "dark" and false otherwise.
  */
-export default function useCoverIsDark(
-	url,
-	dimRatio = 50,
-	overlayColor,
-	elementRef
-) {
+export default function useCoverIsDark( url, dimRatio = 50, overlayColor ) {
 	const [ isDark, setIsDark ] = useState( false );
 	useEffect( () => {
 		// If opacity is lower than 50 the dominant color is the image or video color,
 		// so use that color for the dark mode computation.
-		if ( url && dimRatio <= 50 && elementRef.current ) {
+		if ( url && dimRatio <= 50 ) {
+			const imgCrossOrigin = applyFilters(
+				'media.crossOrigin',
+				undefined,
+				url
+			);
 			retrieveFastAverageColor()
-				.getColorAsync( elementRef.current, {
+				.getColorAsync( url, {
 					// Previously the default color was white, but that changed
 					// in v6.0.0 so it has to be manually set now.
 					defaultColor: [ 255, 255, 255, 255 ],
 					// Errors that come up don't reject the promise, so error
 					// logging has to be silenced with this option.
 					silent: process.env.NODE_ENV === 'production',
+					crossOrigin: imgCrossOrigin,
 				} )
 				.then( ( color ) => setIsDark( color.isDark ) );
 		}
-	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
+	}, [ url, url && dimRatio <= 50, setIsDark ] );
 	useEffect( () => {
 		// If opacity is greater than 50 the dominant color is the overlay color,
 		// so use that color for the dark mode computation.

package/src/cover/editor.scss

@@ -107,3 +107,10 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
+
+
+// The frontend style.scss includes a min-height as an IE11 fix.
+// This fix causes extra spacing for the focus style in the editor, so we omit it here.
+.wp-block-cover::after {
+	min-height: auto;
+}