diff --git a/package-lock.json b/package-lock.json index d5615eb8e2df1..2819636e591fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -99,7 +99,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", @@ -6979,12 +6979,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", - "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz", + "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==", "dev": true, "dependencies": { - "playwright": "1.42.1" + "playwright": "1.43.0" }, "bin": { "playwright": "cli.js" @@ -42214,12 +42214,12 @@ "dev": true }, "node_modules/playwright": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", - "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz", + "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==", "dev": true, "dependencies": { - "playwright-core": "1.42.1" + "playwright-core": "1.43.0" }, "bin": { "playwright": "cli.js" @@ -42232,9 +42232,9 @@ } }, "node_modules/playwright-core": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", - "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz", + "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -55377,7 +55377,7 @@ "npm": ">=6.14.4" }, "peerDependencies": { - "@playwright/test": "^1.42.1", + "@playwright/test": "^1.43.0", "react": "^18.0.0", "react-dom": "^18.0.0" } @@ -60722,12 +60722,12 @@ } }, "@playwright/test": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", - "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz", + "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==", "dev": true, "requires": { - "playwright": "1.42.1" + "playwright": "1.43.0" } }, "@pmmmwh/react-refresh-webpack-plugin": { @@ -88595,19 +88595,19 @@ "dev": true }, "playwright": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", - "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz", + "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.42.1" + "playwright-core": "1.43.0" } }, "playwright-core": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", - "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", + "version": "1.43.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz", + "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==", "dev": true }, "please-upgrade-node": { diff --git a/package.json b/package.json index edf33accd328a..c7043fa9cc06e 100644 --- a/package.json +++ b/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", diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js index 76f99e24bf244..2ad9ff3405e20 100644 --- a/packages/block-editor/src/components/block-patterns-paging/index.js +++ b/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 > « @@ -53,6 +54,7 @@ export default function Pagination( { onClick={ () => changePage( currentPage - 1 ) } disabled={ currentPage === 1 } aria-label={ __( 'Previous page' ) } + __experimentalIsFocusable > ‹ @@ -75,6 +77,7 @@ export default function Pagination( { onClick={ () => changePage( currentPage + 1 ) } disabled={ currentPage === numPages } aria-label={ __( 'Next page' ) } + __experimentalIsFocusable > › @@ -84,6 +87,7 @@ export default function Pagination( { disabled={ currentPage === numPages } aria-label={ __( 'Last page' ) } size="default" + __experimentalIsFocusable > » diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index d9fa632af32ef..e044bdc1a7d27 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/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 ; } return ( - + ); }, 'withLayoutStyles' diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss index b53dbf6561638..07f6366d47617 100644 --- a/packages/block-library/src/pullquote/style.scss +++ b/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. diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 84cd741f5eb74..2b67511fedc7f 100644 --- a/packages/components/CHANGELOG.md +++ b/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 diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx index 924d993d66c8c..ed13c036e9916 100644 --- a/packages/components/src/progress-bar/index.tsx +++ b/packages/components/src/progress-bar/index.tsx @@ -28,7 +28,9 @@ function UnforwardedProgressBar( { 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', () => { diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index c548565ef848d..1d6a6ec3b6c07 100644 --- a/packages/dataviews/src/style.scss +++ b/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); + } } } diff --git a/packages/scripts/package.json b/packages/scripts/package.json index a97d80578dc3c..e81954c15ae91 100644 --- a/packages/scripts/package.json +++ b/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" },