prep build 12/9

backport-changelog/6.8/7976.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7976
+
+* https://github.com/WordPress/gutenberg/pull/67716

docs/reference-guides/core-blocks.md

@@ -660,7 +660,7 @@ Contains the block elements used to render a post, like the title, date, feature
 
 -	**Name:** core/post-template
 -	**Category:** theme
--	**Parent:** core/query
+-	**Ancestor:** core/query
 -	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 
 ## Post Terms

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

@@ -1319,6 +1319,8 @@ public function get_settings() {
 	 *                       - `variables`: only the CSS Custom Properties for presets & custom ones.
 	 *                       - `styles`: only the styles section in theme.json.
 	 *                       - `presets`: only the classes for the presets.
+	 *                       - `base-layout-styles`: only the base layout styles.
+	 *                       - `custom-css`: only the custom CSS.
 	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
 	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
 	 *                       The options currently supported are:

lib/global-styles-and-settings.php

@@ -9,7 +9,7 @@
  * Returns the stylesheet resulting of merging core, theme, and user data.
  *
  * @param array $types Types of styles to load. Optional.
- *                     It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles.
+ *                     See {@see 'WP_Theme_JSON::get_stylesheet'} for all valid types.
  *                     If empty, it'll load the following:
  *                     - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'.
  *                     - for themes with theme.json: 'variables', 'presets', 'styles'.
@@ -142,6 +142,8 @@ function gutenberg_get_global_settings( $path = array(), $context = array() ) {
 /**
  * Gets the global styles custom css from theme.json.
  *
+ * @deprecated Gutenberg 18.6.0 Use {@see 'gutenberg_get_global_stylesheet'} instead for top-level custom CSS, or {@see 'WP_Theme_JSON_Gutenberg::get_styles_for_block'} for block-level custom CSS.
+ *
  * @return string
  */
 function gutenberg_get_global_styles_custom_css() {

packages/block-editor/src/components/block-lock/modal.js

@@ -99,9 +99,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			>
 				<fieldset className="block-editor-block-lock-modal__options">
 					<legend>
-						{ __(
-							'Choose specific attributes to restrict or lock all available options.'
-						) }
+						{ __( 'Select the features you want to lock' ) }
 					</legend>
 					{ /*
 					 * Disable reason: The `list` ARIA role is redundant but
@@ -137,7 +135,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 									<li className="block-editor-block-lock-modal__checklist-item">
 										<CheckboxControl
 											__nextHasNoMarginBottom
-											label={ __( 'Restrict editing' ) }
+											label={ __( 'Lock editing' ) }
 											checked={ !! lock.edit }
 											onChange={ ( edit ) =>
 												setLock( ( prevLock ) => ( {
@@ -159,7 +157,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Disable movement' ) }
+										label={ __( 'Lock movement' ) }
 										checked={ lock.move }
 										onChange={ ( move ) =>
 											setLock( ( prevLock ) => ( {
@@ -178,7 +176,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								<li className="block-editor-block-lock-modal__checklist-item">
 									<CheckboxControl
 										__nextHasNoMarginBottom
-										label={ __( 'Prevent removal' ) }
+										label={ __( 'Lock removal' ) }
 										checked={ lock.remove }
 										onChange={ ( remove ) =>
 											setLock( ( prevLock ) => ( {

packages/block-editor/src/hooks/use-zoom-out.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,32 +12,64 @@ import { unlock } from '../lock-unlock';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * Concepts:
+ * - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting.
+ * - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
-export function useZoomOut( zoomOut = true ) {
+export function useZoomOut( enabled = true ) {
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
+	/**
+	 * We need access to both the value and the function. The value is to trigger a useEffect hook
+	 * and the function is to check zoom out within another hook without triggering a re-render.
+	 */
+	const { isZoomedOut, isZoomOut } = useSelect( ( select ) => {
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
+		return {
+			isZoomedOut: _isZoomOut(),
+			isZoomOut: _isZoomOut,
+		};
+	}, [] );
+
+	const controlZoomLevelRef = useRef( false );
+	const isEnabledRef = useRef( enabled );
+
+	/**
+	 * This hook tracks if the zoom state was changed manually by the user via clicking
+	 * the zoom out button. We only want this to run when isZoomedOut changes, so we use
+	 * a ref to track the enabled state.
+	 */
 	useEffect( () => {
-		const isZoomOutOnMount = isZoomOut();
+		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
+		// state (zoomOut), then it means the user manually changed the zoom state while
+		// this hook was mounted, and we should no longer control the zoom state.
+		if ( isZoomedOut !== isEnabledRef.current ) {
+			controlZoomLevelRef.current = false;
+		}
+	}, [ isZoomedOut ] );
 
-		return () => {
-			if ( isZoomOutOnMount ) {
+	useEffect( () => {
+		isEnabledRef.current = enabled;
+
+		if ( enabled !== isZoomOut() ) {
+			controlZoomLevelRef.current = true;
+
+			if ( enabled ) {
 				setZoomLevel( 'auto-scaled' );
 			} else {
 				resetZoomLevel();
 			}
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( zoomOut ) {
-			setZoomLevel( 'auto-scaled' );
-		} else {
-			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
+
+		return () => {
+			// If we are controlling zoom level and are zoomed out, reset the zoom level.
+			if ( controlZoomLevelRef.current && isZoomOut() ) {
+				resetZoomLevel();
+			}
+		};
+	}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );
 }

packages/block-library/src/paragraph/edit.js

@@ -21,6 +21,7 @@ import {
 	useSettings,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
+import { getBlockSupport } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
 /**
@@ -47,7 +48,7 @@ function hasDropCapDisabled( align ) {
 	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
 }
 
-function DropCapControl( { clientId, attributes, setAttributes } ) {
+function DropCapControl( { clientId, attributes, setAttributes, name } ) {
 	// Please do not add a useSelect call to the paragraph block unconditionally.
 	// Every useSelect added to a (frequently used) block will degrade load
 	// and type performance. By moving it within InspectorControls, the subscription is
@@ -69,11 +70,18 @@ function DropCapControl( { clientId, attributes, setAttributes } ) {
 		helpText = __( 'Show a large initial letter.' );
 	}
 
+	const isDropCapControlEnabledByDefault = getBlockSupport(
+		name,
+		'typography.defaultControls.dropCap',
+		false
+	);
+
 	return (
 		<InspectorControls group="typography">
 			<ToolsPanelItem
 				hasValue={ () => !! dropCap }
 				label={ __( 'Drop cap' ) }
+				isShownByDefault={ isDropCapControlEnabledByDefault }
 				onDeselect={ () => setAttributes( { dropCap: undefined } ) }
 				resetAllFilter={ () => ( { dropCap: undefined } ) }
 				panelId={ clientId }
@@ -99,6 +107,7 @@ function ParagraphBlock( {
 	setAttributes,
 	clientId,
 	isSelected: isSingleSelected,
+	name,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const blockProps = useBlockProps( {
@@ -136,6 +145,7 @@ function ParagraphBlock( {
 			) }
 			{ isSingleSelected && (
 				<DropCapControl
+					name={ name }
 					clientId={ clientId }
 					attributes={ attributes }
 					setAttributes={ setAttributes }

packages/block-library/src/post-template/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-template",
 	"title": "Post Template",
 	"category": "theme",
-	"parent": [ "core/query" ],
+	"ancestor": [ "core/query" ],
 	"description": "Contains the block elements used to render a post, like the title, date, featured image, content or excerpt, and more.",
 	"textdomain": "default",
 	"usesContext": [

packages/data/src/components/use-select/index.js

@@ -19,6 +19,25 @@ import useAsyncMode from '../async-mode-provider/use-async-mode';
 
 const renderQueue = createQueue();
 
+function warnOnUnstableReference( a, b ) {
+	if ( ! a || ! b ) {
+		return;
+	}
+
+	const keys =
+		typeof a === 'object' && typeof b === 'object'
+			? Object.keys( a ).filter( ( k ) => a[ k ] !== b[ k ] )
+			: [];
+
+	// eslint-disable-next-line no-console
+	console.warn(
+		'The `useSelect` hook returns different values when called with the same state and parameters.\n' +
+			'This can lead to unnecessary re-renders and performance issues if not fixed.\n\n' +
+			'Non-equal value keys: %s\n\n',
+		keys.join( ', ' )
+	);
+}
+
 /**
  * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
  * @template {import('../../types').AnyConfig} C
@@ -159,10 +178,7 @@ function Store( registry, suspense ) {
 				if ( ! didWarnUnstableReference ) {
 					const secondMapResult = mapSelect( select, registry );
 					if ( ! isShallowEqual( mapResult, secondMapResult ) ) {
-						// eslint-disable-next-line no-console
-						console.warn(
-							`The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.`
-						);
+						warnOnUnstableReference( mapResult, secondMapResult );
 						didWarnUnstableReference = true;
 					}
 				}