prep build 02/26

.github/CODEOWNERS

@@ -125,7 +125,7 @@
 /packages/block-editor/src/components/rich-text @ellatrix @fluiddot @dcalhoun
 
 # Project Management
-/.github
+/.github                                        @desrosj
 /packages/project-management-automation
 /packages/report-flaky-tests                    @kevin940726
 

.github/workflows/php-changes-detection.yml

@@ -17,7 +17,7 @@ jobs:
 
             - name: Get changed PHP files
               id: changed-files-php
-              uses: tj-actions/changed-files@90a06d6ba9543371ab4df8eeca0be07ca6054959 # v42.0.2
+              uses: tj-actions/changed-files@3f54ebb830831fc121d3263c1857cfbdc310cdb9 # v42.0.4
               with:
                   files: |
                       *.{php}

docs/contributors/code/react-native/README.md

@@ -1,6 +1,6 @@
 # React Native mobile editor
 
-The Gutenberg repository includes the source for the [React Native](https://facebook.github.io/react-native/) based editor for mobile.
+The Gutenberg repository includes the source for the [React Native](https://reactnative.dev/) based editor for mobile.
 
 ## Mind the mobile
 

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/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-list/content.scss

@@ -453,7 +453,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
 	transition: all 0.3s;
+	background-color: $gray-300;
 	transform-origin: top center;
 }

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

@@ -22,11 +22,7 @@ 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';
-
-function useHasShadowControl( settings ) {
-	return !! settings?.shadow;
-}
+import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
 
 export function useHasBorderPanel( settings ) {
 	const controls = [
@@ -56,6 +52,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,

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

@@ -12,6 +12,7 @@ import {
 	Dropdown,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 
 /**
@@ -24,15 +25,16 @@ import classNames from 'classnames';
  */
 import { unlock } from '../../lock-unlock';
 
-export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
-	const defaultShadows = settings?.shadow?.presets?.default || [];
-	const themeShadows = settings?.shadow?.presets?.theme || [];
-	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ *
+ * @type {Array}
+ */
+const EMPTY_ARRAY = [];
 
-	const shadows = [
-		...( defaultPresetsEnabled ? defaultShadows : [] ),
-		...themeShadows,
-	];
+export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
+	const shadows = useShadowPresets( settings );
 
 	return (
 		<div className="block-editor-global-styles__shadow-popover-container">
@@ -43,6 +45,14 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 					activeShadow={ shadow }
 					onSelect={ onShadowChange }
 				/>
+				<div className="block-editor-global-styles__clear-shadow">
+					<Button
+						variant="tertiary"
+						onClick={ () => onShadowChange( undefined ) }
+					>
+						{ __( 'Clear' ) }
+					</Button>
+				</div>
 			</VStack>
 		</div>
 	);
@@ -64,6 +74,7 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
+					type={ slug === 'unset' ? 'unset' : 'preset' }
 					onSelect={ () =>
 						onSelect( shadow === activeShadow ? undefined : shadow )
 					}
@@ -74,7 +85,7 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 	);
 }
 
-export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 	return (
 		<CompositeItem
@@ -89,7 +100,12 @@ export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
 			) }
 			render={
 				<Button
-					className="block-editor-global-styles__shadow-indicator"
+					className={ classNames(
+						'block-editor-global-styles__shadow-indicator',
+						{
+							unset: type === 'unset',
+						}
+					) }
 					onClick={ onSelect }
 					label={ label }
 					style={ { boxShadow: shadow } }
@@ -149,3 +165,30 @@ function renderShadowToggle() {
 		);
 	};
 }
+
+export function useShadowPresets( settings ) {
+	return useMemo( () => {
+		if ( ! settings?.shadow ) {
+			return EMPTY_ARRAY;
+		}
+
+		const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+		const { default: defaultShadows, theme: themeShadows } =
+			settings?.shadow?.presets ?? {};
+		const unsetShadow = {
+			name: __( 'Unset' ),
+			slug: 'unset',
+			shadow: 'none',
+		};
+
+		const shadowPresets = [
+			...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ),
+			...( themeShadows || EMPTY_ARRAY ),
+		];
+		if ( shadowPresets.length ) {
+			shadowPresets.unshift( unsetShadow );
+		}
+
+		return shadowPresets;
+	}, [ settings ] );
+}

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

@@ -16,6 +16,10 @@
 	padding-bottom: $grid-unit-10;
 }
 
+.block-editor-global-styles__clear-shadow {
+	text-align: right;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
@@ -54,6 +58,10 @@
 	&:hover {
 		transform: scale(1.2);
 	}
+
+	&.unset {
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	}
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {

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

@@ -30,7 +30,7 @@ import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
-
+import calculateScale from '../../utils/calculate-scale';
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -104,27 +104,52 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	scale = 1,
-	frameSize = 0,
-	expand = false,
+	shouldZoom = false,
 	readonly,
 	forwardedRef: ref,
 	...props
 } ) {
-	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			resolvedAssets: settings.__unstableResolvedAssets,
-			isPreviewMode: settings.__unstableIsPreviewMode,
-		};
-	}, [] );
+	const { resolvedAssets, isPreviewMode, isZoomOutMode } = useSelect(
+		( select ) => {
+			const { getSettings, __unstableGetEditorMode } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			return {
+				resolvedAssets: settings.__unstableResolvedAssets,
+				isPreviewMode: settings.__unstableIsPreviewMode,
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			};
+		},
+		[]
+	);
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
+	const [
+		contentResizeListener,
+		{ height: contentHeight, width: contentWidth },
+	] = useResizeObserver();
+
+	// When zoom-out mode is enabled, the iframe is scaled down to fit the
+	// content within the viewport.
+	// At 1000px wide, the iframe is scaled to 45%.
+	// At 400px wide, the iframe is scaled to 90%.
+	const scale =
+		isZoomOutMode && shouldZoom
+			? calculateScale(
+					{
+						maxWidth: 1000,
+						minWidth: 400,
+						maxScale: 0.45,
+						minScale: 0.9,
+					},
+					contentWidth
+			  )
+			: 1;
+	const frameSize = isZoomOutMode ? 100 : 0;
+
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );
@@ -139,6 +164,8 @@ function Iframe( {
 			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
+			documentElement.classList.add( 'block-editor-iframe__html' );
+
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -241,6 +268,21 @@ function Iframe( {
 	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
 	const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
 
+	useEffect( () => {
+		if ( iframeDocument && scale !== 1 ) {
+			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
+			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
+			iframeDocument.documentElement.style.marginBottom = `${
+				-marginFromScaling * 2 + frameSize
+			}px`;
+			return () => {
+				iframeDocument.documentElement.style.transform = '';
+				iframeDocument.documentElement.style.marginTop = '';
+				iframeDocument.documentElement.style.marginBottom = '';
+			};
+		}
+	}, [ scale, frameSize, marginFromScaling, iframeDocument ] );
+
 	return (
 		<>
 			{ tabIndex >= 0 && before }
@@ -250,19 +292,7 @@ function Iframe( {
 				style={ {
 					border: 0,
 					...props.style,
-					height: expand ? contentHeight : props.style?.height,
-					marginTop:
-						scale !== 1
-							? -marginFromScaling + frameSize
-							: props.style?.marginTop,
-					marginBottom:
-						scale !== 1
-							? -marginFromScaling + frameSize
-							: props.style?.marginBottom,
-					transform:
-						scale !== 1
-							? `scale( ${ scale } )`
-							: props.style?.transform,
+					height: props.style?.height,
 					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }