Cherry pick commits for WP 6.5 Beta 3

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -72,7 +72,7 @@ Settings related to shadows.
 
 | Property  | Type   | Default | Props  |
 | ---       | ---    | ---    |---   |
-| defaultPresets | boolean | true |  |
+| defaultPresets | boolean | false |  |
 | presets | array |  | name, shadow, slug |
 
 ---

lib/class-wp-theme-json-gutenberg.php

@@ -670,6 +670,7 @@ public static function get_element_class_name( $element ) {
 		array( 'spacing', 'margin' ),
 		array( 'spacing', 'padding' ),
 		array( 'typography', 'lineHeight' ),
+		array( 'shadow', 'defaultPresets' ),
 	);
 
 	/**

lib/theme.json

@@ -191,7 +191,7 @@
 			"text": true
 		},
 		"shadow": {
-			"defaultPresets": true,
+			"defaultPresets": false,
 			"presets": [
 				{
 					"name": "Natural",

packages/base-styles/_mixins.scss

@@ -297,6 +297,16 @@
 			}
 		}
 	}
+
+	&[aria-disabled="true"],
+	&:disabled {
+		background: $gray-100;
+		border-color: $gray-300;
+		cursor: default;
+
+		// Override style inherited from wp-admin. Required to avoid degraded appearance on different backgrounds.
+		opacity: 1;
+	}
 }
 
 @mixin radio-control {

packages/block-editor/src/components/block-edit/context.js

@@ -6,6 +6,7 @@ import { createContext, useContext } from '@wordpress/element';
 export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
 export const blockEditingModeKey = Symbol( 'blockEditingMode' );
+export const blockBindingsKey = Symbol( 'blockBindings' );
 
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',

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

@@ -14,6 +14,7 @@ import {
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
 	blockEditingModeKey,
+	blockBindingsKey,
 } from './context';
 
 /**
@@ -41,7 +42,8 @@ export default function BlockEdit( {
 		attributes = {},
 		__unstableLayoutClassNames,
 	} = props;
-	const { layout = null } = attributes;
+	const { layout = null, metadata = {} } = attributes;
+	const { bindings } = metadata;
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
@@ -62,6 +64,7 @@ export default function BlockEdit( {
 					[ mayDisplayControlsKey ]: mayDisplayControls,
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
 					[ blockEditingModeKey ]: blockEditingMode,
+					[ blockBindingsKey ]: bindings,
 				} ),
 				[
 					name,
@@ -73,6 +76,7 @@ export default function BlockEdit( {
 					mayDisplayControls,
 					mayDisplayParentControls,
 					blockEditingMode,
+					bindings,
 				]
 			) }
 		>

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

@@ -30,7 +30,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -116,6 +116,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId
 	);
 
+	const borderPanelLabel = useBorderPanelLabel( {
+		blockName: selectedBlockName,
+	} );
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -140,9 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 						/>
 						<InspectorControls.Slot
 							group="border"
-							label={ getBorderPanelLabel( {
-								blockName: selectedBlockName,
-							} ) }
+							label={ borderPanelLabel }
 						/>
 						<InspectorControls.Slot group="styles" />
 					</>
@@ -251,7 +253,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<div className="block-editor-block-inspector">

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

@@ -54,7 +54,11 @@ export function BlockPreview( {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const renderedBlocks = useMemo(
@@ -117,6 +121,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		() => ( {
 			...originalSettings,
 			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			focusMode: false, // Disable "Spotlight mode".
 			__unstableIsPreviewMode: true,
 		} ),
 		[ originalSettings ]

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

@@ -207,17 +207,18 @@
 		}
 	}
 
-	.block-editor-block-mover .block-editor-block-mover__move-button-container {
-		width: auto;
-
-		@include break-small() {
+	.block-editor-block-mover {
+		.block-editor-block-mover__move-button-container {
+			width: auto;
 			position: relative;
+		}
 
-			&::before {
+		&:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+			@include break-small() {
 				content: "";
 				height: $border-width;
 				width: 100%;
-				background: $gray-900;
+				background: $gray-200;
 				position: absolute;
 				top: 50%;
 				left: 50%;
@@ -226,6 +227,10 @@
 				transform: translate(-50%, 0);
 				margin-top: -$border-width * 0.5;
 			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
 		}
 	}
 

packages/block-editor/src/components/global-styles/border-panel.js

@@ -21,23 +21,24 @@ import { useColorsPerOrigin } from './hooks';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { overrideOrigins } from '../../store/get-block-settings';
 import { setImmutably } from '../../utils/object';
-import { getBorderPanelLabel } from '../../hooks/border';
-import { ShadowPopover } from './shadow-panel-components';
+import { useBorderPanelLabel } from '../../hooks/border';
+import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 
-function useHasShadowControl( settings ) {
-	return !! settings?.shadow;
+export function useHasBorderPanel( settings ) {
+	const controls = Object.values( useHasBorderPanelControls( settings ) );
+	return controls.some( Boolean );
 }
 
-export function useHasBorderPanel( settings ) {
-	const controls = [
-		useHasBorderColorControl( settings ),
-		useHasBorderRadiusControl( settings ),
-		useHasBorderStyleControl( settings ),
-		useHasBorderWidthControl( settings ),
-		useHasShadowControl( settings ),
-	];
+export function useHasBorderPanelControls( settings ) {
+	const controls = {
+		hasBorderColor: useHasBorderColorControl( settings ),
+		hasBorderRadius: useHasBorderRadiusControl( settings ),
+		hasBorderStyle: useHasBorderStyleControl( settings ),
+		hasBorderWidth: useHasBorderWidthControl( settings ),
+		hasShadow: useHasShadowControl( settings ),
+	};
 
-	return controls.some( Boolean );
+	return controls;
 }
 
 function useHasBorderColorControl( settings ) {
@@ -56,6 +57,11 @@ function useHasBorderWidthControl( settings ) {
 	return settings?.border?.width;
 }
 
+function useHasShadowControl( settings ) {
+	const shadows = useShadowPresets( settings );
+	return !! settings?.shadow && shadows.length > 0;
+}
+
 function BorderToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -215,14 +221,16 @@ export default function BorderPanel( {
 	const showBorderByDefault =
 		defaultControls?.color || defaultControls?.width;
 
-	const label = getBorderPanelLabel( {
+	const hasBorderControl =
+		showBorderColor ||
+		showBorderStyle ||
+		showBorderWidth ||
+		showBorderRadius;
+
+	const label = useBorderPanelLabel( {
 		blockName: name,
 		hasShadowControl,
-		hasBorderControl:
-			showBorderColor ||
-			showBorderStyle ||
-			showBorderWidth ||
-			showBorderRadius,
+		hasBorderControl,
 	} );
 
 	return (
@@ -280,9 +288,12 @@ export default function BorderPanel( {
 					isShownByDefault={ defaultControls.shadow }
 					panelId={ panelId }
 				>
-					<BaseControl.VisualLabel as="legend">
-						{ __( 'Shadow' ) }
-					</BaseControl.VisualLabel>
+					{ hasBorderControl ? (
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Shadow' ) }
+						</BaseControl.VisualLabel>
+					) : null }
+
 					<ItemGroup isBordered isSeparated>
 						<ShadowPopover
 							shadow={ shadow }

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

@@ -19,7 +19,11 @@ export {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
-export { default as BorderPanel, useHasBorderPanel } from './border-panel';
+export {
+	default as BorderPanel,
+	useHasBorderPanel,
+	useHasBorderPanelControls,
+} from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
 export {