Merge branch 'trunk' into fix/remove-period-from-settings-panel-labels

packages/base-styles/_mixins.scss

@@ -284,7 +284,6 @@
 	}
 
 	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
 		color: $dark-gray-placeholder;
 	}
 

packages/block-editor/src/components/inserter/block-patterns-explorer/index.js

@@ -12,7 +12,7 @@ import PatternExplorerSidebar from './pattern-explorer-sidebar';
 import PatternList from './pattern-list';
 import { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';
 
-function PatternsExplorer( { initialCategory, rootClientId } ) {
+function PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
@@ -34,6 +34,7 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				rootClientId={ rootClientId }
+				onModalClose={ onModalClose }
 			/>
 		</div>
 	);
@@ -46,7 +47,7 @@ function PatternsExplorerModal( { onModalClose, ...restProps } ) {
 			onRequestClose={ onModalClose }
 			isFullScreen
 		>
-			<PatternsExplorer { ...restProps } />
+			<PatternsExplorer onModalClose={ onModalClose } { ...restProps } />
 		</Modal>
 	);
 }

packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -52,6 +52,7 @@ function PatternList( {
 	selectedCategory,
 	patternCategories,
 	rootClientId,
+	onModalClose,
 } ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
@@ -152,7 +153,10 @@ function PatternList( {
 					<>
 						<BlockPatternsList
 							blockPatterns={ pagingProps.categoryPatterns }
-							onClickPattern={ onClickPattern }
+							onClickPattern={ ( pattern, blocks ) => {
+								onClickPattern( pattern, blocks );
+								onModalClose();
+							} }
 							isDraggable={ false }
 						/>
 						<BlockPatternsPaging { ...pagingProps } />

packages/components/CHANGELOG.md

@@ -2,12 +2,18 @@
 
 ## Unreleased
 
+### Documentation
+
+-   `FontSizePicker`: Fix Storybook units control type to use `inline-check` and improve documentation clarifying unitless mode in `README.md` ([#68936](https://github.com/WordPress/gutenberg/pull/68936)).
+
 ### Bug Fixes
 
 -   `TextControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68561](https://github.com/WordPress/gutenberg/pull/68561)).
+-   `InputControl`: Ensure consistent placeholder color ([#69334](https://github.com/WordPress/gutenberg/pull/69334)).
 
 ### Enhancement
 
+-   `TextareaControl`: Fix Firefox placeholder text opacity override ([#69312](https://github.com/WordPress/gutenberg/pull/69312)).
 -   `BorderControlDropdown`, `BorderControl`: Reset button is always visible. ([#69066](https://github.com/WordPress/gutenberg/pull/69066)).
 
 ### Internal

packages/components/src/font-size-picker/README.md

@@ -99,6 +99,8 @@ Available units for custom font size selection.
 
 The current font size value.
 
+**Note**: For the `units` property to work, the current font size value must be specified as strings with units (e.g., `'12px'` instead of `12`). When the font size is provided as a number, the component operates in "unitless mode" where the `units` property has no effect.
+
 -   Required: No
 
 ### `withReset`: `boolean`

packages/components/src/font-size-picker/stories/index.story.tsx

@@ -18,6 +18,10 @@ const meta: Meta< typeof FontSizePicker > = {
 	component: FontSizePicker,
 	argTypes: {
 		value: { control: false },
+		units: {
+			control: 'inline-check',
+			options: [ 'px', 'em', 'rem', 'vw', 'vh' ],
+		},
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

packages/components/src/font-size-picker/types.ts

@@ -34,6 +34,10 @@ export type FontSizePickerProps = {
 	units?: string[];
 	/**
 	 * The current font size value.
+	 *
+	 * Note: For the `units` property to work, the current font size value must be specified
+	 * as strings with units (e.g., '12px' instead of 12). When the font size is provided
+	 * as a number, the component operates in "unitless mode" where the `units` property has no effect.
 	 */
 	value?: number | string;
 	/**

packages/components/src/input-control/styles/input-control-styles.tsx

@@ -285,7 +285,15 @@ export const Input = styled.input< InputProps >`
 		${ customPaddings }
 
 		&::-webkit-input-placeholder {
-			line-height: normal;
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.darkGrayPlaceholder };
 		}
 
 		&[type='email'],

packages/components/src/textarea-control/styles/textarea-control-styles.ts

@@ -62,7 +62,6 @@ export const StyledTextarea = styled.textarea`
 	}
 
 	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
 		color: ${ COLORS.ui.darkGrayPlaceholder };
 	}
 
@@ -76,7 +75,6 @@ export const StyledTextarea = styled.textarea`
 		}
 
 		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
 			color: ${ COLORS.ui.lightGrayPlaceholder };
 		}
 

packages/edit-site/src/components/layout/style.scss

@@ -68,6 +68,10 @@
 	.edit-site-sidebar__screen-wrapper {
 		padding: 0;
 	}
+
+	.edit-site-sidebar-navigation-screen__main {
+		padding: 0 $grid-unit-15;
+	}
 }
 
 .edit-site-layout__canvas-container {

packages/editor/src/components/document-outline/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -83,16 +83,13 @@ function EmptyOutlineIllustration() {
  * @return {Array} An array of heading blocks enhanced with the properties described above.
  */
 const computeOutlineHeadings = ( blocks = [] ) => {
-	return blocks.flatMap( ( block = {} ) => {
-		if ( block.name === 'core/heading' ) {
-			return {
-				...block,
-				level: block.attributes.level,
-				isEmpty: isEmptyHeading( block ),
-			};
-		}
-		return computeOutlineHeadings( block.innerBlocks );
-	} );
+	return blocks
+		.filter( ( block ) => block.name === 'core/heading' )
+		.map( ( block ) => ( {
+			...block,
+			level: block.attributes.level,
+			isEmpty: isEmptyHeading( block ),
+		} ) );
 };
 
 const isEmptyHeading = ( heading ) =>
@@ -113,22 +110,31 @@ export default function DocumentOutline( {
 	hasOutlineItemsDisabled,
 } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { blocks, title, isTitleSupported } = useSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
+	const { title, isTitleSupported } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
 		return {
 			title: getEditedPostAttribute( 'title' ),
-			blocks: getBlocks(),
 			isTitleSupported: postType?.supports?.title ?? false,
 		};
 	} );
+	const blocks = useSelect( ( select ) => {
+		const { getClientIdsWithDescendants, getBlock } =
+			select( blockEditorStore );
+		const clientIds = getClientIdsWithDescendants();
+		// Note: Don't modify data inside the `Array.map` callback,
+		// all compulations should happen in `computeOutlineHeadings`.
+		return clientIds.map( ( id ) => getBlock( id ) );
+	} );
 
 	const prevHeadingLevelRef = useRef( 1 );
 
-	const headings = computeOutlineHeadings( blocks );
+	const headings = useMemo(
+		() => computeOutlineHeadings( blocks ),
+		[ blocks ]
+	);
+
 	if ( headings.length < 1 ) {
 		return (
 			<div className="editor-document-outline has-no-headings">

packages/editor/src/components/post-actions/index.js

@@ -20,57 +20,39 @@ import { usePostActions } from './actions';
 
 const { Menu, kebabCase } = unlock( componentsPrivateApis );
 
-function useEditedEntityRecordsWithPermissions( postType, postIds ) {
-	const { items, permissions } = useSelect(
+export default function PostActions( { postType, postId, onActionPerformed } ) {
+	const [ activeModalAction, setActiveModalAction ] = useState( null );
+
+	const { item, permissions } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getEntityRecordPermissions } =
 				unlock( select( coreStore ) );
 			return {
-				items: postIds.map( ( postId ) =>
-					getEditedEntityRecord( 'postType', postType, postId )
-				),
-				permissions: postIds.map( ( postId ) =>
-					getEntityRecordPermissions( 'postType', postType, postId )
+				item: getEditedEntityRecord( 'postType', postType, postId ),
+				permissions: getEntityRecordPermissions(
+					'postType',
+					postType,
+					postId
 				),
 			};
 		},
-		[ postIds, postType ]
+		[ postId, postType ]
 	);
-
-	return useMemo( () => {
-		return items.map( ( item, index ) => ( {
+	const itemWithPermissions = useMemo( () => {
+		return {
 			...item,
-			permissions: permissions[ index ],
-		} ) );
-	}, [ items, permissions ] );
-}
-
-export default function PostActions( { postType, postId, onActionPerformed } ) {
-	const [ activeModalAction, setActiveModalAction ] = useState( null );
-	const _postIds = useMemo( () => {
-		if ( Array.isArray( postId ) ) {
-			return postId;
-		}
-		return postId ? [ postId ] : [];
-	}, [ postId ] );
-
-	const itemsWithPermissions = useEditedEntityRecordsWithPermissions(
-		postType,
-		_postIds
-	);
+			permissions,
+		};
+	}, [ item, permissions ] );
 	const allActions = usePostActions( { postType, onActionPerformed } );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
 			return (
-				( ! action.isEligible ||
-					itemsWithPermissions.some( ( itemWithPermissions ) =>
-						action.isEligible( itemWithPermissions )
-					) ) &&
-				( itemsWithPermissions.length < 2 || action.supportsBulk )
+				! action.isEligible || action.isEligible( itemWithPermissions )
 			);
 		} );
-	}, [ allActions, itemsWithPermissions ] );
+	}, [ allActions, itemWithPermissions ] );
 
 	return (
 		<>
@@ -90,15 +72,15 @@ export default function PostActions( { postType, postId, onActionPerformed } ) {
 				<Menu.Popover>
 					<ActionsDropdownMenuGroup
 						actions={ actions }
-						items={ itemsWithPermissions }
+						items={ [ itemWithPermissions ] }
 						setActiveModalAction={ setActiveModalAction }
 					/>
 				</Menu.Popover>
 			</Menu>
 			{ !! activeModalAction && (
 				<ActionModal
 					action={ activeModalAction }
-					items={ itemsWithPermissions }
+					items={ [ itemWithPermissions ] }
 					closeModal={ () => setActiveModalAction( null ) }
 				/>
 			) }

packages/editor/src/components/post-card-panel/index.js

@@ -118,11 +118,13 @@ export default function PostCardPanel( {
 						<Badge>{ pageTypeBadge }</Badge>
 					) }
 				</Text>
-				<PostActions
-					postType={ postType }
-					postId={ postId }
-					onActionPerformed={ onActionPerformed }
-				/>
+				{ postIds.length === 1 && (
+					<PostActions
+						postType={ postType }
+						postId={ postIds[ 0 ] }
+						onActionPerformed={ onActionPerformed }
+					/>
+				) }
 			</HStack>
 			{ postIds.length > 1 && (
 				<Text className="editor-post-card-panel__description">

packages/editor/src/components/post-text-editor/style.scss

@@ -41,8 +41,6 @@ textarea.editor-post-text-editor {
 
 	&::-moz-placeholder {
 		color: $dark-gray-placeholder;
-		// Override Firefox default.
-		opacity: 1;
 	}
 
 	&:-ms-input-placeholder {