prep build 6/30

.eslintrc.js

@@ -96,6 +96,11 @@ module.exports = {
 						message:
 							'`puppeteer-testing-library` is still experimental.',
 					},
+					{
+						name: '@emotion/css',
+						message:
+							'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support',
+					},
 				],
 			},
 		],

docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md

@@ -5,7 +5,7 @@ Dynamic blocks are blocks that build their structure and content on the fly when
 There are two primary uses for dynamic blocks:
 
 1. Blocks where content should change even if a post has not been updated. One example from WordPress itself is the Latest Posts block. This block will update everywhere it is used when a new post is published.
-2. Blocks where updates to the code (HTML, CSS, JS) should be immediately shown on the front end of the website. For example, if you update the structure of a block by adding a new class, adding an HTML element, or changing the layout in any other way, using a dynamic block ensures those changes are applied immediately on all occurrences of that block across the site. (If a dynamic block is not used then when block code is updated Guterberg's [validation process](/docs/reference-guides/block-api/block-edit-save.md#validation) generally applies, causing users to see the validation message, "This block appears to have been modified externally").
+2. Blocks where updates to the code (HTML, CSS, JS) should be immediately shown on the front end of the website. For example, if you update the structure of a block by adding a new class, adding an HTML element, or changing the layout in any other way, using a dynamic block ensures those changes are applied immediately on all occurrences of that block across the site. (If a dynamic block is not used then when block code is updated Gutenberg's [validation process](/docs/reference-guides/block-api/block-edit-save.md#validation) generally applies, causing users to see the validation message, "This block appears to have been modified externally").
 
 For many dynamic blocks, the `save` callback function should be returned as `null`, which tells the editor to save only the [block attributes](/docs/reference-guides/block-api/block-attributes.md) to the database. These attributes are then passed into the server-side rendering callback, so you can decide how to display the block on the front end of your site. When you return `null`, the editor will skip the block markup validation process, avoiding issues with frequently-changing markup.
 

lib/block-supports/layout.php

@@ -89,14 +89,17 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	return $content . '<style>' . $style . '</style>';
 }
 
-// Register the block support.
-WP_Block_Supports::get_instance()->register(
-	'layout',
-	array(
-		'register_attribute' => 'gutenberg_register_layout_support',
-	)
-);
-add_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
+// This can be removed when plugin support requires WordPress 5.8.0+.
+if ( ! function_exists( 'wp_render_layout_support_flag' ) ) {
+	// Register the block support.
+	WP_Block_Supports::get_instance()->register(
+		'layout',
+		array(
+			'register_attribute' => 'gutenberg_register_layout_support',
+		)
+	);
+	add_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
+}
 
 /**
  * For themes without theme.json file, make sure
@@ -129,4 +132,7 @@ function( $matches ) {
 	return $updated_content;
 }
 
-add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 );
+// This can be removed when plugin support requires WordPress 5.8.0+.
+if ( ! function_exists( 'wp_restore_group_inner_container' ) ) {
+	add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 );
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "10.9.1",
+	"version": "11.0.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

packages/base-styles/_mixins.scss

@@ -266,21 +266,6 @@
 	&:-ms-input-placeholder {
 		color: $dark-gray-placeholder;
 	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: $light-gray-placeholder;
-		}
-
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: $light-gray-placeholder;
-		}
-
-		&:-ms-input-placeholder {
-			color: $light-gray-placeholder;
-		}
-	}
 }
 
 @mixin checkbox-control {

packages/base-styles/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "3.5.3",
+	"version": "3.5.4",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

packages/block-directory/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "2.1.12",
+	"version": "2.1.14",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

packages/block-editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "6.1.7",
+	"version": "6.1.8",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

packages/block-editor/src/components/block-list/block.native.js

@@ -48,11 +48,13 @@ function BlockForType( {
 	parentWidth,
 	wrapperProps,
 	blockWidth,
+	baseGlobalStyles,
 } ) {
 	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
+			baseGlobalStyles,
 			globalStyle,
 			wrapperProps.style,
 			attributes,
@@ -300,6 +302,7 @@ export default compose( [
 	withSelect( ( select, { clientId, rootClientId } ) => {
 		const {
 			getBlockIndex,
+			getSettings,
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
 			getSelectedBlockClientId,
@@ -347,6 +350,9 @@ export default compose( [
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
+		const baseGlobalStyles = getSettings()
+			?.__experimentalGlobalStylesBaseStyles;
+
 		return {
 			icon,
 			name: name || 'core/missing',
@@ -360,6 +366,7 @@ export default compose( [
 			isParentSelected,
 			firstToSelectId,
 			isTouchable,
+			baseGlobalStyles,
 			wrapperProps: getWrapperProps(
 				attributes,
 				blockType.getEditWrapperProps

packages/block-editor/src/components/block-list/style.scss

@@ -172,6 +172,7 @@
 			// 2px outside.
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {

packages/block-editor/src/components/block-settings/container.native.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -29,6 +29,11 @@ function BottomSheetSettings( {
 	settings,
 	...props
 } ) {
+	const colorSettings = {
+		colors: useSetting( 'color.palette' ) || settings.colors,
+		gradients: useSetting( 'color.gradients' ) || settings.gradients,
+	};
+
 	return (
 		<BottomSheet
 			isVisible={ editorSidebarOpened }
@@ -53,7 +58,7 @@ function BottomSheetSettings( {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.color }
 				>
-					<ColorSettings defaultSettings={ settings } />
+					<ColorSettings defaultSettings={ colorSettings } />
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.focalPoint }

packages/block-editor/src/components/block-toolbar/style.scss

@@ -82,10 +82,6 @@
 			width: $button-size-small !important;
 			margin: 0 !important;
 		}
-
-		&:focus::before {
-			right: $grid-unit-05 !important;
-		}
 	}
 
 	// Match the parent selector button.
@@ -158,10 +154,6 @@
 			width: 0 !important;
 			height: 0 !important;
 		}
-
-		&:focus::before {
-			right: $grid-unit-05 !important;
-		}
 	}
 
 	// Parent selector overrides

packages/block-editor/src/components/iframe/index.js

@@ -8,6 +8,7 @@ import {
 	forwardRef,
 	useEffect,
 	useMemo,
+	useReducer,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
@@ -164,6 +165,7 @@ async function loadScript( doc, { id, src } ) {
 }
 
 function Iframe( { contentRef, children, head, ...props }, ref ) {
+	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const styles = useParsedAssets( window.__editorAssets.styles );
 	const scripts = useParsedAssets( window.__editorAssets.scripts );
@@ -194,11 +196,19 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 			clearerRef( documentElement );
 			clearerRef( body );
 
-			scripts.reduce(
-				( promise, script ) =>
-					promise.then( () => loadScript( contentDocument, script ) ),
-				Promise.resolve()
-			);
+			scripts
+				.reduce(
+					( promise, script ) =>
+						promise.then( () =>
+							loadScript( contentDocument, script )
+						),
+					Promise.resolve()
+				)
+				.finally( () => {
+					// When script are loaded, re-render blocks to allow them
+					// to initialise.
+					forceRender();
+				} );
 
 			return true;
 		}

packages/block-editor/src/components/link-control/README.md

@@ -127,6 +127,14 @@ This `suggestion` will then be _automatically_ passed to the `onChange` handler
 
 As a result of the above, this prop is often used to allow on the fly creation of new entities (eg: `Posts`, `Pages`) based on the text the user has entered into the link search UI. As an example, the Navigation Block uses `createSuggestion` to create Pages on the fly from within the Block itself.
 
+### onRemove
+
+-   Type: `Function`
+-   Required: No
+-   Default: null
+
+An optional handler, which when passed will trigger the display of an `Unlink` UI within the control. This handler is expected to remove the current `value` of the control thus resetting it back to a default state. The key use case for this is allowing users to remove a link from the control without relying on there being an "unlink" control in the block toolbar.
+
 #### Search `suggestion` values
 
 A `suggestion` should have the following shape:

packages/block-editor/src/components/link-control/index.js

@@ -106,6 +106,7 @@ function LinkControl( {
 	value,
 	settings,
 	onChange = noop,
+	onRemove,
 	noDirectEntry = false,
 	showSuggestions = true,
 	showInitialSuggestions,
@@ -260,11 +261,23 @@ function LinkControl( {
 				/>
 			) }
 
-			<LinkControlSettingsDrawer
-				value={ value }
-				settings={ settings }
-				onChange={ onChange }
-			/>
+			<div className="block-editor-link-control__tools">
+				<LinkControlSettingsDrawer
+					value={ value }
+					settings={ settings }
+					onChange={ onChange }
+				/>
+				{ onRemove && value && ! isEditingLink && ! isCreatingPage && (
+					<Button
+						className="block-editor-link-control__unlink"
+						isDestructive
+						variant="link"
+						onClick={ onRemove }
+					>
+						{ __( 'Unlink' ) }
+					</Button>
+				) }
+			</div>
 		</div>
 	);
 }

packages/block-editor/src/components/link-control/style.scss

@@ -380,10 +380,23 @@ $preview-image-height: 140px;
 	padding: 10px;
 }
 
-.block-editor-link-control__settings {
+.block-editor-link-control__tools {
+	display: flex;
+	align-items: center;
 	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20 $grid-unit-30;
+}
+
+.block-editor-link-control__unlink {
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}
+
+.block-editor-link-control__settings {
+	flex: 1;
+	margin: 0;
+
 
 	:last-child {
 		margin-bottom: 0;

packages/block-editor/src/components/link-control/test/index.js

@@ -227,6 +227,49 @@ describe( 'Basic rendering', () => {
 			expect( isEditing() ).toBe( false );
 		} );
 	} );
+
+	describe( 'Unlinking', () => {
+		it( 'should not show "Unlink" button if no onRemove handler is provided', () => {
+			act( () => {
+				render(
+					<LinkControl value={ { url: 'https://example.com' } } />,
+					container
+				);
+			} );
+
+			const unLinkButton = queryByRole( container, 'button', {
+				name: 'Unlink',
+			} );
+
+			expect( unLinkButton ).toBeNull();
+			expect( unLinkButton ).not.toBeInTheDocument();
+		} );
+
+		it( 'should show "Unlink" button if a onRemove handler is provided', () => {
+			const mockOnRemove = jest.fn();
+			act( () => {
+				render(
+					<LinkControl
+						value={ { url: 'https://example.com' } }
+						onRemove={ mockOnRemove }
+					/>,
+					container
+				);
+			} );
+
+			const unLinkButton = queryByRole( container, 'button', {
+				name: 'Unlink',
+			} );
+			expect( unLinkButton ).toBeTruthy();
+			expect( unLinkButton ).toBeInTheDocument();
+
+			act( () => {
+				Simulate.click( unLinkButton );
+			} );
+
+			expect( mockOnRemove ).toHaveBeenCalled();
+		} );
+	} );
 } );
 
 describe( 'Searching for a link', () => {