diff --git a/LICENSE.md b/LICENSE.md index 983294723c4806..12a05f0c071a68 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ ## Gutenberg - Copyright 2016-2024 by the contributors + Copyright 2016-2025 by the contributors **License for Contributions (on and after April 15, 2021)** diff --git a/bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs b/bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs new file mode 100644 index 00000000000000..84d7beaf1e4076 --- /dev/null +++ b/bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import fs from 'node:fs/promises'; +import babel from '@babel/core'; + +/** + * Returns `meta.tags` from a Storybook file. + * + * @param {string} filePath + * @return {Promise} Array of tags. + */ +export async function getTagsFromStorybook( filePath ) { + const fileContent = await fs.readFile( filePath, 'utf8' ); + const parsedFile = babel.parse( fileContent, { + filename: filePath, + } ); + + const meta = parsedFile.program.body.find( + ( node ) => + node.type === 'VariableDeclaration' && + node.declarations[ 0 ].id.name === 'meta' + ); + + return ( + meta.declarations[ 0 ].init.properties + .find( ( node ) => node.key.name === 'tags' ) + ?.value.elements.map( ( node ) => node.value ) ?? [] + ); +} diff --git a/bin/api-docs/gen-components-docs/index.mjs b/bin/api-docs/gen-components-docs/index.mjs index c7109dc4982c36..30888acf851cab 100644 --- a/bin/api-docs/gen-components-docs/index.mjs +++ b/bin/api-docs/gen-components-docs/index.mjs @@ -11,6 +11,7 @@ import path from 'path'; */ import { generateMarkdownDocs } from './markdown/index.mjs'; import { getDescriptionsForSubcomponents } from './get-subcomponent-descriptions.mjs'; +import { getTagsFromStorybook } from './get-tags-from-storybook.mjs'; const MANIFEST_GLOB = 'packages/components/src/**/docs-manifest.json'; @@ -113,9 +114,17 @@ await Promise.all( } ) ?? [] ); + const tags = await getTagsFromStorybook( + path.resolve( + path.dirname( manifestPath ), + 'stories/index.story.tsx' + ) + ); + const docs = generateMarkdownDocs( { typeDocs, subcomponentTypeDocs, + tags, } ); const outputFile = path.resolve( path.dirname( manifestPath ), diff --git a/bin/api-docs/gen-components-docs/markdown/index.mjs b/bin/api-docs/gen-components-docs/markdown/index.mjs index 5978e7e80fe260..28e20dc3de12e0 100644 --- a/bin/api-docs/gen-components-docs/markdown/index.mjs +++ b/bin/api-docs/gen-components-docs/markdown/index.mjs @@ -9,26 +9,32 @@ import json2md from 'json2md'; import { generateMarkdownPropsJson } from './props.mjs'; /** - * If the string is contentful, ensure that it ends with a single newline. - * Otherwise normalize to `undefined`. + * Converter for strings that are already formatted as Markdown. * - * @param {string} [str] + * @param {string} [input] + * @return {string} The trimmed input if it is contentful, otherwise an empty string. */ -function normalizeTrailingNewline( str ) { - if ( ! str?.trim() ) { - return undefined; - } - return str.replace( /\n*$/, '\n' ); -} +json2md.converters.md = ( input ) => { + return input?.trim() || ''; +}; -export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) { +export function generateMarkdownDocs( { + typeDocs, + subcomponentTypeDocs, + tags, +} ) { const mainDocsJson = [ { h1: typeDocs.displayName }, '', + tags.includes( 'status-private' ) && [ + { + p: 'đź”’ This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project.', + }, + ], { p: `

See the WordPress Storybook for more detailed, interactive documentation.

`, }, - normalizeTrailingNewline( typeDocs.description ), + { md: typeDocs.description }, ...generateMarkdownPropsJson( typeDocs.props ), ]; @@ -39,7 +45,7 @@ export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) { { h3: subcomponentTypeDoc.displayName, }, - normalizeTrailingNewline( subcomponentTypeDoc.description ), + { md: subcomponentTypeDoc.description }, ...generateMarkdownPropsJson( subcomponentTypeDoc.props, { headingLevel: 4, } ), @@ -49,5 +55,5 @@ export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) { return json2md( [ ...mainDocsJson, ...subcomponentDocsJson ].filter( Boolean ) - ); + ).replace( /\n+$/gm, '\n' ); // clean unnecessary consecutive newlines } diff --git a/bin/api-docs/gen-components-docs/markdown/props.mjs b/bin/api-docs/gen-components-docs/markdown/props.mjs index aaa73041217528..bacd86256f7e6a 100644 --- a/bin/api-docs/gen-components-docs/markdown/props.mjs +++ b/bin/api-docs/gen-components-docs/markdown/props.mjs @@ -33,7 +33,6 @@ export function generateMarkdownPropsJson( props, { headingLevel = 2 } = {} ) { return [ { [ `h${ headingLevel + 1 }` ]: `\`${ key }\`` }, - prop.description, { ul: [ `Type: \`${ renderPropType( prop.type ) }\``, @@ -42,6 +41,7 @@ export function generateMarkdownPropsJson( props, { headingLevel = 2 } = {} ) { `Default: \`${ prop.defaultValue.value }\``, ].filter( Boolean ), }, + { md: prop.description }, ]; } ) .filter( Boolean ); diff --git a/bin/tsconfig.json b/bin/tsconfig.json index 3ec5d5826a045d..4baf899c9dce9e 100644 --- a/bin/tsconfig.json +++ b/bin/tsconfig.json @@ -16,6 +16,7 @@ "noEmit": true, "outDir": ".cache" }, + "include": [], "files": [ "./api-docs/update-api-docs.js", "./plugin/config.js", diff --git a/bin/validate-tsconfig.mjs b/bin/validate-tsconfig.mjs index 91d74b1bdb413f..47d6a320d7290e 100755 --- a/bin/validate-tsconfig.mjs +++ b/bin/validate-tsconfig.mjs @@ -29,14 +29,33 @@ for ( const packageName of packagesWithTypes ) { hasErrors = true; } - const packageJson = JSON.parse( - readFileSync( `packages/${ packageName }/package.json`, 'utf8' ) - ); - const tsconfigJson = JSON.parse( - stripJsonComments( - readFileSync( `packages/${ packageName }/tsconfig.json`, 'utf8' ) - ) - ); + let packageJson; + try { + packageJson = JSON.parse( + readFileSync( `packages/${ packageName }/package.json`, 'utf8' ) + ); + } catch ( e ) { + console.error( + `Error parsing package.json for package ${ packageName }` + ); + throw e; + } + let tsconfigJson; + try { + tsconfigJson = JSON.parse( + stripJsonComments( + readFileSync( + `packages/${ packageName }/tsconfig.json`, + 'utf8' + ) + ) + ); + } catch ( e ) { + console.error( + `Error parsing tsconfig.json for package ${ packageName }` + ); + throw e; + } if ( packageJson.dependencies ) { for ( const dependency of Object.keys( packageJson.dependencies ) ) { if ( dependency.startsWith( '@wordpress/' ) ) { diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 8ac489e3c154a2..d9120cc58197e9 100644 --- a/docs/getting-started/faq.md +++ b/docs/getting-started/faq.md @@ -8,7 +8,7 @@ What follows is a set of questions that have come up from the last few years of “Gutenberg” is the name of the project to create a new editor experience for WordPress — contributors have been working on it since January 2017 and it’s one of the most significant changes to WordPress in years. It’s built on the idea of using “blocks” to write and design posts and pages. This will serve as the foundation for future improvements to WordPress, including blocks as a way not just to design posts and pages, but also entire sites. The overall goal is to simplify the first-time user experience of WordPress — for those who are writing, editing, publishing, and designing web pages. The editing experience is intended to give users a better visual representation of what their post or page will look like when they hit publish. Originally, this was the kickoff goal: -> The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. +> The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. Key takeaways include the following points: diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7e031fa525e1ff..0715b1e3547e2a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -661,7 +661,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme - **Ancestor:** core/query -- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ ## Post Terms diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 204c9955c3cff1..00000000000000 --- a/jsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@wordpress/*": [ "./*", "./packages/*/src" ] - } - }, - "exclude": [ - "build", - "build-module", - "node_modules", - "packages/e2e-tests/plugins", - "vendor" - ] -} diff --git a/lib/experimental/media/load.php b/lib/experimental/media/load.php index bcb02accf62a6b..18bfd22d4de00f 100644 --- a/lib/experimental/media/load.php +++ b/lib/experimental/media/load.php @@ -247,6 +247,8 @@ function gutenberg_set_up_cross_origin_isolation() { * Uses an output buffer to add crossorigin="anonymous" where needed. * * @link https://web.dev/coop-coep/ + * + * @global bool $is_safari */ function gutenberg_start_cross_origin_isolation_output_buffer(): void { global $is_safari; diff --git a/package-lock.json b/package-lock.json index eb2059e151f539..06e8c147a3e0e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,7 @@ "@types/estree": "1.0.5", "@types/istanbul-lib-report": "3.0.0", "@types/mime": "2.0.3", + "@types/node": "20.17.10", "@types/npm-package-arg": "6.1.1", "@types/prettier": "2.4.4", "@types/qs": "6.9.7", @@ -143,8 +144,8 @@ "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", - "rtlcss": "4.0.0", - "sass": "1.50.1", + "rtlcss": "4.3.0", + "sass": "1.54.0", "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", @@ -11841,6 +11842,16 @@ } } }, + "node_modules/@storybook/builder-webpack5/node_modules/@types/node": { + "version": "22.10.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", + "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, "node_modules/@storybook/builder-webpack5/node_modules/css-loader": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz", @@ -11904,6 +11915,13 @@ "webpack": "^5.0.0" } }, + "node_modules/@storybook/builder-webpack5/node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, "node_modules/@storybook/builder-webpack5/node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", @@ -11978,6 +11996,23 @@ "storybook": "^8.4.7" } }, + "node_modules/@storybook/core-webpack/node_modules/@types/node": { + "version": "22.10.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", + "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, + "node_modules/@storybook/core-webpack/node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, "node_modules/@storybook/core/node_modules/recast": { "version": "0.23.9", "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz", @@ -12190,6 +12225,16 @@ } } }, + "node_modules/@storybook/preset-react-webpack/node_modules/@types/node": { + "version": "22.10.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", + "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, "node_modules/@storybook/preset-react-webpack/node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -12268,6 +12313,13 @@ "node": ">=6" } }, + "node_modules/@storybook/preset-react-webpack/node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, "node_modules/@storybook/preview-api": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.7.tgz", @@ -12504,6 +12556,23 @@ } } }, + "node_modules/@storybook/react-webpack5/node_modules/@types/node": { + "version": "22.10.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", + "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, + "node_modules/@storybook/react-webpack5/node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, "node_modules/@storybook/source-loader": { "version": "8.4.7", "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-8.4.7.tgz", @@ -13849,11 +13918,12 @@ } }, "node_modules/@types/node": { - "version": "22.10.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz", - "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==", + "version": "20.17.10", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz", + "integrity": "sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==", + "license": "MIT", "dependencies": { - "undici-types": "~6.20.0" + "undici-types": "~6.19.2" } }, "node_modules/@types/node-forge": { @@ -15202,23 +15272,6 @@ "node": "^16.13 || >=18" } }, - "node_modules/@wdio/repl/node_modules/@types/node": { - "version": "20.17.9", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz", - "integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==", - "dev": true, - "license": "MIT", - "dependencies": { - "undici-types": "~6.19.2" - } - }, - "node_modules/@wdio/repl/node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "dev": true, - "license": "MIT" - }, "node_modules/@wdio/types": { "version": "8.16.12", "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.16.12.tgz", @@ -15232,23 +15285,6 @@ "node": "^16.13 || >=18" } }, - "node_modules/@wdio/types/node_modules/@types/node": { - "version": "20.17.9", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz", - "integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==", - "dev": true, - "license": "MIT", - "dependencies": { - "undici-types": "~6.19.2" - } - }, - "node_modules/@wdio/types/node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "dev": true, - "license": "MIT" - }, "node_modules/@wdio/utils": { "version": "8.16.17", "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.16.17.tgz", @@ -17972,27 +18008,6 @@ "@babel/core": "^7.0.0" } }, - "node_modules/babel-runtime": { - "version": "6.25.0", - "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz", - "integrity": "sha512-zeCYxDePWYAT/DfmQWIHsMSFW2vv45UIwIAMjGvQVsTd47RwsiRH0uK1yzyWZ7LDBKdhnGDPM6NYEO5CZyhPrg==", - "dependencies": { - "core-js": "^2.4.0", - "regenerator-runtime": "^0.10.0" - } - }, - "node_modules/babel-runtime/node_modules/core-js": { - "version": "2.6.12", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", - "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", - "hasInstallScript": true - }, - "node_modules/babel-runtime/node_modules/regenerator-runtime": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", - "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w==" - }, "node_modules/bail": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz", @@ -41213,14 +41228,14 @@ "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==" }, "node_modules/rtlcss": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.0.0.tgz", - "integrity": "sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==", - "dev": true, + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.3.0.tgz", + "integrity": "sha512-FI+pHEn7Wc4NqKXMXFM+VAYKEj/mRIcW4h24YVwVtyjI+EqGrLc2Hx/Ny0lrZ21cBWU2goLy36eqMcNj3AQJig==", + "license": "MIT", "dependencies": { "escalade": "^3.1.1", "picocolors": "^1.0.0", - "postcss": "^8.4.6", + "postcss": "^8.4.21", "strip-json-comments": "^3.1.1" }, "bin": { @@ -41230,96 +41245,10 @@ "node": ">=12.0.0" } }, - "node_modules/rtlcss-webpack-plugin": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/rtlcss-webpack-plugin/-/rtlcss-webpack-plugin-4.0.7.tgz", - "integrity": "sha512-ouSbJtgcLBBQIsMgarxsDnfgRqm/AS4BKls/mz/Xb6HSl+PdEzefTR+Wz5uWQx4odoX0g261Z7yb3QBz0MTm0g==", - "dependencies": { - "babel-runtime": "~6.25.0", - "rtlcss": "^3.5.0" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/find-up": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", - "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", - "dependencies": { - "locate-path": "^6.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dependencies": { - "p-locate": "^5.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dependencies": { - "p-limit": "^3.0.2" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "engines": { - "node": ">=8" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/rtlcss": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz", - "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==", - "dependencies": { - "find-up": "^5.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.3.11", - "strip-json-comments": "^3.1.1" - }, - "bin": { - "rtlcss": "bin/rtlcss.js" - } - }, - "node_modules/rtlcss-webpack-plugin/node_modules/strip-json-comments": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", - "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/rtlcss/node_modules/strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true, "engines": { "node": ">=8" }, @@ -41623,9 +41552,9 @@ } }, "node_modules/sass": { - "version": "1.50.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.1.tgz", - "integrity": "sha512-noTnY41KnlW2A9P8sdwESpDmo+KBNkukI1i8+hOK3footBUcohNHtdOJbckp46XO95nuvcHDDZ+4tmOnpK3hjw==", + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.0.tgz", + "integrity": "sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ==", "license": "MIT", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -45408,9 +45337,10 @@ } }, "node_modules/undici-types": { - "version": "6.20.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", - "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==" + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "license": "MIT" }, "node_modules/unherit": { "version": "1.1.1", @@ -46562,16 +46492,6 @@ "node": ">=14.16" } }, - "node_modules/webdriver/node_modules/@types/node": { - "version": "20.17.9", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz", - "integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==", - "dev": true, - "license": "MIT", - "dependencies": { - "undici-types": "~6.19.2" - } - }, "node_modules/webdriver/node_modules/cacheable-lookup": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz", @@ -46732,13 +46652,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/webdriver/node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "dev": true, - "license": "MIT" - }, "node_modules/webdriver/node_modules/ws": { "version": "8.18.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", @@ -46835,16 +46748,6 @@ } } }, - "node_modules/webdriverio/node_modules/@types/node": { - "version": "20.17.9", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz", - "integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==", - "dev": true, - "license": "MIT", - "dependencies": { - "undici-types": "~6.19.2" - } - }, "node_modules/webdriverio/node_modules/aria-query": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz", @@ -47092,13 +46995,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/webdriverio/node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "dev": true, - "license": "MIT" - }, "node_modules/webdriverio/node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", @@ -52464,8 +52360,8 @@ "react-refresh": "^0.14.0", "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", - "rtlcss-webpack-plugin": "^4.0.7", - "sass": "^1.50.1", + "rtlcss": "^4.3.0", + "sass": "^1.54.0", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", "source-map-loader": "^3.0.0", diff --git a/package.json b/package.json index de73148bd62450..8d90f3cbda43fd 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@types/estree": "1.0.5", "@types/istanbul-lib-report": "3.0.0", "@types/mime": "2.0.3", + "@types/node": "20.17.10", "@types/npm-package-arg": "6.1.1", "@types/prettier": "2.4.4", "@types/qs": "6.9.7", @@ -152,8 +153,8 @@ "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", - "rtlcss": "4.0.0", - "sass": "1.50.1", + "rtlcss": "4.3.0", + "sass": "1.54.0", "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", diff --git a/packages/a11y/tsconfig.json b/packages/a11y/tsconfig.json index 093c2775f96d66..13229eadde8f21 100644 --- a/packages/a11y/tsconfig.json +++ b/packages/a11y/tsconfig.json @@ -1,10 +1,5 @@ { "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types" - }, - "references": [ { "path": "../dom-ready" }, { "path": "../i18n" } ], - "include": [ "src/**/*" ] + "references": [ { "path": "../dom-ready" }, { "path": "../i18n" } ] } diff --git a/packages/api-fetch/tsconfig.json b/packages/api-fetch/tsconfig.json index f9d517286a102f..635fe4a8c0d353 100644 --- a/packages/api-fetch/tsconfig.json +++ b/packages/api-fetch/tsconfig.json @@ -1,11 +1,6 @@ { "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types" - }, "references": [ { "path": "../i18n" }, { "path": "../url" } ], - "include": [ "src/**/*" ], - "exclude": [ "**/test/**/*" ] + "exclude": [ "**/test" ] } diff --git a/packages/autop/tsconfig.json b/packages/autop/tsconfig.json index a09ec7466c435b..f68a855bab79cc 100644 --- a/packages/autop/tsconfig.json +++ b/packages/autop/tsconfig.json @@ -1,10 +1,5 @@ { "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types" - }, - "references": [ { "path": "../dom-ready" } ], - "include": [ "src/**/*" ] + "references": [ { "path": "../dom-ready" } ] } diff --git a/packages/blob/tsconfig.json b/packages/blob/tsconfig.json index 6e33d8ff82d47e..7ff060ab6ce105 100644 --- a/packages/blob/tsconfig.json +++ b/packages/blob/tsconfig.json @@ -1,9 +1,4 @@ { "$schema": "https://json.schemastore.org/tsconfig.json", - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types" - }, - "include": [ "src/**/*" ] + "extends": "../../tsconfig.base.json" } diff --git a/packages/block-editor/src/components/block-card/README.md b/packages/block-editor/src/components/block-card/README.md index 216cf4e3865a04..79a42bc20df74a 100644 --- a/packages/block-editor/src/components/block-card/README.md +++ b/packages/block-editor/src/components/block-card/README.md @@ -21,6 +21,7 @@ const MyBlockCard = () => ( icon={ paragraph } title="Paragraph" description="Start with the basic building block of all narrative." + name="Custom Block" /> ); ``` @@ -45,6 +46,12 @@ The title of the block. The description of the block. +#### name + +- **Type:** `String` + +The custom name of the block. + ## Related components Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree. diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index 988dcfb2216b2a..525a594702e301 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -6,26 +6,55 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import deprecated from '@wordpress/deprecated'; import { Button, __experimentalText as Text, __experimentalVStack as VStack, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { chevronLeft, chevronRight } from '@wordpress/icons'; +import { useDispatch, useSelect } from '@wordpress/data'; +import deprecated from '@wordpress/deprecated'; import { __, isRTL } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { chevronLeft, chevronRight } from '@wordpress/icons'; /** * Internal dependencies */ -import BlockIcon from '../block-icon'; -import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { store as blockEditorStore } from '../../store'; +import BlockIcon from '../block-icon'; const { Badge } = unlock( componentsPrivateApis ); +/** + * A card component that displays block information including title, icon, and description. + * Can be used to show block metadata and navigation controls for parent blocks. + * + * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-card/README.md + * + * @example + * ```jsx + * function Example() { + * return ( + * + * ); + * } + * ``` + * + * @param {Object} props Component props. + * @param {string} props.title The title of the block. + * @param {string|Object} props.icon The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element. + * @param {string} props.description The description of the block. + * @param {Object} [props.blockType] Deprecated: Object containing block type data. + * @param {string} [props.className] Additional classes to apply to the card. + * @param {string} [props.name] Custom block name to display before the title. + * @return {Element} Block card component. + */ function BlockCard( { title, icon, description, blockType, className, name } ) { if ( blockType ) { deprecated( '`blockType` property in `BlockCard component`', { diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md new file mode 100644 index 00000000000000..7b048dfdb7e0d2 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -0,0 +1,59 @@ +# BorderRadiusControl + +`BorderRadiusControl` is a React component that provides a user interface for managing border radius values. It allows users to control the border radius of each corner independently or link them together for uniform values. + +## Usage + +```jsx +/** + * WordPress dependencies + */ +import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor'; +import { useState } from '@wordpress/element'; + +const MyBorderRadiusControl = () => { + const [values, setValues] = useState({ + topLeft: '10px', + topRight: '10px', + bottomLeft: '10px', + bottomRight: '10px', + }); + + return ( + + ); +}; +``` + +## Props + +### values + +An object containing the border radius values for each corner. + +- **Type:** `Object` +- **Required:** No +- **Default:** `undefined` + +The values object has the following schema: + +| Property | Description | Type | +| ----------- | ------------------------------------ | ------ | +| topLeft | Border radius for top left corner | string | +| topRight | Border radius for top right corner | string | +| bottomLeft | Border radius for bottom left corner | string | +| bottomRight | Border radius for bottom right corner| string | + +Each value should be a valid CSS border radius value (e.g., '10px', '1em'). + +### onChange + +Callback function that is called when any border radius value changes. + +- **Type:** `Function` +- **Required:** Yes + +The function receives the updated values object as its argument. \ No newline at end of file diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js new file mode 100644 index 00000000000000..28844a5e5cace1 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BorderRadiusControl from '../'; + +const meta = { + title: 'BlockEditor/BorderRadiusControl', + component: BorderRadiusControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: 'Control to display border radius options.', + }, + }, + }, + argTypes: { + values: { + control: 'object', + description: 'Border radius values.', + table: { + type: { summary: 'object' }, + }, + }, + onChange: { + action: 'onChange', + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: 'Callback to handle onChange.', + }, + }, +}; + +export default meta; + +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ values, setValues ] = useState( args.values ); + + return ( + { + setValues( ...changeArgs ); + onChange( ...changeArgs ); + } } + /> + ); + }, +}; diff --git a/packages/block-editor/src/components/contrast-checker/stories/index.story.js b/packages/block-editor/src/components/contrast-checker/stories/index.story.js new file mode 100644 index 00000000000000..4518ab2ba7cd67 --- /dev/null +++ b/packages/block-editor/src/components/contrast-checker/stories/index.story.js @@ -0,0 +1,117 @@ +/** + * Internal dependencies + */ +import ContrastChecker from '../'; + +const meta = { + title: 'BlockEditor/ContrastChecker', + component: ContrastChecker, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color.', + }, + }, + }, + argTypes: { + backgroundColor: { + control: 'color', + description: + 'The background color to check the contrast of text against.', + table: { + type: { + summary: 'string', + }, + }, + }, + fallbackBackgroundColor: { + control: 'color', + description: + 'A fallback background color value, in case `backgroundColor` is not available.', + table: { + type: { + summary: 'string', + }, + }, + }, + textColor: { + control: 'color', + description: + 'The text color to check the contrast of the background against.', + table: { + type: { + summary: 'string', + }, + }, + }, + fallbackTextColor: { + control: 'color', + description: + 'A fallback text color value, in case `textColor` is not available.', + table: { + type: { + summary: 'string', + }, + }, + }, + fontSize: { + control: 'number', + description: + 'The font-size (as a `px` value) of the text to check the contrast against.', + table: { + type: { + summary: 'number', + }, + }, + }, + isLargeText: { + control: 'boolean', + description: + 'Whether the text is large (approximately `24px` or higher).', + table: { + type: { + summary: 'boolean', + }, + }, + }, + linkColor: { + control: 'color', + description: 'The link color to check the contrast against.', + table: { + type: { + summary: 'string', + }, + }, + }, + fallbackLinkColor: { + control: 'color', + description: 'Fallback link color if linkColor is not available.', + table: { + type: { + summary: 'string', + }, + }, + }, + enableAlphaChecker: { + control: 'boolean', + description: 'Whether to enable checking for transparent colors.', + table: { + type: { + summary: 'boolean', + }, + defaultValue: { summary: false }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + args: { + backgroundColor: '#ffffff', + textColor: '#ffffff', + }, +}; diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js index b853d780052942..aeb8a5f957425f 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js @@ -13,8 +13,9 @@ import { import AspectRatioTool from '../aspect-ratio-tool'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool', + title: 'BlockEditor/DimensionsTool/AspectRatioTool', component: AspectRatioTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js index ebf08fba0c686b..0ccfba2b9e97a6 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js @@ -13,8 +13,9 @@ import { import DimensionsTool from '..'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool', + title: 'BlockEditor/DimensionsTool/DimensionsTool', component: DimensionsTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js index b485bf68a892d9..ea0a3ec194beed 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js @@ -13,8 +13,9 @@ import { import ScaleTool from '../scale-tool'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool', + title: 'BlockEditor/DimensionsTool/ScaleTool', component: ScaleTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js index eed3cbc02f466e..86b3b4b22be60d 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js @@ -13,8 +13,9 @@ import { import WidthHeightTool from '../width-height-tool'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool', + title: 'BlockEditor/DimensionsTool/WidthHeightTool', component: WidthHeightTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js index fd801779372aac..505785c87914d7 100644 --- a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js +++ b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js @@ -7,7 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6'; * WordPress dependencies */ import { useRef, useLayoutEffect } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useRegistry } from '@wordpress/data'; import { synchronizeBlocksWithTemplate } from '@wordpress/blocks'; /** @@ -42,14 +42,7 @@ export default function useInnerBlockTemplateSync( ) { // Instead of adding a useSelect mapping here, please add to the useSelect // mapping in InnerBlocks! Every subscription impacts performance. - - const { - getBlocks, - getSelectedBlocksInitialCaretPosition, - isBlockSelected, - } = useSelect( blockEditorStore ); - const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = - useDispatch( blockEditorStore ); + const registry = useRegistry(); // Maintain a reference to the previous value so we can do a deep equality check. const existingTemplateRef = useRef( null ); @@ -57,6 +50,14 @@ export default function useInnerBlockTemplateSync( useLayoutEffect( () => { let isCancelled = false; + const { + getBlocks, + getSelectedBlocksInitialCaretPosition, + isBlockSelected, + } = registry.select( blockEditorStore ); + const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = + registry.dispatch( blockEditorStore ); + // There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate // The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization), // we need to schedule this one in a microtask as well. @@ -110,5 +111,11 @@ export default function useInnerBlockTemplateSync( return () => { isCancelled = true; }; - }, [ template, templateLock, clientId ] ); + }, [ + template, + templateLock, + clientId, + registry, + templateInsertUpdatesSelection, + ] ); } diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js index 9b838446469229..fcc2cea4043753 100644 --- a/packages/block-editor/src/components/keyboard-shortcuts/index.js +++ b/packages/block-editor/src/components/keyboard-shortcuts/index.js @@ -29,8 +29,8 @@ function KeyboardShortcutsRegister() { category: 'block', description: __( 'Remove the selected block(s).' ), keyCombination: { - modifier: 'access', - character: 'z', + modifier: 'shift', + character: 'backspace', }, } ); diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index dd6000a5f68451..c2e1a43d2013e6 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ @@ -61,10 +56,7 @@ const MediaReplaceFlow = ( { handleUpload = true, popoverProps, } ) => { - const mediaUpload = useSelect( ( select ) => { - return select( blockEditorStore ).getSettings().mediaUpload; - }, [] ); - const canUpload = !! mediaUpload; + const { getSettings } = useSelect( blockEditorStore ); const editMediaButtonRef = useRef(); const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`; @@ -107,7 +99,7 @@ const MediaReplaceFlow = ( { return onSelect( files ); } onFilesUpload( files ); - mediaUpload( { + getSettings().mediaUpload( { allowedTypes, filesList: files, onFileChange: ( [ media ] ) => { @@ -219,15 +211,7 @@ const MediaReplaceFlow = ( { { onSelectURL && ( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -
+ { __( 'Current media URL:' ) } diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss index 61df542cf58404..d9d8d1c98c11f5 100644 --- a/packages/block-editor/src/components/media-replace-flow/style.scss +++ b/packages/block-editor/src/components/media-replace-flow/style.scss @@ -9,17 +9,17 @@ margin-left: 4px; } +.block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input { + border-top: $border-width solid $gray-900; + margin-top: $grid-unit-10; + padding-bottom: $grid-unit-10; +} + .block-editor-media-flow__url-input { margin-right: -$grid-unit-10; margin-left: -$grid-unit-10; padding: $grid-unit-20; - &.has-siblings { - border-top: $border-width solid $gray-900; - margin-top: $grid-unit-10; - padding-bottom: $grid-unit-10; - } - .block-editor-media-replace-flow__image-url-label { display: block; top: $grid-unit-20; diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js index df43cb6acb096d..b73a2d5f249723 100644 --- a/packages/block-editor/src/components/resolution-tool/index.js +++ b/packages/block-editor/src/components/resolution-tool/index.js @@ -33,6 +33,7 @@ export default function ResolutionTool( { options = DEFAULT_SIZE_OPTIONS, defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value, isShownByDefault = true, + resetAllFilter, } ) { const displayValue = value ?? defaultValue; return ( @@ -42,6 +43,7 @@ export default function ResolutionTool( { onDeselect={ () => onChange( defaultValue ) } isShownByDefault={ isShownByDefault } panelId={ panelId } + resetAllFilter={ resetAllFilter } > { - const [ resolution, setResolution ] = useState( undefined ); - const resetAll = () => { - setResolution( undefined ); +export const Default = ( { + label, + panelId, + onChange: onChangeProp, + ...props +} ) => { + const [ attributes, setAttributes ] = useReducer( + ( prevState, nextState ) => ( { ...prevState, ...nextState } ), + {} + ); + const { resolution } = attributes; + const resetAll = ( resetFilters = [] ) => { + let newAttributes = {}; + + resetFilters.forEach( ( resetFilter ) => { + newAttributes = { + ...newAttributes, + ...resetFilter( newAttributes ), + }; + } ); + + setAttributes( newAttributes ); onChangeProp( undefined ); }; return ( - + { - setResolution( newValue ); + setAttributes( { resolution: newValue } ); onChangeProp( newValue ); } } value={ resolution } + resetAllFilter={ () => ( { + resolution: undefined, + } ) } { ...props } /> @@ -44,5 +70,7 @@ export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => { ); }; Default.args = { + label: 'Settings', + defaultValue: 'full', panelId: 'panel-id', }; diff --git a/packages/block-editor/src/components/rich-text/event-listeners/delete.js b/packages/block-editor/src/components/rich-text/event-listeners/delete.js index ae3fd733bb94e1..8373ca3c9f72ae 100644 --- a/packages/block-editor/src/components/rich-text/event-listeners/delete.js +++ b/packages/block-editor/src/components/rich-text/event-listeners/delete.js @@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text'; export default ( props ) => ( element ) => { function onKeyDown( event ) { - const { keyCode } = event; + const { keyCode, shiftKey } = event; if ( event.defaultPrevented ) { return; @@ -30,6 +30,11 @@ export default ( props ) => ( element ) => { return; } + // Exclude shift+backspace as they are shortcuts for deleting blocks. + if ( shiftKey ) { + return; + } + if ( onMerge ) { onMerge( ! isReverse ); } diff --git a/packages/block-editor/src/components/text-alignment-control/README.md b/packages/block-editor/src/components/text-alignment-control/README.md new file mode 100644 index 00000000000000..243a5fec7938b7 --- /dev/null +++ b/packages/block-editor/src/components/text-alignment-control/README.md @@ -0,0 +1,49 @@ +# TextAlignmentControl + +The `TextAlignmentControl` component is responsible for rendering a control element that allows users to select and apply text alignment options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for aligning text with options such as `left`, `center` and `right`. + +## Usage + +Renders the Text Alignment Component with `left`, `center` and `right` alignment options. + +```jsx +import { TextAlignmentControl } from '@wordpress/block-editor'; + +const MyTextAlignmentControlComponent = () => ( + { + setAttributes( { textAlign: value } ); + } } + /> +); +``` + +## Props + +### `value` + +- **Type:** `String` +- **Default:** `undefined` +- **Options:** `left`, `center`, `right`, `justify` + +The current value of the text alignment setting. You may only choose from the `Options` listed above. + +### `onChange` + +- **Type:** `Function` + +A callback function invoked when the text alignment value is changed via an interaction with any of the options. The function is called with the new alignment value (`left`, `center`, `right`) as the only argument. + +### `className` + +- **Type:** `String` + +Class name to add to the control for custom styling. + +### `options` + +- **Type:** `Array` +- **Default:** [`left`, `center`, `right`] + +An array that determines which alignment options will be available in the control. You can pass an array of alignment values to customize the options. diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js index fd97f9b60e6a90..076535ab330d69 100644 --- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js @@ -11,6 +11,7 @@ import TextAlignmentControl from '../'; const meta = { title: 'BlockEditor/TextAlignmentControl', component: TextAlignmentControl, + tags: [ 'status-private' ], parameters: { docs: { canvas: { sourceState: 'shown' }, diff --git a/packages/block-editor/src/components/text-transform-control/README.md b/packages/block-editor/src/components/text-transform-control/README.md index 3ed8f1da8cd6e9..cd23461d3eb332 100644 --- a/packages/block-editor/src/components/text-transform-control/README.md +++ b/packages/block-editor/src/components/text-transform-control/README.md @@ -2,7 +2,7 @@ The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`. -![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true) +![TextTransformControl Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true) ## Development guidelines diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index c7f9df868f2bd7..0e4c2aa276fd40 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; export { useCachedTruthy } from './use-cached-truthy'; export { useEditorWrapperStyles } from './use-editor-wrapper-styles'; +export { getTypographyClassesAndStyles } from './use-typography-props'; diff --git a/packages/block-editor/tsconfig.json b/packages/block-editor/tsconfig.json index a3c7d1ffd88077..a3a6bd18f451d5 100644 --- a/packages/block-editor/tsconfig.json +++ b/packages/block-editor/tsconfig.json @@ -1,10 +1,6 @@ { "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types" - }, "references": [ { "path": "../a11y" }, { "path": "../api-fetch" }, @@ -37,5 +33,6 @@ // NOTE: This package is being progressively typed. You are encouraged to // expand this array with files which can be type-checked. At some point in // the future, this can be simplified to an `includes` of `src/**/*`. - "files": [ "src/components/block-context/index.js", "src/utils/dom.js" ] + "files": [ "src/components/block-context/index.js", "src/utils/dom.js" ], + "include": [] } diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 2c1c05baa20dd3..6fcb7aca4c5923 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -85,6 +85,16 @@ } }, "typography": { + "__experimentalSkipSerialization": [ + "fontSize", + "lineHeight", + "fontFamily", + "fontWeight", + "fontStyle", + "textTransform", + "textDecoration", + "letterSpacing" + ], "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, @@ -122,7 +132,6 @@ "width": true } }, - "__experimentalSelector": ".wp-block-button .wp-block-button__link", "interactivity": { "clientNavigation": true } @@ -132,5 +141,11 @@ { "name": "outline", "label": "Outline" } ], "editorStyle": "wp-block-button-editor", - "style": "wp-block-button" + "style": "wp-block-button", + "selectors": { + "root": ".wp-block-button .wp-block-button__link", + "typography": { + "writingMode": ".wp-block-button" + } + } } diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 8ab83e1b09518f..f478c39a0dc326 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -14,6 +14,8 @@ import { __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, + __experimentalGetElementClassName, } from '@wordpress/block-editor'; import { compose } from '@wordpress/compose'; @@ -132,6 +134,192 @@ const blockAttributes = { }, }; +const v12 = { + attributes: { + tagName: { + type: 'string', + enum: [ 'a', 'button' ], + default: 'a', + }, + type: { + type: 'string', + default: 'button', + }, + textAlign: { + type: 'string', + }, + url: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'href', + }, + title: { + type: 'string', + source: 'attribute', + selector: 'a,button', + attribute: 'title', + role: 'content', + }, + text: { + type: 'rich-text', + source: 'rich-text', + selector: 'a,button', + role: 'content', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'target', + role: 'content', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'rel', + role: 'content', + }, + placeholder: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + gradient: { + type: 'string', + }, + width: { + type: 'number', + }, + }, + supports: { + anchor: true, + align: true, + alignWide: false, + color: { + __experimentalSkipSerialization: true, + gradients: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalLetterSpacing: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + }, + }, + reusable: false, + shadow: { + __experimentalSkipSerialization: true, + }, + spacing: { + __experimentalSkipSerialization: true, + padding: [ 'horizontal', 'vertical' ], + __experimentalDefaultControls: { + padding: true, + }, + }, + __experimentalBorder: { + color: true, + radius: true, + style: true, + width: true, + __experimentalSkipSerialization: true, + __experimentalDefaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, + __experimentalSelector: '.wp-block-button__link', + interactivity: { + clientNavigation: true, + }, + }, + save( { attributes, className } ) { + const { + tagName, + type, + textAlign, + fontSize, + linkTarget, + rel, + style, + text, + title, + url, + width, + } = attributes; + + const TagName = tagName || 'a'; + const isButtonTag = 'button' === TagName; + const buttonType = type || 'button'; + const borderProps = getBorderClassesAndStyles( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); + const spacingProps = getSpacingClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); + const buttonClasses = clsx( + 'wp-block-button__link', + colorProps.className, + borderProps.className, + { + [ `has-text-align-${ textAlign }` ]: textAlign, + // For backwards compatibility add style that isn't provided via + // block support. + 'no-border-radius': style?.border?.radius === 0, + }, + __experimentalGetElementClassName( 'button' ) + ); + const buttonStyle = { + ...borderProps.style, + ...colorProps.style, + ...spacingProps.style, + ...shadowProps.style, + }; + + // The use of a `title` attribute here is soft-deprecated, but still applied + // if it had already been assigned, for the sake of backward-compatibility. + // A title will no longer be assigned for new or updated button block links. + + const wrapperClasses = clsx( className, { + [ `has-custom-width wp-block-button__width-${ width }` ]: width, + [ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize, + } ); + + return ( +
+ +
+ ); + }, +}; + const v11 = { attributes: { url: { @@ -399,6 +587,7 @@ const v10 = { }; const deprecated = [ + v12, v11, v10, { diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index d00e522f5a5d2a..593066d6555b40 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -39,6 +39,8 @@ import { __experimentalGetElementClassName, store as blockEditorStore, useBlockEditingMode, + getTypographyClassesAndStyles as useTypographyProps, + useSettings, } from '@wordpress/block-editor'; import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; @@ -125,14 +127,14 @@ function WidthPanel( { selectedWidth, setAttributes } ) { dropdownMenuProps={ dropdownMenuProps } > !! selectedWidth } onDeselect={ () => setAttributes( { width: undefined } ) } __nextHasNoMarginBottom > setAttributes( { width: newWidth } ) @@ -266,6 +268,19 @@ function ButtonEdit( props ) { [ context, isSelected, metadata?.bindings?.url ] ); + const [ fluidTypographySettings, layout ] = useSettings( + 'typography.fluid', + 'layout' + ); + const typographyProps = useTypographyProps( attributes, { + typography: { + fluid: fluidTypographySettings, + }, + layout: { + wideSize: layout?.wideSize, + }, + } ); + return ( <>
count } onDeselect={ () => updateColumns( count, minCount ) } > - - updateColumns( count, Math.max( minCount, value ) ) - } - min={ Math.max( 1, minCount ) } - max={ Math.max( 6, count ) } - /> - { count > 6 && ( - - { __( - 'This column count exceeds the recommended amount and may cause visual breakage.' - ) } - - ) } + + + updateColumns( + count, + Math.max( minCount, value ) + ) + } + min={ Math.max( 1, minCount ) } + max={ Math.max( 6, count ) } + /> + { count > 6 && ( + + { __( + 'This column count exceeds the recommended amount and may cause visual breakage.' + ) } + + ) } + ) } - featuredImage && - select( coreStore ).getMedia( featuredImage, { context: 'view' } ), - [ featuredImage ] + const { media } = useSelect( + ( select ) => { + return { + media: + featuredImage && useFeaturedImage + ? select( coreStore ).getMedia( featuredImage, { + context: 'view', + } ) + : undefined, + }; + }, + [ featuredImage, useFeaturedImage ] ); const mediaUrl = media?.media_details?.sizes?.[ sizeSlug ]?.source_url ?? diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index a16d5a6c2c69c7..34be4387caad74 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -49,7 +49,6 @@ @import "./template-part/editor.scss"; @import "./text-columns/editor.scss"; @import "./video/editor.scss"; -@import "./post-template/editor.scss"; @import "./query/editor.scss"; @import "./query-pagination/editor.scss"; @import "./query-pagination-numbers/editor.scss"; diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index a946a499b26f21..820c7927303114 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -76,6 +76,7 @@ function attributesFromMedia( { mediaLink: undefined, href: undefined, focalPoint: undefined, + useFeaturedImage: false, } ); return; } @@ -128,10 +129,37 @@ function attributesFromMedia( { mediaLink: media.link || undefined, href: newHref, focalPoint: undefined, + useFeaturedImage: false, } ); }; } +function MediaTextResolutionTool( { image, value, onChange } ) { + const { imageSizes } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return { + imageSizes: getSettings().imageSizes, + }; + }, [] ); + + if ( ! imageSizes?.length ) { + return null; + } + + const imageSizeOptions = imageSizes + .filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) ) + .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); + + return ( + + ); +} + function MediaTextEdit( { attributes, isSelected, @@ -152,12 +180,12 @@ function MediaTextEdit( { mediaType, mediaUrl, mediaWidth, + mediaSizeSlug, rel, verticalAlignment, allowedBlocks, useFeaturedImage, } = attributes; - const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; const [ featuredImage ] = useEntityProp( 'postType', @@ -166,11 +194,32 @@ function MediaTextEdit( { postId ); - const featuredImageMedia = useSelect( - ( select ) => - featuredImage && - select( coreStore ).getMedia( featuredImage, { context: 'view' } ), - [ featuredImage ] + const { featuredImageMedia } = useSelect( + ( select ) => { + return { + featuredImageMedia: + featuredImage && useFeaturedImage + ? select( coreStore ).getMedia( featuredImage, { + context: 'view', + } ) + : undefined, + }; + }, + [ featuredImage, useFeaturedImage ] + ); + + const { image } = useSelect( + ( select ) => { + return { + image: + mediaId && isSelected + ? select( coreStore ).getMedia( mediaId, { + context: 'view', + } ) + : null, + }; + }, + [ isSelected, mediaId ] ); const featuredImageURL = useFeaturedImage @@ -197,22 +246,6 @@ function MediaTextEdit( { } ); }; - const { imageSizes, image } = useSelect( - ( select ) => { - const { getSettings } = select( blockEditorStore ); - return { - image: - mediaId && isSelected - ? select( coreStore ).getMedia( mediaId, { - context: 'view', - } ) - : null, - imageSizes: getSettings()?.imageSizes, - }; - }, - [ isSelected, mediaId ] - ); - const refMedia = useRef(); const imperativeFocalPointPreview = ( value ) => { const { style } = refMedia.current; @@ -260,10 +293,6 @@ function MediaTextEdit( { const onVerticalAlignmentChange = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); }; - - const imageSizeOptions = imageSizes - .filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) ) - .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); const updateImage = ( newMediaSizeSlug ) => { const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug ); @@ -409,9 +438,9 @@ function MediaTextEdit( { ) } { mediaType === 'image' && ! useFeaturedImage && ( - ) } diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json index 67831b1d15c5d5..8e23bc7a695070 100644 --- a/packages/block-library/src/post-comments-link/block.json +++ b/packages/block-library/src/post-comments-link/block.json @@ -42,6 +42,13 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true } - } + }, + "style": "wp-block-post-comments-link" } diff --git a/packages/block-library/src/post-comments-link/style.scss b/packages/block-library/src/post-comments-link/style.scss new file mode 100644 index 00000000000000..110179d3ee1df9 --- /dev/null +++ b/packages/block-library/src/post-comments-link/style.scss @@ -0,0 +1,4 @@ +.wp-block-post-comments-link { + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; +} diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 5a3e40a126bf8d..9a71a96b2db846 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -12,10 +12,18 @@ import { } from '@wordpress/components'; import { useSettings, + privateApis as blockEditorPrivateApis, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import { unlock } from '../lock-unlock'; + +const { ResolutionTool } = unlock( blockEditorPrivateApis ); + const SCALE_OPTIONS = ( <> ) } { !! imageSizeOptions.length && ( - !! sizeSlug } - label={ __( 'Resolution' ) } - onDeselect={ () => - setAttributes( { sizeSlug: undefined } ) + + setAttributes( { sizeSlug: nextSizeSlug } ) } + isShownByDefault={ false } resetAllFilter={ () => ( { - sizeSlug: undefined, + sizeSlug: DEFAULT_SIZE, } ) } - isShownByDefault={ false } - panelId={ clientId } - > - - setAttributes( { sizeSlug: nextSizeSlug } ) - } - help={ __( 'Select the size of the source image.' ) } - /> - + /> ) } ); diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 6e1f58155590f3..57664b271bca46 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -43,15 +43,25 @@ } }, "spacing": { + "margin": true, + "padding": true, "blockGap": { "__experimentalDefault": "1.25em" }, "__experimentalDefaultControls": { - "blockGap": true + "blockGap": true, + "padding" : false, + "margin" : false } }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true } }, "style": "wp-block-post-template", diff --git a/packages/block-library/src/post-template/editor.scss b/packages/block-library/src/post-template/editor.scss deleted file mode 100644 index 7b426b0f3d37a5..00000000000000 --- a/packages/block-library/src/post-template/editor.scss +++ /dev/null @@ -1,7 +0,0 @@ -.editor-styles-wrapper { - ul.wp-block-post-template { - padding-left: 0; - margin-left: 0; - list-style: none; - } -} diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss index 806aadc77470eb..e6896f2db024a8 100644 --- a/packages/block-library/src/post-template/style.scss +++ b/packages/block-library/src/post-template/style.scss @@ -4,6 +4,8 @@ max-width: 100%; list-style: none; padding: 0; + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; // These rules no longer apply but should be kept for backwards compatibility. &.is-flex-container { diff --git a/packages/block-library/src/query-total/block.json b/packages/block-library/src/query-total/block.json index 02dbbbbb00f749..f6449fbd8ad4bd 100644 --- a/packages/block-library/src/query-total/block.json +++ b/packages/block-library/src/query-total/block.json @@ -40,6 +40,13 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true } - } + }, + "style": "wp-block-query-total" } diff --git a/packages/block-library/src/query-total/edit.js b/packages/block-library/src/query-total/edit.js index 4824021ae99b0d..d91a1990715727 100644 --- a/packages/block-library/src/query-total/edit.js +++ b/packages/block-library/src/query-total/edit.js @@ -48,27 +48,25 @@ export default function QueryTotalEdit( { attributes, setAttributes } ) { // Controls for the block. const controls = ( - <> - - - - - - + + + + + ); // Render output based on the selected display type. const renderDisplay = () => { if ( displayType === 'total-results' ) { - return
{ __( '12 results found' ) }
; + return <>{ __( '12 results found' ) }; } if ( displayType === 'range-display' ) { - return
{ __( 'Displaying 1 – 10 of 12' ) }
; + return <>{ __( 'Displaying 1 – 10 of 12' ) }; } return null; diff --git a/packages/block-library/src/query-total/index.php b/packages/block-library/src/query-total/index.php index c78d0498f634f1..ff2ac486727b92 100644 --- a/packages/block-library/src/query-total/index.php +++ b/packages/block-library/src/query-total/index.php @@ -40,14 +40,14 @@ function render_block_core_query_total( $attributes, $content, $block ) { switch ( $attributes['displayType'] ) { case 'range-display': if ( $start === $end ) { - $range_text = sprintf( + $output = sprintf( /* translators: 1: Start index of posts, 2: Total number of posts */ __( 'Displaying %1$s of %2$s' ), $start, $max_rows ); } else { - $range_text = sprintf( + $output = sprintf( /* translators: 1: Start index of posts, 2: End index of posts, 3: Total number of posts */ __( 'Displaying %1$s – %2$s of %3$s' ), $start, @@ -56,17 +56,12 @@ function render_block_core_query_total( $attributes, $content, $block ) { ); } - $output = sprintf( '

%s

', $range_text ); break; case 'total-results': default: // translators: %d: number of results. - $total_text = sprintf( _n( '%d result found', '%d results found', $max_rows ), $max_rows ); - $output = sprintf( - '

%s

', - $total_text - ); + $output = sprintf( _n( '%d result found', '%d results found', $max_rows ), $max_rows ); break; } diff --git a/packages/block-library/src/query-total/style.scss b/packages/block-library/src/query-total/style.scss new file mode 100644 index 00000000000000..c6a2bc131cfaf9 --- /dev/null +++ b/packages/block-library/src/query-total/style.scss @@ -0,0 +1,4 @@ +.wp-block-query-total { + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; +} diff --git a/packages/block-library/src/read-more/index.js b/packages/block-library/src/read-more/index.js index 497cd77f429e62..f982f35151b4b8 100644 --- a/packages/block-library/src/read-more/index.js +++ b/packages/block-library/src/read-more/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { link as icon } from '@wordpress/icons'; /** @@ -16,6 +17,11 @@ export { metadata, name }; export const settings = { icon, edit, + example: { + attributes: { + content: __( 'Read more' ), + }, + }, }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js index 44b29173e06b03..0e3e96bd87cb3d 100644 --- a/packages/block-library/src/site-title/edit.js +++ b/packages/block-library/src/site-title/edit.js @@ -123,16 +123,16 @@ export default function SiteTitleEdit( { label={ __( 'Settings' ) } resetAll={ () => { setAttributes( { - isLink: false, + isLink: true, linkTarget: '_self', } ); } } dropdownMenuProps={ dropdownMenuProps } > isLink !== false } + hasValue={ () => ! isLink } label={ __( 'Make title link to home' ) } - onDeselect={ () => setAttributes( { isLink: false } ) } + onDeselect={ () => setAttributes( { isLink: true } ) } isShownByDefault > table", "interactivity": { "clientNavigation": true } }, + "selectors": { + "root": ".wp-block-table > table", + "spacing": ".wp-block-table" + }, "styles": [ { "name": "regular", diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index 9394bfaf5c6145..4f85f929b07cfc 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { ToggleControl, SelectControl } from '@wordpress/components'; +import { + ToggleControl, + SelectControl, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { useMemo, useCallback, Platform } from '@wordpress/element'; const options = [ @@ -47,50 +51,104 @@ const VideoSettings = ( { setAttributes, attributes } ) => { return ( <> - - !! autoplay } + onDeselect={ () => { + setAttributes( { autoplay: false } ); + } } + > + + + - !! loop } + onDeselect={ () => { + setAttributes( { loop: false } ); + } } + > + + + - !! muted } + onDeselect={ () => { + setAttributes( { muted: false } ); + } } + > + + + - ! controls } + onDeselect={ () => { + setAttributes( { controls: true } ); + } } + > + + + - !! playsInline } + onDeselect={ () => { + setAttributes( { playsInline: false } ); + } } + > + + + + isShownByDefault + hasValue={ () => preload !== 'metadata' } + onDeselect={ () => { + setAttributes( { preload: 'metadata' } ); + } } + > + + ); }; diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 32221919c7ea20..95ecab25f95985 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -8,25 +8,21 @@ import clsx from 'clsx'; */ import { isBlobURL } from '@wordpress/blob'; import { - BaseControl, - Button, Disabled, - PanelBody, Spinner, Placeholder, + __experimentalToolsPanel as ToolsPanel, } from '@wordpress/components'; import { BlockControls, BlockIcon, InspectorControls, MediaPlaceholder, - MediaUpload, - MediaUploadCheck, MediaReplaceFlow, useBlockProps, } from '@wordpress/block-editor'; import { useRef, useEffect, useState } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { useInstanceId } from '@wordpress/compose'; import { useDispatch } from '@wordpress/data'; import { video as icon } from '@wordpress/icons'; @@ -35,15 +31,18 @@ import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies */ +import PosterImage from './poster-image'; import { createUpgradedEmbedBlock } from '../embed/util'; -import { useUploadMediaFromBlobURL } from '../utils/hooks'; +import { + useUploadMediaFromBlobURL, + useToolsPanelDropdownMenuProps, +} from '../utils/hooks'; import VideoCommonSettings from './edit-common-settings'; import TracksEditor from './tracks-editor'; import Tracks from './tracks'; import { Caption } from '../utils/caption'; const ALLOWED_MEDIA_TYPES = [ 'video' ]; -const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ]; function VideoEdit( { isSelected: isSingleSelected, @@ -55,9 +54,9 @@ function VideoEdit( { } ) { const instanceId = useInstanceId( VideoEdit ); const videoPlayer = useRef(); - const posterImageButton = useRef(); const { id, controls, poster, src, tracks } = attributes; const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); useUploadMediaFromBlobURL( { url: temporaryURL, @@ -174,19 +173,6 @@ function VideoEdit( { ); } - function onSelectPoster( image ) { - setAttributes( { poster: image.url } ); - } - - function onRemovePoster() { - setAttributes( { poster: undefined } ); - - // Move focus back to the Media Upload button. - posterImageButton.current.focus(); - } - - const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; - return ( <> { isSingleSelected && ( @@ -214,63 +200,31 @@ function VideoEdit( { ) } - + { + setAttributes( { + autoplay: false, + controls: true, + loop: false, + muted: false, + playsInline: false, + preload: 'metadata', + poster: '', + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > - -
- - { __( 'Poster image' ) } - - ( - - ) } - /> - - { !! poster && ( - - ) } -
- - + +
{ /* diff --git a/packages/block-library/src/video/poster-image.js b/packages/block-library/src/video/poster-image.js new file mode 100644 index 00000000000000..cde95f974d8e69 --- /dev/null +++ b/packages/block-library/src/video/poster-image.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + Button, + BaseControl, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { useRef } from '@wordpress/element'; + +function PosterImage( { poster, setAttributes, instanceId } ) { + const posterImageButton = useRef(); + const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ]; + + const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; + + function onSelectPoster( image ) { + setAttributes( { poster: image.url } ); + } + + function onRemovePoster() { + setAttributes( { poster: undefined } ); + + // Move focus back to the Media Upload button. + posterImageButton.current.focus(); + } + + return ( + !! poster } + onDeselect={ () => { + setAttributes( { poster: '' } ); + } } + > + +
+ + { __( 'Poster image' ) } + + ( + + ) } + /> + + { !! poster && ( + + ) } +
+ + + ); +} + +export default PosterImage; diff --git a/packages/block-library/tsconfig.json b/packages/block-library/tsconfig.json index 2a2cb1653d4285..a8423ee4a27093 100644 --- a/packages/block-library/tsconfig.json +++ b/packages/block-library/tsconfig.json @@ -2,8 +2,6 @@ "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types", "types": [ "gutenberg-env" ], "strictNullChecks": true }, diff --git a/packages/block-serialization-default-parser/tsconfig.json b/packages/block-serialization-default-parser/tsconfig.json index 6e33d8ff82d47e..7ff060ab6ce105 100644 --- a/packages/block-serialization-default-parser/tsconfig.json +++ b/packages/block-serialization-default-parser/tsconfig.json @@ -1,9 +1,4 @@ { "$schema": "https://json.schemastore.org/tsconfig.json", - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "src", - "declarationDir": "build-types" - }, - "include": [ "src/**/*" ] + "extends": "../../tsconfig.base.json" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7255888604ed12..9784a651027950 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,8 @@ - `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)). - `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)). +- `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)). +- `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)). ### Deprecations @@ -19,6 +21,8 @@ ### Bug Fixes - `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)). +- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the custom size select. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)). +- `BoxControl`: Fix aria-valuetext value ([#68362](https://github.com/WordPress/gutenberg/pull/68362)). ### Experimental diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md index 267b368454c499..8ba9f6378c1852 100644 --- a/packages/components/src/alignment-matrix-control/README.md +++ b/packages/components/src/alignment-matrix-control/README.md @@ -26,43 +26,43 @@ const Example = () => { ### `defaultValue` -If provided, sets the default alignment value. - - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"` - Required: No - Default: `'center center'` -### `label` +If provided, sets the default alignment value. -Accessible label. If provided, sets the `aria-label` attribute of the -underlying `grid` widget. +### `label` - Type: `string` - Required: No - Default: `'Alignment Matrix Control'` -### `onChange` +Accessible label. If provided, sets the `aria-label` attribute of the +underlying `grid` widget. -A function that receives the updated alignment value. +### `onChange` - Type: `(newValue: AlignmentMatrixControlValue) => void` - Required: No -### `value` +A function that receives the updated alignment value. -The current alignment value. +### `value` - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"` - Required: No -### `width` +The current alignment value. -If provided, sets the width of the control. +### `width` - Type: `number` - Required: No - Default: `92` +If provided, sets the width of the control. + ## Subcomponents ### AlignmentMatrixControl.Icon @@ -71,16 +71,16 @@ If provided, sets the width of the control. ##### `disablePointerEvents` -If `true`, disables pointer events on the icon. - - Type: `boolean` - Required: No - Default: `true` -##### `value` +If `true`, disables pointer events on the icon. -The current alignment value. +##### `value` - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"` - Required: No - Default: `center` + +The current alignment value. diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md index 8b98ba813adde8..9908282fd9ef9a 100644 --- a/packages/components/src/angle-picker-control/README.md +++ b/packages/components/src/angle-picker-control/README.md @@ -28,30 +28,30 @@ function Example() { ### `as` -The HTML element or React component to render the component as. - - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...` - Required: No -### `label` +The HTML element or React component to render the component as. -Label to use for the angle picker. +### `label` - Type: `string` - Required: No - Default: `__( 'Angle' )` -### `onChange` +Label to use for the angle picker. -A function that receives the new value of the input. +### `onChange` - Type: `(value: number) => void` - Required: Yes -### `value` +A function that receives the new value of the input. -The current value of the input. The value represents an angle in degrees -and should be a value between 0 and 360. +### `value` - Type: `string | number` - Required: Yes + +The current value of the input. The value represents an angle in degrees +and should be a value between 0 and 360. diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 0be531ca6f2df8..2100939684a856 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -2,21 +2,23 @@ +đź”’ This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project. +

See the WordPress Storybook for more detailed, interactive documentation.

## Props ### `children` -Text to display inside the badge. - - Type: `string` - Required: Yes -### `intent` +Text to display inside the badge. -Badge variant. +### `intent` - Type: `"default" | "info" | "success" | "warning" | "error"` - Required: No - Default: `default` + +Badge variant. diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index 7f827d3bfabf5a..bbe0bef2a79472 100644 --- a/packages/components/src/badge/stories/index.story.tsx +++ b/packages/components/src/badge/stories/index.story.tsx @@ -8,12 +8,12 @@ import type { Meta, StoryObj } from '@storybook/react'; */ import Badge from '..'; -const meta = { +const meta: Meta< typeof Badge > = { component: Badge, title: 'Components/Containers/Badge', id: 'components-badge', tags: [ 'status-private' ], -} satisfies Meta< typeof Badge >; +}; export default meta; diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md index 9c8920fbc06896..2a82c19845e47b 100644 --- a/packages/components/src/base-control/README.md +++ b/packages/components/src/base-control/README.md @@ -30,67 +30,66 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => ( ### `__nextHasNoMarginBottom` -Start opting into the new margin-free styles that will become the default in a future version. - - Type: `boolean` - Required: No - Default: `false` -### `as` +Start opting into the new margin-free styles that will become the default in a future version. -The HTML element or React component to render the component as. +### `as` - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)` - Required: No -### `className` +The HTML element or React component to render the component as. +### `className` - Type: `string` - Required: No ### `children` -The content to be displayed within the `BaseControl`. - - Type: `ReactNode` - Required: Yes +The content to be displayed within the `BaseControl`. + ### `help` + - Type: `ReactNode` + - Required: No + Additional description for the control. Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute. - - Type: `ReactNode` - - Required: No - ### `hideLabelFromVision` -If true, the label will only be visible to screen readers. - - Type: `boolean` - Required: No - Default: `false` +If true, the label will only be visible to screen readers. + ### `id` + - Type: `string` + - Required: No + The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated. This is necessary to accessibly associate the label with that element. The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you. Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`. - - Type: `string` - - Required: No - ### `label` -If this property is added, a label will be generated using label property as the content. - - Type: `ReactNode` - Required: No +If this property is added, a label will be generated using label property as the content. + ## Subcomponents ### BaseControl.VisualLabel @@ -119,14 +118,14 @@ const MyBaseControl = () => ( ##### `as` -The HTML element or React component to render the component as. - - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...` - Required: No -##### `children` +The HTML element or React component to render the component as. -The content to be displayed within the `BaseControl.VisualLabel`. +##### `children` - Type: `ReactNode` - Required: Yes + +The content to be displayed within the `BaseControl.VisualLabel`. diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md index 6192cfa47367ba..4c0f100065092e 100644 --- a/packages/components/src/box-control/README.md +++ b/packages/components/src/box-control/README.md @@ -33,30 +33,28 @@ function Example() { ### `__next40pxDefaultSize` -Start opting into the larger default height that will become the default size in a future version. - - Type: `boolean` - Required: No - Default: `false` -### `allowReset` +Start opting into the larger default height that will become the default size in a future version. -If this property is true, a button to reset the box control is rendered. +### `allowReset` - Type: `boolean` - Required: No - Default: `true` -### `id` +If this property is true, a button to reset the box control is rendered. -The id to use as a base for the unique HTML id attribute of the control. +### `id` - Type: `string` - Required: No -### `inputProps` +The id to use as a base for the unique HTML id attribute of the control. -Props for the internal `UnitControl` components. +### `inputProps` - Type: `UnitControlPassthroughProps` - Required: No @@ -64,42 +62,42 @@ Props for the internal `UnitControl` components. min: 0, }` -### `label` +Props for the internal `UnitControl` components. -Heading label for the control. +### `label` - Type: `string` - Required: No - Default: `__( 'Box Control' )` -### `onChange` +Heading label for the control. -A callback function when an input value changes. +### `onChange` - Type: `(next: BoxControlValue) => void` - Required: No - Default: `() => {}` -### `presets` +A callback function when an input value changes. -Available presets to pick from. +### `presets` - Type: `Preset[]` - Required: No +Available presets to pick from. + ### `presetKey` + - Type: `string` + - Required: No + The key of the preset to apply. If you provide a list of presets, you must provide a preset key to use. The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }` - - Type: `string` - - Required: No - ### `resetValues` -The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset. - - Type: `BoxControlValue` - Required: No - Default: `{ @@ -109,35 +107,37 @@ The `top`, `right`, `bottom`, and `left` box dimension values to use when the co left: undefined, }` +The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset. + ### `sides` + - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]` + - Required: No + Collection of sides to allow control of. If omitted or empty, all sides will be available. Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal". - - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]` - - Required: No - ### `splitOnAxis` -If this property is true, when the box control is unlinked, vertical and horizontal controls -can be used instead of updating individual sides. - - Type: `boolean` - Required: No - Default: `false` -### `units` +If this property is true, when the box control is unlinked, vertical and horizontal controls +can be used instead of updating individual sides. -Available units to select from. +### `units` - Type: `WPUnitControlUnit[]` - Required: No - Default: `CSS_UNITS` -### `values` +Available units to select from. -The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values. +### `values` - Type: `BoxControlValue` - Required: No + +The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values. diff --git a/packages/components/src/box-control/input-control.tsx b/packages/components/src/box-control/input-control.tsx index 81fbcad42c1d08..27dff1991d8572 100644 --- a/packages/components/src/box-control/input-control.tsx +++ b/packages/components/src/box-control/input-control.tsx @@ -264,7 +264,7 @@ export default function BoxInputControl( { } aria-valuetext={ marks[ presetIndex !== undefined ? presetIndex + 1 : 0 ] - .label + .tooltip } renderTooltipContent={ ( index ) => marks[ ! index ? 0 : index ].tooltip diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md index d63dee9007c2f0..c67c795addbf4d 100644 --- a/packages/components/src/button/README.md +++ b/packages/components/src/button/README.md @@ -22,15 +22,19 @@ const Mybutton = () => ( ### `__next40pxDefaultSize` + - Type: `boolean` + - Required: No + - Default: `false` + Start opting into the larger default height that will become the default size in a future version. +### `accessibleWhenDisabled` + - Type: `boolean` - Required: No - Default: `false` -### `accessibleWhenDisabled` - Whether to keep the button focusable when disabled. In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability @@ -40,111 +44,111 @@ or by preventing focus from returning to a trigger element. Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) in the WAI-ARIA Authoring Practices Guide. - - Type: `boolean` - - Required: No - - Default: `false` - ### `children` -The button's children. - - Type: `ReactNode` - Required: No -### `description` +The button's children. -A visually hidden accessible description for the button. +### `description` - Type: `string` - Required: No +A visually hidden accessible description for the button. + ### `disabled` + - Type: `boolean` + - Required: No + Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given. In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`. - - Type: `boolean` - - Required: No - ### `href` -If provided, renders `a` instead of `button`. - - Type: `string` - Required: Yes -### `icon` +If provided, renders `a` instead of `button`. -If provided, renders an Icon component inside the button. +### `icon` - Type: `IconType` - Required: No -### `iconPosition` +If provided, renders an Icon component inside the button. -If provided with `icon`, sets the position of icon relative to the `text`. +### `iconPosition` - Type: `"left" | "right"` - Required: No - Default: `'left'` +If provided with `icon`, sets the position of icon relative to the `text`. + ### `iconSize` + - Type: `number` + - Required: No + If provided with `icon`, sets the icon size. Please refer to the Icon component for more details regarding the default value of its `size` prop. - - Type: `number` - - Required: No - ### `isBusy` -Indicates activity while a action is being performed. - - Type: `boolean` - Required: No -### `isDestructive` +Indicates activity while a action is being performed. -Renders a red text-based button style to indicate destructive behavior. +### `isDestructive` - Type: `boolean` - Required: No -### `isPressed` +Renders a red text-based button style to indicate destructive behavior. -Renders a pressed button style. +### `isPressed` - Type: `boolean` - Required: No -### `label` +Renders a pressed button style. -Sets the `aria-label` of the component, if none is provided. -Sets the Tooltip content if `showTooltip` is provided. +### `label` - Type: `string` - Required: No -### `shortcut` +Sets the `aria-label` of the component, if none is provided. +Sets the Tooltip content if `showTooltip` is provided. -If provided with `showTooltip`, appends the Shortcut label to the tooltip content. -If an object is provided, it should contain `display` and `ariaLabel` keys. +### `shortcut` - Type: `string | { display: string; ariaLabel: string; }` - Required: No -### `showTooltip` +If provided with `showTooltip`, appends the Shortcut label to the tooltip content. +If an object is provided, it should contain `display` and `ariaLabel` keys. -If provided, renders a Tooltip component for the button. +### `showTooltip` - Type: `boolean` - Required: No +If provided, renders a Tooltip component for the button. + ### `size` + - Type: `"small" | "default" | "compact"` + - Required: No + - Default: `'default'` + The size of the button. - `'default'`: For normal text-label buttons, unless it is a toggle button. @@ -153,34 +157,33 @@ The size of the button. If the deprecated `isSmall` prop is also defined, this prop will take precedence. - - Type: `"small" | "default" | "compact"` - - Required: No - - Default: `'default'` - ### `text` -If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them. - - Type: `string` - Required: No -### `tooltipPosition` +If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them. -If provided with `showTooltip`, sets the position of the tooltip. -Please refer to the Tooltip component for more details regarding the defaults. +### `tooltipPosition` - Type: `"top" | "middle" | "bottom" | "top center" | "top left" | "top right" | "middle center" | "middle left" | "middle right" | "bottom center" | ...` - Required: No -### `target` +If provided with `showTooltip`, sets the position of the tooltip. +Please refer to the Tooltip component for more details regarding the defaults. -If provided with `href`, sets the `target` attribute to the `a`. +### `target` - Type: `string` - Required: No +If provided with `href`, sets the `target` attribute to the `a`. + ### `variant` + - Type: `"link" | "primary" | "secondary" | "tertiary"` + - Required: No + Specifies the button's style. The accepted values are: @@ -189,6 +192,3 @@ The accepted values are: 2. `'secondary'` (the default button styles) 3. `'tertiary'` (the text-based button styles) 4. `'link'` (the link button styles) - - - Type: `"link" | "primary" | "secondary" | "tertiary"` - - Required: No diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index fd6cc2df3fcde7..b1adfd5d9221ab 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -63,7 +63,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -345,7 +345,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -637,7 +637,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index f47ca41b51eb71..b0e33b5aea3a2e 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -16,6 +16,7 @@ export const Container = styled.fieldset` border: 0; margin: 0; padding: 0; + display: contents; `; export const Header = styled( HStack )` diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md index d281b1ca639274..74e6e369383383 100644 --- a/packages/components/src/form-file-upload/README.md +++ b/packages/components/src/form-file-upload/README.md @@ -24,56 +24,59 @@ const MyFormFileUpload = () => ( ### `__next40pxDefaultSize` -Start opting into the larger default height that will become the default size in a future version. - - Type: `boolean` - Required: No - Default: `false` +Start opting into the larger default height that will become the default size in a future version. + ### `accept` + - Type: `string` + - Required: No + A string passed to the `input` element that tells the browser which [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) can be uploaded by the user. e.g: `image/*,video/*`. - - Type: `string` - - Required: No - ### `children` -Children are passed as children of `Button`. - - Type: `ReactNode` - Required: No +Children are passed as children of `Button`. + ### `icon` + - Type: `IconType` + - Required: No + The icon to render in the default button. See the `Icon` component docs for more information. - - Type: `IconType` - - Required: No - ### `multiple` -Whether to allow multiple selection of files or not. - - Type: `boolean` - Required: No - Default: `false` +Whether to allow multiple selection of files or not. + ### `onChange` + - Type: `ChangeEventHandler` + - Required: Yes + Callback function passed directly to the `input` file element. Select files will be available in `event.currentTarget.files`. - - Type: `ChangeEventHandler` - - Required: Yes - ### `onClick` + - Type: `MouseEventHandler` + - Required: No + Callback function passed directly to the `input` file element. This can be useful when you want to force a `change` event to fire when @@ -90,17 +93,14 @@ an empty string in the `onClick` function. ``` - - Type: `MouseEventHandler` - - Required: No - ### `render` + - Type: `(arg: { openFileDialog: () => void; }) => ReactNode` + - Required: No + Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window. - - - Type: `(arg: { openFileDialog: () => void; }) => ReactNode` - - Required: No diff --git a/packages/components/src/gradient-picker/README.md b/packages/components/src/gradient-picker/README.md index 652fcbf30ae135..275c46ec5958c9 100644 --- a/packages/components/src/gradient-picker/README.md +++ b/packages/components/src/gradient-picker/README.md @@ -48,110 +48,110 @@ const MyGradientPicker = () => { ### `__experimentalIsRenderedInSidebar` -Whether this is rendered in the sidebar. - - Type: `boolean` - Required: No - Default: `false` -### `asButtons` +Whether this is rendered in the sidebar. -Whether the control should present as a set of buttons, -each with its own tab stop. +### `asButtons` - Type: `boolean` - Required: No - Default: `false` -### `aria-label` +Whether the control should present as a set of buttons, +each with its own tab stop. -A label to identify the purpose of the control. +### `aria-label` - Type: `string` - Required: No -### `aria-labelledby` +A label to identify the purpose of the control. -An ID of an element to provide a label for the control. +### `aria-labelledby` - Type: `string` - Required: No -### `className` +An ID of an element to provide a label for the control. -The class name added to the wrapper. +### `className` - Type: `string` - Required: No -### `clearable` +The class name added to the wrapper. -Whether the palette should have a clearing button or not. +### `clearable` - Type: `boolean` - Required: No - Default: `true` -### `disableCustomGradients` +Whether the palette should have a clearing button or not. -If true, the gradient picker will not be displayed and only defined -gradients from `gradients` will be shown. +### `disableCustomGradients` - Type: `boolean` - Required: No - Default: `false` -### `enableAlpha` +If true, the gradient picker will not be displayed and only defined +gradients from `gradients` will be shown. -Whether to enable alpha transparency options in the picker. +### `enableAlpha` - Type: `boolean` - Required: No - Default: `true` +Whether to enable alpha transparency options in the picker. + ### `gradients` + - Type: `GradientsProp` + - Required: No + - Default: `[]` + An array of objects as predefined gradients displayed above the gradient selector. Alternatively, if there are multiple sets (or 'origins') of gradients, you can pass an array of objects each with a `name` and a `gradients` array which will in turn contain the predefined gradient objects. - - Type: `GradientsProp` - - Required: No - - Default: `[]` - ### `headingLevel` -The heading level. Only applies in cases where gradients are provided -from multiple origins (i.e. when the array passed as the `gradients` prop -contains two or more items). - - Type: `1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | ...` - Required: No - Default: `2` -### `loop` +The heading level. Only applies in cases where gradients are provided +from multiple origins (i.e. when the array passed as the `gradients` prop +contains two or more items). -Prevents keyboard interaction from wrapping around. -Only used when `asButtons` is not true. +### `loop` - Type: `boolean` - Required: No - Default: `true` -### `onChange` +Prevents keyboard interaction from wrapping around. +Only used when `asButtons` is not true. -The function called when a new gradient has been defined. It is passed to -the `currentGradient` as an argument. +### `onChange` - Type: `(currentGradient: string) => void` - Required: Yes -### `value` +The function called when a new gradient has been defined. It is passed to +the `currentGradient` as an argument. -The current value of the gradient. Pass a css gradient string (See default value for example). -Optionally pass in a `null` value to specify no gradient is currently selected. +### `value` - Type: `string` - Required: No - Default: `'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'` + +The current value of the gradient. Pass a css gradient string (See default value for example). +Optionally pass in a `null` value to specify no gradient is currently selected. diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index d242afe1fdb2f5..132595d69c4f76 100644 --- a/packages/components/src/heading/hook.ts +++ b/packages/components/src/heading/hook.ts @@ -14,7 +14,7 @@ export function useHeading( const { as: asProp, level = 2, - color = COLORS.gray[ 900 ], + color = COLORS.theme.foreground, isBlock = true, weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ], ...otherProps diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap index cf863c4b2bb2ef..675810948404fe 100644 --- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap @@ -2,12 +2,12 @@ exports[`props should render correctly 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; text-wrap: pretty; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); font-size: calc(1.95 * 13px); font-weight: 600; display: block; @@ -30,7 +30,7 @@ Snapshot Diff: @@ -1,10 +1,10 @@ Array [ Object { - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "display": "block", - "font-size": "calc(1.25 * 13px)", + "font-size": "calc(1.95 * 13px)", @@ -49,7 +49,7 @@ Snapshot Diff: @@ -1,10 +1,10 @@ Array [ Object { - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "display": "block", - "font-size": "calc(1.25 * 13px)", + "font-size": "calc(1.95 * 13px)", diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md index 29e621f80c1fd9..2c9726dbcf5418 100644 --- a/packages/components/src/icon/README.md +++ b/packages/components/src/icon/README.md @@ -16,6 +16,10 @@ import { wordpress } from '@wordpress/icons'; ### `icon` + - Type: `IconType` + - Required: No + - Default: `null` + The icon to render. In most cases, you should use an icon from [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library). @@ -25,16 +29,12 @@ Other supported values are: component instances, functions, The `size` value, as well as any other additional props, will be passed through. - - Type: `IconType` - - Required: No - - Default: `null` - ### `size` -The size (width and height) of the icon. - -Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`. - - Type: `number` - Required: No - Default: `'string' === typeof icon ? 20 : 24` + +The size (width and height) of the icon. + +Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`. diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index a447b2ce5133be..243b00202460eb 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -105,8 +105,8 @@ export default function useText( getOptimalTextShade( optimizeReadabilityFor ) === 'dark'; sx.optimalTextColor = isOptimalTextColorDark - ? css( { color: COLORS.gray[ 900 ] } ) - : css( { color: COLORS.white } ); + ? css( { color: COLORS.theme.foreground } ) + : css( { color: COLORS.theme.foregroundInverted } ); } return cx( diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts index e777ed4f0941de..7d3b70e2ab2390 100644 --- a/packages/components/src/text/styles.ts +++ b/packages/components/src/text/styles.ts @@ -9,7 +9,7 @@ import { css } from '@emotion/react'; import { COLORS, CONFIG } from '../utils'; export const Text = css` - color: ${ COLORS.gray[ 900 ] }; + color: ${ COLORS.theme.foreground }; line-height: ${ CONFIG.fontLineHeightBase }; margin: 0; text-wrap: balance; /* Fallback for Safari. */ diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap index 1b98c0853ac549..caa876cb24dc78 100644 --- a/packages/components/src/text/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap @@ -6,7 +6,7 @@ Snapshot Diff: + Base styles @@ -3,8 +3,9 @@ - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "font-size": "calc((13 / 13) * 13px)", "font-weight": "normal", "line-height": "1.4", @@ -19,7 +19,7 @@ Snapshot Diff: exports[`Text should render highlighted words with highlightCaseSensitive 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -52,7 +52,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] = exports[`Text snapshot tests should render correctly 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx index 5fad5582f4d46e..e6f6423b6b572d 100644 --- a/packages/components/src/text/test/index.tsx +++ b/packages/components/src/text/test/index.tsx @@ -25,7 +25,7 @@ describe( 'Text', () => { ); expect( screen.getByRole( 'heading' ) ).toHaveStyle( { - color: COLORS.white, + color: 'rgb( 255, 255, 255 )', } ); } ); diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md index 5f3247bdb3322b..d2f73443a2a880 100644 --- a/packages/components/src/tree-select/README.md +++ b/packages/components/src/tree-select/README.md @@ -56,93 +56,96 @@ const MyTreeSelect = () => { ### `__next40pxDefaultSize` -Start opting into the larger default height that will become the default size in a future version. - - Type: `boolean` - Required: No - Default: `false` -### `__nextHasNoMarginBottom` +Start opting into the larger default height that will become the default size in a future version. -Start opting into the new margin-free styles that will become the default in a future version. +### `__nextHasNoMarginBottom` - Type: `boolean` - Required: No - Default: `false` -### `children` +Start opting into the new margin-free styles that will become the default in a future version. -As an alternative to the `options` prop, `optgroup`s and `options` can be -passed in as `children` for more customizability. +### `children` - Type: `ReactNode` - Required: No -### `disabled` +As an alternative to the `options` prop, `optgroup`s and `options` can be +passed in as `children` for more customizability. -If true, the `input` will be disabled. +### `disabled` - Type: `boolean` - Required: No - Default: `false` -### `hideLabelFromVision` +If true, the `input` will be disabled. -If true, the label will only be visible to screen readers. +### `hideLabelFromVision` - Type: `boolean` - Required: No - Default: `false` +If true, the label will only be visible to screen readers. + ### `help` + - Type: `ReactNode` + - Required: No + Additional description for the control. Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute. - - Type: `ReactNode` - - Required: No - ### `label` -If this property is added, a label will be generated using label property as the content. - - Type: `ReactNode` - Required: No -### `labelPosition` +If this property is added, a label will be generated using label property as the content. -The position of the label. +### `labelPosition` - Type: `"top" | "bottom" | "side" | "edge"` - Required: No - Default: `'top'` -### `noOptionLabel` +The position of the label. -If this property is added, an option will be added with this label to represent empty selection. +### `noOptionLabel` - Type: `string` - Required: No -### `onChange` +If this property is added, an option will be added with this label to represent empty selection. -A function that receives the value of the new option that is being selected as input. +### `onChange` - Type: `(value: string, extra?: { event?: ChangeEvent; }) => void` - Required: No +A function that receives the value of the new option that is being selected as input. + ### `options` + - Type: `readonly ({ label: string; value: string; } & Omit, "label" | "value">)[]` + - Required: No + An array of option property objects to be rendered, each with a `label` and `value` property, as well as any other `
+ diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.json new file mode 100644 index 00000000000000..2c204623dc252f --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.json @@ -0,0 +1,59 @@ +[ + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 1", + "fontSize": "xx-large" + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 2", + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } + } + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 3", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "button", + "type": "button", + "text": "My button 4", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json new file mode 100644 index 00000000000000..d631bc600e49ac --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json @@ -0,0 +1,81 @@ +[ + { + "blockName": "core/button", + "attrs": { + "fontSize": "xx-large" + }, + "innerBlocks": [], + "innerHTML": "\n
My button 1
\n", + "innerContent": [ + "\n
My button 1
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
My button 2
\n", + "innerContent": [ + "\n
My button 2
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
My button 3
\n", + "innerContent": [ + "\n
My button 3
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "tagName": "button", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html new file mode 100644 index 00000000000000..8de25b59343b3f --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html @@ -0,0 +1,15 @@ + +
My button 1
+ + + +
My button 2
+ + + +
My button 3
+ + + +
+ diff --git a/test/performance/playwright.config.ts b/test/performance/playwright.config.ts index fafca3a589122f..75e87c4d2d0f00 100644 --- a/test/performance/playwright.config.ts +++ b/test/performance/playwright.config.ts @@ -8,7 +8,7 @@ import { defineConfig } from '@playwright/test'; /** * WordPress dependencies */ -const baseConfig = require( '@wordpress/scripts/config/playwright.config' ); +import baseConfig from '@wordpress/scripts/config/playwright.config.js'; process.env.ASSETS_PATH = path.join( __dirname, 'assets' ); diff --git a/test/performance/tsconfig.json b/test/performance/tsconfig.json index 28d349fc19bef7..080d514f6f3634 100644 --- a/test/performance/tsconfig.json +++ b/test/performance/tsconfig.json @@ -2,11 +2,11 @@ "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", "compilerOptions": { + "checkJs": false, "noEmit": true, - "emitDeclarationOnly": false, - "allowJs": true, - "checkJs": false + "rootDir": ".", + "types": [ "node" ] }, - "include": [ "**/*" ], + "include": [ "." ], "exclude": [] } diff --git a/test/storybook-playwright/storybook/main.js b/test/storybook-playwright/storybook/main.js index b80833ca725f96..f68f586f477200 100644 --- a/test/storybook-playwright/storybook/main.js +++ b/test/storybook-playwright/storybook/main.js @@ -5,7 +5,10 @@ const baseConfig = require( '../../../storybook/main' ); const config = { ...baseConfig, - addons: [ '@storybook/addon-toolbars' ], + addons: [ + '@storybook/addon-toolbars', + '@storybook/addon-webpack5-compiler-babel', + ], docs: undefined, staticDirs: undefined, stories: [ diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index c05318d5b060f3..0bf72c58ba5688 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -8,7 +8,7 @@ const { realpathSync } = require( 'fs' ); /** * WordPress dependencies */ -const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' ); +const PhpFilePathsPlugin = require( '@wordpress/scripts/plugins/php-file-paths-plugin' ); /** * Internal dependencies diff --git a/tsconfig.base.json b/tsconfig.base.json index a766eedaeddcaa..38c6ac761aab64 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -31,8 +31,12 @@ "resolveJsonModule": true, "typeRoots": [ "./typings", "./node_modules/@types" ], - "types": [] + "types": [], + + "rootDir": "${configDir}/src", + "declarationDir": "${configDir}/build-types" }, + "include": [ "${configDir}/src" ], "exclude": [ "**/*.android.js", "**/*.ios.js", diff --git a/tsconfig.json b/tsconfig.json index 93d0bd976dd005..55759b5015bfd2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -59,7 +59,9 @@ { "path": "packages/url" }, { "path": "packages/vips" }, { "path": "packages/warning" }, - { "path": "packages/wordcount" } + { "path": "packages/wordcount" }, + { "path": "test/e2e" }, + { "path": "test/performance" } ], "files": [] }