prep build 12/01

.github/CODEOWNERS

@@ -129,14 +129,14 @@
 /packages/env                                   @noahtallen
 
 # PHP
-/lib                                            @timothybjacobs @spacedmonkey
-/lib/global-styles.php                          @timothybjabocs @spacedmonkey @oandregal
-/lib/theme.json                                 @timothybjabocs @spacedmonkey @oandregal
-/lib/theme-i18n.json                            @timothybjabocs @spacedmonkey @oandregal
-/lib/class-wp-theme-json-gutenberg.php          @timothybjabocs @spacedmonkey @oandregal
-/lib/class-wp-theme-json-resolver-gutenberg.php @timothybjabocs @spacedmonkey @oandregal
-/lib/full-site-editing                          @janw-me
-/phpunit/class-wp-theme-json-test.php           @oandregal
+/lib                                                                 @timothybjacobs @spacedmonkey
+/lib/global-styles.php                                               @timothybjabocs @spacedmonkey @oandregal
+/lib/compat/wordpress-5.9/theme.json                                                      @timothybjabocs @spacedmonkey @oandregal
+/lib/compat/wordpress-5.9/theme-i18n.json                                                 @timothybjabocs @spacedmonkey @oandregal
+/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php          @timothybjabocs @spacedmonkey @oandregal
+/lib/compat/wordpress-5.9/class-wp-theme-json-resolver-gutenberg.php @timothybjabocs @spacedmonkey @oandregal
+/lib/full-site-editing                                               @janw-me
+/phpunit/class-wp-theme-json-test.php                                @oandregal
 
 # Web App
 /packages/admin-manifest                        @ellatrix

composer.json

@@ -26,7 +26,8 @@
 		"sirbrillig/phpcs-variable-analysis": "^2.8",
 		"wp-phpunit/wp-phpunit": "^5.4",
 		"phpunit/phpunit": "^8.5",
-		"spatie/phpunit-watcher": "^1.23"
+		"spatie/phpunit-watcher": "^1.23",
+		"yoast/phpunit-polyfills": "^1.0"
 	},
 	"require": {
 		"composer/installers": "~1.0"

lib/compat.php

@@ -191,3 +191,54 @@ function gutenberg_safe_style_attrs( $attrs ) {
 	return $attrs;
 }
 add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs' );
+
+/**
+ * The new gallery block format is not compatible with the use_BalanceTags option
+ * in WP versions <= 5.8 https://core.trac.wordpress.org/ticket/54130.
+ * This method adds a variable to the wp namespace to indicate if the new gallery block
+ * format can be enabled or not. It needs to be added this early and to the wp namespace
+ * as it needs to be available when the intial block parsing runs on editor load, and most of
+ * the editor store and standard flags are not loaded yet at that point
+ *
+ * @since 12.1.0
+ * @todo This should be removed when the minimum required WP version is >= 5.9.
+ *
+ * @return void.
+ */
+function gutenberg_check_gallery_block_v2_compatibility() {
+	$use_balance_tags   = (int) get_option( 'use_balanceTags' );
+	$v2_gallery_enabled = boolval( 1 !== $use_balance_tags || is_wp_version_compatible( '5.9' ) ) ? 'true' : 'false';
+
+	wp_add_inline_script(
+		'wp-dom-ready',
+		'wp.galleryBlockV2Enabled = ' . $v2_gallery_enabled . ';',
+		'after'
+	);
+}
+add_action( 'init', 'gutenberg_check_gallery_block_v2_compatibility' );
+
+/**
+ * Prevent use_balanceTags being enabled on WordPress 5.8 or earlier as it breaks
+ * the layout of the new Gallery block.
+ *
+ * @since 12.1.0
+ * @todo This should be removed when the minimum required WP version is >= 5.9.
+ *
+ * @param int $new_value The new value for use_balanceTags.
+ */
+function gutenberg_use_balancetags_check( $new_value ) {
+	global $wp_version;
+
+	if ( 1 === (int) $new_value && version_compare( $wp_version, '5.9', '<' ) ) {
+		/* translators: %s: Minimum required version */
+		$message = sprintf( __( 'Gutenberg requires WordPress %s or later in order to enable the &#8220;Correct invalidly nested XHTML automatically&#8221; option. Please upgrade WordPress before enabling.', 'gutenberg' ), '5.9' );
+		add_settings_error( 'gutenberg_use_balancetags_check', 'gutenberg_use_balancetags_check', $message, 'error' );
+		if ( class_exists( 'WP_CLI' ) ) {
+			WP_CLI::error( $message );
+		}
+		return 0;
+	}
+
+	return $new_value;
+}
+add_filter( 'pre_update_option_use_balanceTags', 'gutenberg_use_balancetags_check' );

lib/experiments-page.php

@@ -101,7 +101,7 @@ function gutenberg_experiments_editor_settings( $settings ) {
 	// This bypass needs to remain in place until this is resolved and a patch released.
 	// https://core.trac.wordpress.org/ticket/54130.
 	$experiments_settings = array(
-		'__unstableGalleryWithImageBlocks' => (int) get_option( 'use_balanceTags' ) !== 1,
+		'__unstableGalleryWithImageBlocks' => (int) get_option( 'use_balanceTags' ) !== 1 || is_wp_version_compatible( '5.9' ),
 	);
 	return array_merge( $settings, $experiments_settings );
 }

lib/load.php

@@ -106,9 +106,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // These are used by some FSE features
 // as well as global styles.
-require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php';
-require __DIR__ . '/class-wp-theme-json-gutenberg.php';
-require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
+require __DIR__ . '/compat/wordpress-5.9/class-wp-theme-json-schema-gutenberg.php';
+require __DIR__ . '/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php';
+require __DIR__ . '/compat/wordpress-5.9/class-wp-theme-json-resolver-gutenberg.php';
 
 require __DIR__ . '/full-site-editing/full-site-editing.php';
 require __DIR__ . '/full-site-editing/block-templates.php';

package.json

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

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

@@ -30,10 +30,7 @@ import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
-const BlockInspector = ( {
-	showNoBlockSelectedMessage = true,
-	bubblesVirtually = true,
-} ) => {
+const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
 		hasBlockStyles,
@@ -69,7 +66,7 @@ const BlockInspector = ( {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+				<InspectorControls.Slot />
 			</div>
 		);
 	}
@@ -100,7 +97,6 @@ const BlockInspector = ( {
 			clientId={ selectedBlockClientId }
 			blockName={ blockType.name }
 			hasBlockStyles={ hasBlockStyles }
-			bubblesVirtually={ bubblesVirtually }
 		/>
 	);
 };
@@ -109,7 +105,6 @@ const BlockInspectorSingleBlock = ( {
 	clientId,
 	blockName,
 	hasBlockStyles,
-	bubblesVirtually,
 } ) => {
 	const blockInformation = useBlockDisplayInformation( clientId );
 	return (
@@ -122,7 +117,6 @@ const BlockInspectorSingleBlock = ( {
 						<BlockStyles
 							scope="core/edit-post"
 							clientId={ clientId }
-							className="block-inspector__block-styles"
 						/>
 						{ hasBlockSupport(
 							blockName,
@@ -132,31 +126,28 @@ const BlockInspectorSingleBlock = ( {
 					</PanelBody>
 				</div>
 			) }
-			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot />
 			<InspectorControls.Slot
 				__experimentalGroup="typography"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Typography' ) }
 			/>
 			<InspectorControls.Slot
 				__experimentalGroup="border"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Border' ) }
 			/>
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
-				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Dimensions' ) }
 			/>
 			<div>
-				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
+				<AdvancedControls />
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);
 };
 
-const AdvancedControls = ( { bubblesVirtually } ) => {
+const AdvancedControls = () => {
 	const slot = useSlot( InspectorAdvancedControls.slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
@@ -170,10 +161,7 @@ const AdvancedControls = ( { bubblesVirtually } ) => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot
-				__experimentalGroup="advanced"
-				bubblesVirtually={ bubblesVirtually }
-			/>
+			<InspectorControls.Slot __experimentalGroup="advanced" />
 		</PanelBody>
 	);
 };

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

@@ -35,6 +35,11 @@ function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
 	);
 }
 
+// Top position (in px) of the Block Styles container
+// relative to the editor pane.
+// The value is the equivalent of the container's right position.
+const DEFAULT_POSITION_TOP = 16;
+
 // Block Styles component for the Settings Sidebar.
 function BlockStyles( {
 	clientId,
@@ -60,7 +65,8 @@ function BlockStyles( {
 		const scrollContainer = document.querySelector(
 			'.interface-interface-skeleton__content'
 		);
-		setContainerScrollTop( scrollContainer.scrollTop + 16 );
+		const scrollTop = scrollContainer?.scrollTop || 0;
+		setContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );
 	}, [ hoveredStyle ] );
 
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {

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

@@ -1,3 +1,7 @@
+.block-editor-block-styles + .default-style-picker__default-switcher {
+	margin-top: $grid-unit-20;
+}
+
 .block-editor-block-styles__preview-panel {
 	display: none;
 	position: absolute;

packages/block-editor/src/components/colors-gradients/control.js

@@ -36,6 +36,7 @@ function ColorGradientControlInner( {
 	disableCustomColors,
 	disableCustomGradients,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 	className,
 	label,
 	onColorChange,
@@ -109,6 +110,9 @@ function ColorGradientControlInner( {
 							__experimentalHasMultipleOrigins={
 								__experimentalHasMultipleOrigins
 							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							clearable={ clearable }
 							enableAlpha={ enableAlpha }
 						/>

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -93,6 +93,7 @@ export const PanelColorGradientSettingsInner = ( {
 	title,
 	showTitle = true,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 	...props
 } ) => {
@@ -145,6 +146,7 @@ export const PanelColorGradientSettingsInner = ( {
 						disableCustomColors,
 						disableCustomGradients,
 						__experimentalHasMultipleOrigins,
+						__experimentalIsRenderedInSidebar,
 						enableAlpha,
 						...setting,
 					} }

packages/block-editor/src/components/default-style-picker/index.js

@@ -57,12 +57,14 @@ export default function DefaultStylePicker( { blockName } ) {
 
 	return (
 		onUpdatePreferredStyleVariations && (
-			<SelectControl
-				options={ selectOptions }
-				value={ preferredStyle || '' }
-				label={ __( 'Default Style' ) }
-				onChange={ selectOnChange }
-			/>
+			<div className="default-style-picker__default-switcher">
+				<SelectControl
+					options={ selectOptions }
+					value={ preferredStyle || '' }
+					label={ __( 'Default Style' ) }
+					onChange={ selectOnChange }
+				/>
+			</div>
 		)
 	);
 }

packages/block-editor/src/components/inserter/index.native.js

@@ -7,7 +7,7 @@ import { delay } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -34,7 +34,7 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
 const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
-		title={ __( 'Add block' ) }
+		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
 		icon={
 			<Icon
 				icon={ plusCircleFilled }

packages/block-editor/src/components/inspector-controls/block-support-slot-container.js

@@ -6,5 +6,7 @@ import { useContext } from '@wordpress/element';
 
 export default function BlockSupportSlotContainer( { Slot, ...props } ) {
 	const toolsPanelContext = useContext( ToolsPanelContext );
-	return <Slot { ...props } fillProps={ toolsPanelContext } />;
+	return (
+		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+	);
 }

packages/block-editor/src/components/inspector-controls/slot.js

@@ -13,7 +13,6 @@ import groups from './groups';
 
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
-	bubblesVirtually = true,
 	label,
 	...props
 } ) {
@@ -32,14 +31,10 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer
-					{ ...props }
-					bubblesVirtually={ bubblesVirtually }
-					Slot={ Slot }
-				/>
+				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
+	return <Slot { ...props } bubblesVirtually />;
 }

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

@@ -197,12 +197,16 @@ $preview-image-height: 140px;
 		// of text, particular those with no spaces.
 		// See: https://github.com/WordPress/gutenberg/issues/33586#issuecomment-888921188
 		white-space: pre-wrap;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
+
+		.block-editor-link-control__search-item-info {
+			word-break: break-all;
+		}
 	}
 
 	&.is-preview .block-editor-link-control__search-item-header {
 		display: flex;
-		flex: 1; // fill available space.
+		flex: 1; // Fill available space.
 	}
 
 	&.is-error .block-editor-link-control__search-item-header {

packages/block-editor/src/hooks/border-color.js

@@ -96,6 +96,7 @@ export function BorderColorEdit( props ) {
 			onColorChange={ onChangeColor }
 			clearable={ false }
 			__experimentalHasMultipleOrigins
+			__experimentalIsRenderedInSidebar
 			{ ...colorGradientSettings }
 		/>
 	);

packages/block-editor/src/hooks/color-panel.js

@@ -61,6 +61,7 @@ export default function ColorPanel( {
 				settings={ settings }
 				showTitle={ showTitle }
 				__experimentalHasMultipleOrigins
+				__experimentalIsRenderedInSidebar
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker