prep build 11/24

lib/compat/wordpress-6.8/post.php

@@ -39,7 +39,7 @@ function gutenberg_post_type_default_rendering_mode( $args, $post_type ) {
 	if (
 		wp_is_block_theme() &&
 		( isset( $args['show_in_rest'] ) && $args['show_in_rest'] ) &&
-		( isset( $args['supports'] ) && in_array( 'editor', $args['supports'], true ) )
+		( ! empty( $args['supports'] ) && in_array( 'editor', $args['supports'], true ) )
 	) {
 		// Validate the supplied rendering mode.
 		if (

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

@@ -36,6 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
+import SwitchSectionStyle from './switch-section-style';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -72,6 +73,7 @@ export function PrivateBlockToolbar( {
 		showSlots,
 		showGroupButtons,
 		showLockButtons,
+		showSwitchSectionStyleButton,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -141,6 +143,7 @@ export function PrivateBlockToolbar( {
 			showSlots: ! isZoomOut(),
 			showGroupButtons: ! isZoomOut(),
 			showLockButtons: ! isZoomOut(),
+			showSwitchSectionStyleButton: isZoomOut(),
 		};
 	}, [] );
 
@@ -222,6 +225,9 @@ export function PrivateBlockToolbar( {
 				{ showShuffleButton && (
 					<ChangeDesign clientId={ blockClientIds[ 0 ] } />
 				) }
+				{ showSwitchSectionStyleButton && (
+					<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
+				) }
 				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot

packages/block-editor/src/components/block-toolbar/switch-section-style.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Icon,
+	Path,
+	SVG,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useStylesForBlocks from '../block-styles/use-styles-for-block';
+import { replaceActiveStyle } from '../block-styles/utils';
+import { store as blockEditorStore } from '../../store';
+import { GlobalStylesContext } from '../global-styles';
+import { globalStylesDataKey } from '../../store/private-keys';
+import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+
+const styleIcon = (
+	<SVG
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z" />
+		<Path
+			stroke="currentColor"
+			strokeWidth="1.5"
+			d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
+		/>
+	</SVG>
+);
+
+function SwitchSectionStyle( { clientId } ) {
+	const { stylesToRender, activeStyle, className } = useStylesForBlocks( {
+		clientId,
+	} );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Get global styles data
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles, blockName } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				globalSettings: settings.__experimentalFeatures,
+				globalStyles: settings[ globalStylesDataKey ],
+				blockName: select( blockEditorStore ).getBlockName( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Get the background color for the active style
+	const activeStyleBackground = activeStyle?.name
+		? getVariationStylesWithRefValues(
+				{
+					settings: mergedConfig?.settings ?? globalSettings,
+					styles: mergedConfig?.styles ?? globalStyles,
+				},
+				blockName,
+				activeStyle.name
+		  )?.color?.background
+		: undefined;
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
+
+	const handleStyleSwitch = () => {
+		const currentIndex = stylesToRender.findIndex(
+			( style ) => style.name === activeStyle.name
+		);
+
+		const nextIndex = ( currentIndex + 1 ) % stylesToRender.length;
+		const nextStyle = stylesToRender[ nextIndex ];
+
+		const styleClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			nextStyle
+		);
+
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+	};
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ handleStyleSwitch }
+				label={ __( 'Shuffle styles' ) }
+			>
+				<Icon
+					icon={ styleIcon }
+					style={ {
+						fill: activeStyleBackground || 'transparent',
+					} }
+				/>
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}
+
+export default SwitchSectionStyle;

packages/block-editor/src/components/color-palette/with-color-context.js

@@ -10,14 +10,32 @@ import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const [ colorsFeature, enableCustomColors ] = useSettings(
-			'color.palette',
-			'color.custom'
+		// Get the default colors, theme colors, and custom colors
+		const [
+			defaultColors,
+			themeColors,
+			customColors,
+			enableCustomColors,
+			enableDefaultColors,
+		] = useSettings(
+			'color.palette.default',
+			'color.palette.theme',
+			'color.palette.custom',
+			'color.custom',
+			'color.defaultPalette'
 		);
-		const {
-			colors = colorsFeature,
-			disableCustomColors = ! enableCustomColors,
-		} = props;
+
+		const _colors = enableDefaultColors
+			? [
+					...( themeColors || [] ),
+					...( defaultColors || [] ),
+					...( customColors || [] ),
+			  ]
+			: [ ...( themeColors || [] ), ...( customColors || [] ) ];
+
+		const { colors = _colors, disableCustomColors = ! enableCustomColors } =
+			props;
+
 		const hasColorsToChoose =
 			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (

packages/block-editor/src/components/font-family/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
@@ -30,13 +30,15 @@ export default function FontFamilyControl( {
 	}
 
 	const options = [
-		{ value: '', label: __( 'Default' ) },
-		...fontFamilies.map( ( { fontFamily, name } ) => {
-			return {
-				value: fontFamily,
-				label: name || fontFamily,
-			};
-		} ),
+		{
+			key: '',
+			name: __( 'Default' ),
+		},
+		...fontFamilies.map( ( { fontFamily, name } ) => ( {
+			key: fontFamily,
+			name: name || fontFamily,
+			style: { fontFamily },
+		} ) ),
 	];
 
 	if ( ! __nextHasNoMarginBottom ) {
@@ -51,14 +53,12 @@ export default function FontFamilyControl( {
 	}
 
 	return (
-		<SelectControl
+		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
-			options={ options }
 			value={ value }
-			onChange={ onChange }
-			labelPosition="top"
+			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
+			options={ options }
 			{ ...props }
 		/>
 	);

packages/block-library/src/cover/test/edit.js

@@ -337,7 +337,7 @@ describe( 'Cover block', () => {
 			describe( 'when colors are disabled', () => {
 				test( 'does not render overlay control', async () => {
 					await setup( undefined, true, disabledColorSettings );
-					await createAndSelectBlock();
+					await selectBlock( 'Block: Cover' );
 					await userEvent.click(
 						screen.getByRole( 'tab', { name: 'Styles' } )
 					);
@@ -350,7 +350,7 @@ describe( 'Cover block', () => {
 				} );
 				test( 'does not render opacity control', async () => {
 					await setup( undefined, true, disabledColorSettings );
-					await createAndSelectBlock();
+					await selectBlock( 'Block: Cover' );
 					await userEvent.click(
 						screen.getByRole( 'tab', { name: 'Styles' } )
 					);

packages/block-library/src/freeform/modal.js

@@ -25,7 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
-			size="small"
+			size="compact"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }

packages/block-library/src/query/index.php

@@ -79,7 +79,7 @@ function register_block_core_query() {
  * @since 6.4.0
  *
  * @param array $parsed_block The block being rendered.
- * @return string Returns the parsed block, unmodified.
+ * @return array Returns the parsed block, unmodified.
  */
 function block_core_query_disable_enhanced_pagination( $parsed_block ) {
 	static $enhanced_query_stack   = array();

packages/block-library/src/search/style.scss

@@ -58,11 +58,9 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 		// Prevent unintended text wrapping.
 		flex-shrink: 0;
 		max-width: 100%;
-	}
-
-	// Ensure minimum input field width in small viewports.
-	.wp-block-search__button[aria-expanded="true"] {
-		max-width: calc(100% - 100px);
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
 	}
 
 	.wp-block-search__inside-wrapper {

packages/components/CHANGELOG.md

@@ -2,10 +2,6 @@
 
 ## Unreleased
 
-### Bug Fixes
-
--  `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([#67139](https://github.com/WordPress/gutenberg/pull/67139)).
-
 ### Deprecations
 
 -   `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)).
@@ -16,12 +12,16 @@
 
 ### Bug Fixes
 
+-   `Modal`: Modal: Increase size of the Close button ([#66792](https://github.com/WordPress/gutenberg/pull/66792)).
 -   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
 -   `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)).
 -   `ColorPalette`: Disable `Clear` button if there's no color value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
 -   `GradientPicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
 -   `DuotonePicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
 -   `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)).
+-   `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([#67139](https://github.com/WordPress/gutenberg/pull/67139)).
+-   `Composite.Hover`: Restore functionality ([#67212](https://github.com/WordPress/gutenberg/pull/67212)).
+-   `Composite.Typeahead`: Restore functionality ([#67212](https://github.com/WordPress/gutenberg/pull/67212)).
 
 ### Enhancements
 

packages/components/src/composite/hover.tsx

@@ -26,5 +26,5 @@ export const CompositeHover = forwardRef<
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
+	return <Ariakit.CompositeHover store={ store } { ...props } ref={ ref } />;
 } );

packages/components/src/composite/typeahead.tsx

@@ -26,5 +26,7 @@ export const CompositeTypeahead = forwardRef<
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
+	return (
+		<Ariakit.CompositeTypeahead store={ store } { ...props } ref={ ref } />
+	);
 } );

packages/components/src/modal/index.tsx

@@ -335,10 +335,10 @@ function UnforwardedModal(
 									<>
 										<Spacer
 											marginBottom={ 0 }
-											marginLeft={ 3 }
+											marginLeft={ 2 }
 										/>
 										<Button
-											size="small"
+											size="compact"
 											onClick={ (
 												event: React.MouseEvent< HTMLButtonElement >
 											) =>

packages/components/src/modal/stories/index.story.tsx

@@ -111,7 +111,7 @@ export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
 	headerActions: (
-		<Button icon={ fullscreen } label="Fullscreen mode" size="small" />
+		<Button icon={ fullscreen } label="Fullscreen mode" size="compact" />
 	),
 	children: <div style={ { height: '200px' } } />,
 };

packages/dataviews/src/components/dataviews/stories/fixtures.tsx

@@ -558,6 +558,7 @@ export const themeFields: Field< Theme >[] = [
 	},
 	{ id: 'requires', label: 'Requires at least' },
 	{ id: 'tested', label: 'Tested up to' },
+	{ id: 'icon', label: 'Icon', render: () => <Icon icon={ image } /> },
 	{
 		id: 'tags',
 		label: 'Tags',