Merge branch 'trunk' into add/duplicate-post-action

package.json

@@ -111,7 +111,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.6.0",
-		"@playwright/test": "1.42.1",
+		"@playwright/test": "1.43.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",

packages/block-editor/src/components/block-patterns-paging/index.js

@@ -45,6 +45,7 @@ export default function Pagination( {
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							__experimentalIsFocusable
 						>
 							<span>«</span>
 						</Button>
@@ -53,6 +54,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							__experimentalIsFocusable
 						>
 							<span>‹</span>
 						</Button>
@@ -75,6 +77,7 @@ export default function Pagination( {
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							__experimentalIsFocusable
 						>
 							<span>›</span>
 						</Button>
@@ -84,6 +87,7 @@ export default function Pagination( {
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
 							size="default"
+							__experimentalIsFocusable
 						>
 							<span>»</span>
 						</Button>

packages/block-editor/src/hooks/layout.js

@@ -50,13 +50,7 @@ function hasLayoutBlockSupport( blockName ) {
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const { kebabCase } = unlock( componentsPrivateApis );
-	const rootPaddingAlignment = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().__experimentalFeatures
-			?.useRootPaddingAwareAlignments;
-	}, [] );
 	const { layout } = blockAttributes;
-
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
@@ -78,12 +72,20 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
-	if (
-		( usedLayout?.inherit ||
-			usedLayout?.contentSize ||
-			usedLayout?.type === 'constrained' ) &&
-		rootPaddingAlignment
-	) {
+	const hasGlobalPadding = useSelect(
+		( select ) => {
+			return (
+				( usedLayout?.inherit ||
+					usedLayout?.contentSize ||
+					usedLayout?.type === 'constrained' ) &&
+				select( blockEditorStore ).getSettings().__experimentalFeatures
+					?.useRootPaddingAwareAlignments
+			);
+		},
+		[ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ]
+	);
+
+	if ( hasGlobalPadding ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -353,7 +355,11 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
+function BlockWithLayoutStyles( {
+	block: BlockListBlock,
+	props,
+	blockGapSupport,
+} ) {
 	const { name, attributes } = props;
 	const id = useInstanceId( BlockListBlock );
 	const { layout } = attributes;
@@ -369,7 +375,6 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
 	const selector = `.${ selectorPrefix }${ id }.${ selectorPrefix }${ id }`;
-	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 
 	// Get CSS string for the current layout type.
@@ -410,26 +415,44 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const blockSupportsLayout = hasLayoutBlockSupport( props.name );
-		const shouldRenderLayoutStyles = useSelect(
+		const { clientId, name } = props;
+		const blockSupportsLayout = hasLayoutBlockSupport( name );
+		const extraProps = useSelect(
 			( select ) => {
 				// The callback returns early to avoid block editor subscription.
 				if ( ! blockSupportsLayout ) {
-					return false;
+					return;
+				}
+
+				const { getSettings, getBlockSettings } = unlock(
+					select( blockEditorStore )
+				);
+				const { disableLayoutStyles } = getSettings();
+
+				if ( disableLayoutStyles ) {
+					return;
 				}
 
-				return ! select( blockEditorStore ).getSettings()
-					.disableLayoutStyles;
+				const [ blockGapSupport ] = getBlockSettings(
+					clientId,
+					'spacing.blockGap'
+				);
+
+				return { blockGapSupport };
 			},
-			[ blockSupportsLayout ]
+			[ blockSupportsLayout, clientId ]
 		);
 
-		if ( ! shouldRenderLayoutStyles ) {
+		if ( ! extraProps ) {
 			return <BlockListBlock { ...props } />;
 		}
 
 		return (
-			<BlockWithLayoutStyles block={ BlockListBlock } props={ props } />
+			<BlockWithLayoutStyles
+				block={ BlockListBlock }
+				props={ props }
+				{ ...extraProps }
+			/>
 		);
 	},
 	'withLayoutStyles'

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

@@ -1,5 +1,4 @@
 .wp-block-pullquote {
-	padding: 4em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
@@ -36,9 +35,10 @@
 	}
 }
 
-// Lowest specificity to avoid overriding layout styles.
+// Lowest specificity to avoid overriding layout and global styles.
 :where(.wp-block-pullquote) {
 	margin: 0 0 1em 0;
+	padding: 4em 0;
 }
 
 // Ensure that we are reasonably specific to override theme defaults.

packages/components/CHANGELOG.md

@@ -8,6 +8,10 @@
 -   `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
 -   `Text`: Add `text-wrap: pretty;` to improve wrapping. ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).
 
+### Bug Fix
+
+-   `ProgressBar`: Fix CSS variable with invalid value ([#60576](https://github.com/WordPress/gutenberg/pull/60576)).
+
 ## 27.3.0 (2024-04-03)
 
 ### Bug Fix

packages/components/src/progress-bar/index.tsx

@@ -28,7 +28,9 @@ function UnforwardedProgressBar(
 			<ProgressBarStyled.Indicator
 				style={
 					{
-						'--indicator-width': `${ value }%`,
+						'--indicator-width': ! isIndeterminate
+							? `${ value }%`
+							: undefined,
 					} as CSSProperties
 				}
 				isIndeterminate={ isIndeterminate }

packages/components/src/progress-bar/test/index.tsx

@@ -43,6 +43,9 @@ describe( 'ProgressBar', () => {
 		expect( indicator ).toHaveStyle( {
 			width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 		} );
+		expect( indicator ).not.toHaveStyle( {
+			'--indicator-width': expect.any( String ),
+		} );
 	} );
 
 	it( 'should use `value`% as width for determinate progress bar', () => {

packages/dataviews/src/style.scss

@@ -260,13 +260,16 @@
 
 	button.components-button.is-link {
 		text-decoration: none;
-		color: inherit;
 		font-weight: inherit;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
 		display: block;
 		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }
 

packages/scripts/package.json

@@ -91,7 +91,7 @@
 		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"@playwright/test": "^1.42.1",
+		"@playwright/test": "^1.43.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},