diff --git a/LICENSE.md b/LICENSE.md index 983294723c480..12a05f0c071a6 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/backport-changelog/6.8/7069.md b/backport-changelog/6.8/7069.md deleted file mode 100644 index 3e734637ddbb2..0000000000000 --- a/backport-changelog/6.8/7069.md +++ /dev/null @@ -1,6 +0,0 @@ -https://github.com/WordPress/wordpress-develop/pull/7069 - -* https://github.com/WordPress/gutenberg/pull/63401 -* https://github.com/WordPress/gutenberg/pull/66918 -* https://github.com/WordPress/gutenberg/pull/67018 -* https://github.com/WordPress/gutenberg/pull/67552 diff --git a/backport-changelog/6.8/8031.md b/backport-changelog/6.8/8031.md new file mode 100644 index 0000000000000..864dd7562cdf3 --- /dev/null +++ b/backport-changelog/6.8/8031.md @@ -0,0 +1,4 @@ +https://github.com/WordPress/wordpress-develop/pull/8031 + +* https://github.com/WordPress/gutenberg/pull/66675 +* https://github.com/WordPress/gutenberg/pull/68243 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 0000000000000..84d7beaf1e407 --- /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 c7109dc4982c3..30888acf851ca 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 5978e7e80fe26..28e20dc3de12e 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 aaa7304121752..bacd86256f7e6 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/test-create-block.sh b/bin/test-create-block.sh index 99b7e8e608260..7df3b214af042 100755 --- a/bin/test-create-block.sh +++ b/bin/test-create-block.sh @@ -56,7 +56,7 @@ if [ "$expected" -ne "$actual" ]; then exit 1 fi expected=7 -actual=$( find src -maxdepth 1 -type f | wc -l ) +actual=$( find src -maxdepth 2 -type f | wc -l ) if [ "$expected" -ne "$actual" ]; then error "Expected $expected files in the \`src\` directory, but found $actual." exit 1 @@ -70,7 +70,7 @@ status "Building block..." status "Verifying build..." expected=9 -actual=$( find build -maxdepth 1 -type f | wc -l ) +actual=$( find build -maxdepth 2 -type f | wc -l ) if [ "$expected" -ne "$actual" ]; then error "Expected $expected files in the \`build\` directory, but found $actual." exit 1 diff --git a/bin/tsconfig.json b/bin/tsconfig.json index 3ec5d5826a045..4baf899c9dce9 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 91d74b1bdb413..47d6a320d7290 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/changelog.txt b/changelog.txt index 665265aef64d4..bb71ae8617d7f 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,458 @@ == Changelog == += 20.0.0-rc.1 = + + +## Changelog + +### Features + +#### Interactivity API +- Prevent each directive errors and allow any iterable. ([67798](https://github.com/WordPress/gutenberg/pull/67798)) + + +### Enhancements + +- Add dropdown menu props to ToolsPanel component. ([68019](https://github.com/WordPress/gutenberg/pull/68019)) +- Create Block: Allow external templates to customize more fields. ([68193](https://github.com/WordPress/gutenberg/pull/68193)) +- Create Block: Optimize the default template for multiple blocks case. ([68175](https://github.com/WordPress/gutenberg/pull/68175)) +- DOM: Support class wildcard matcher in 'cleanNodeList'. ([67830](https://github.com/WordPress/gutenberg/pull/67830)) +- Scripts: Recommend passing JS entry points with paths. ([68251](https://github.com/WordPress/gutenberg/pull/68251)) +- Upgrade sass to version 1.54.0. ([68380](https://github.com/WordPress/gutenberg/pull/68380)) +- Use Badge component in dataview grids. ([68062](https://github.com/WordPress/gutenberg/pull/68062)) +- Use Badge component in page markers. ([68103](https://github.com/WordPress/gutenberg/pull/68103)) +- postcss-plugins-preset: Bump autoprefixer to 10.4.20. ([68237](https://github.com/WordPress/gutenberg/pull/68237)) +- wp-env: Add multisite support. ([67845](https://github.com/WordPress/gutenberg/pull/67845)) + +#### Block Library +- Add Tools Panel dropdown menu props to More block. ([68039](https://github.com/WordPress/gutenberg/pull/68039)) +- Add block example attribute for Comments Form block. ([68267](https://github.com/WordPress/gutenberg/pull/68267)) +- Add block example attribute for Comments block. ([68266](https://github.com/WordPress/gutenberg/pull/68266)) +- Archive: Add dropdown menu props to ToolsPanel component. ([68010](https://github.com/WordPress/gutenberg/pull/68010)) +- Archives Block: Refactor setting panel. ([67841](https://github.com/WordPress/gutenberg/pull/67841)) +- Button Block: Refactor setting panel. ([67887](https://github.com/WordPress/gutenberg/pull/67887)) +- Button: Update Settings text labels. ([68265](https://github.com/WordPress/gutenberg/pull/68265)) +- Date Block: Add dropdown menu props to ToolsPanel component. ([68018](https://github.com/WordPress/gutenberg/pull/68018)) +- Date Block: Refactor settings panel to use ToolsPanel. ([67906](https://github.com/WordPress/gutenberg/pull/67906)) +- Details Block: Migrate to Toolspanel. ([67966](https://github.com/WordPress/gutenberg/pull/67966)) +- Excerpt Block: Refactor settings panel to use ToolsPanel. ([67908](https://github.com/WordPress/gutenberg/pull/67908)) +- Featured Image Block: Refactor setting panel. ([67456](https://github.com/WordPress/gutenberg/pull/67456)) +- Introduce new filter "render_block_core_navigation_link_allowed_post_status". ([63181](https://github.com/WordPress/gutenberg/pull/63181)) +- Latest Posts Border Block Support. ([66353](https://github.com/WordPress/gutenberg/pull/66353)) +- Login/Logout: Add dropdown menu props to ToolsPanel component. ([68009](https://github.com/WordPress/gutenberg/pull/68009)) +- Login/Logout: Refactor settings panel to use ToolsPanel. ([67909](https://github.com/WordPress/gutenberg/pull/67909)) +- More Block: Refactor settings panel to use ToolsPanel. ([67905](https://github.com/WordPress/gutenberg/pull/67905)) +- Navigation Submenu Block: Refactor settings panel to use ToolsPanel. ([67969](https://github.com/WordPress/gutenberg/pull/67969)) +- Page List Block: Add dropdown menu props to ToolsPanel component. ([68012](https://github.com/WordPress/gutenberg/pull/68012)) +- Page List Block: Refactor settings panel to use ToolsPanel. ([67903](https://github.com/WordPress/gutenberg/pull/67903)) +- Post Featured Image: Use the 'ResolutionTool' component. ([68294](https://github.com/WordPress/gutenberg/pull/68294)) +- Query Page Numbers Block: Refactor settings panel to use ToolsPanel. ([67958](https://github.com/WordPress/gutenberg/pull/67958)) +- Query Page Numbers: Add dropdown menu props to ToolsPanel component. ([68013](https://github.com/WordPress/gutenberg/pull/68013)) +- Query Pagination: Refactor settings panel to use ToolsPanel. ([67914](https://github.com/WordPress/gutenberg/pull/67914)) +- Query Pagination: Update 'showLabel' help text. ([68105](https://github.com/WordPress/gutenberg/pull/68105)) +- Query Total block: Reduce concatenation in the output text. ([68150](https://github.com/WordPress/gutenberg/pull/68150)) +- Read More: Add example preview. ([68288](https://github.com/WordPress/gutenberg/pull/68288)) +- Refactor "Settings" panel of Navigation Item block to use ToolsPanel instead of PanelBody. ([67973](https://github.com/WordPress/gutenberg/pull/67973)) +- Replace PanelBody with ToolsPanel and ToolsPanelItem in column block. ([67913](https://github.com/WordPress/gutenberg/pull/67913)) +- Replace PanelBody with ToolsPanel and ToolsPanelItem in spacer block. ([67981](https://github.com/WordPress/gutenberg/pull/67981)) +- Replace PanelBody with ToolsPanel in columns block. ([67910](https://github.com/WordPress/gutenberg/pull/67910)) +- Site Title Block: Add dropdown menu props to ToolsPanel component. ([68017](https://github.com/WordPress/gutenberg/pull/68017)) +- Site Title Block: Refactor settings panel to use ToolsPanel. ([67898](https://github.com/WordPress/gutenberg/pull/67898)) +- Social Icon: Migrate to Toolspanel. ([67974](https://github.com/WordPress/gutenberg/pull/67974)) +- Social Icons: Migrate to Toolspanel. ([67975](https://github.com/WordPress/gutenberg/pull/67975)) +- Table Block: Refactor settings panel to use ToolsPanel. ([67896](https://github.com/WordPress/gutenberg/pull/67896)) +- Tag Cloud Block: Refactor settings panel to use ToolsPanel. ([67911](https://github.com/WordPress/gutenberg/pull/67911)) +- Video Block: Refactor setting panel. ([67044](https://github.com/WordPress/gutenberg/pull/67044)) + +#### Components +- : Badge Component. ([66555](https://github.com/WordPress/gutenberg/pull/66555)) +- Badge: Support text truncation. ([68107](https://github.com/WordPress/gutenberg/pull/68107)) +- Button: Add hover style to `secondary` variant. ([67325](https://github.com/WordPress/gutenberg/pull/67325)) +- CreateTemplatePartModalContents: Use native radio inputs. ([67702](https://github.com/WordPress/gutenberg/pull/67702)) +- Menu: More granular sub-components. ([67422](https://github.com/WordPress/gutenberg/pull/67422)) +- RangeControl: Animate thumb and track only when using marks. ([67836](https://github.com/WordPress/gutenberg/pull/67836)) +- Storybook: Add more `max-width` containers. ([68080](https://github.com/WordPress/gutenberg/pull/68080)) +- Storybook: Upgrade to the latest version (v8.4.7). ([67863](https://github.com/WordPress/gutenberg/pull/67863)) +- Storybook: Upgrade to v8.0.x. ([67574](https://github.com/WordPress/gutenberg/pull/67574)) +- Unite inline Ariakit imports. ([67818](https://github.com/WordPress/gutenberg/pull/67818)) + +#### Style Book +- Give style book its own route so it can be linked to directly. ([67811](https://github.com/WordPress/gutenberg/pull/67811)) +- Stylebook: Add the Appearance -> Design submenu through `admin_menu` action. ([68174](https://github.com/WordPress/gutenberg/pull/68174)) +- Try splitting style book into sections. ([68071](https://github.com/WordPress/gutenberg/pull/68071)) +- Try toggle instead of dropdown to show stylebook. ([67810](https://github.com/WordPress/gutenberg/pull/67810)) + +#### Design Tools +- Post Comments Link: Add Border Support. ([68450](https://github.com/WordPress/gutenberg/pull/68450)) +- Post Template: Add Border and Spacing Support. ([64425](https://github.com/WordPress/gutenberg/pull/64425)) +- Query Total: Add Border Support. ([68323](https://github.com/WordPress/gutenberg/pull/68323)) + +#### Block Editor +- Add reset button to ColorGradientSettingsDropdown. ([67800](https://github.com/WordPress/gutenberg/pull/67800)) +- ChildLayoutControl: Use units defined in theme.json. ([67784](https://github.com/WordPress/gutenberg/pull/67784)) +- KeyboardShortcuts: Update delete shortcut to use `shift + Backspace`. ([68164](https://github.com/WordPress/gutenberg/pull/68164)) + +#### Block hooks +- Apply to Post Content (on frontend and in editor). ([67272](https://github.com/WordPress/gutenberg/pull/67272)) +- Synced Patterns: Apply Block Hooks. ([68058](https://github.com/WordPress/gutenberg/pull/68058)) + +#### Media +- Split upload into verbs and nouns. ([68227](https://github.com/WordPress/gutenberg/pull/68227)) + +#### Zoom Out +- Remove placeholder of default paragraph when it's the only block and canvas is zoomed out. ([68106](https://github.com/WordPress/gutenberg/pull/68106)) + +#### Interactivity API +- iAPI Router: Handle styles assets on region-based navigation. ([67826](https://github.com/WordPress/gutenberg/pull/67826)) + +#### Plugin +- Add a Playground blueprint json to the /assets/blueprints folder of Plugin Repo. ([67742](https://github.com/WordPress/gutenberg/pull/67742)) + +#### Site Editor +- Pages: Add "Set as posts page" action. ([67650](https://github.com/WordPress/gutenberg/pull/67650)) + +#### Write mode +- Allow template part editing in write mode. ([67372](https://github.com/WordPress/gutenberg/pull/67372)) + +#### Patterns +- Replace Starter Content modal with inserter panel. ([66836](https://github.com/WordPress/gutenberg/pull/66836)) + +#### Commands +- Add command to navigate to site editor. ([66722](https://github.com/WordPress/gutenberg/pull/66722)) + +#### Inspector Controls +- Use custom name in block sidebar if available (retaining block type information). ([65641](https://github.com/WordPress/gutenberg/pull/65641)) + + +### New APIs + +#### Components +- BoxControl: Add support for presets. ([67688](https://github.com/WordPress/gutenberg/pull/67688)) + + +### Bug Fixes + +- Add duotone and dimensions to the block level for translation. ([68243](https://github.com/WordPress/gutenberg/pull/68243)) +- Add text domain option while scaffolding the block in create-block. ([57197](https://github.com/WordPress/gutenberg/pull/57197)) +- Added `is-focus-mode` class on all viewports. ([67377](https://github.com/WordPress/gutenberg/pull/67377)) +- Editor: Fix initial edits applied again after saving the post. ([68273](https://github.com/WordPress/gutenberg/pull/68273)) +- Fix dataviews commonjs export. ([67962](https://github.com/WordPress/gutenberg/pull/67962)) +- Get active element within the iframe when restoring focus. ([68060](https://github.com/WordPress/gutenberg/pull/68060)) +- Make strings in theme.json translatable. ([66675](https://github.com/WordPress/gutenberg/pull/66675)) +- Scripts: Use fork of `rtlcss-webpack-plugin` to fix issues with deps. ([68201](https://github.com/WordPress/gutenberg/pull/68201)) + +#### Block Library +- Columns: Add space above notice text. ([68259](https://github.com/WordPress/gutenberg/pull/68259)) +- Enhance: Improve pagination logic in core/query-pagination-previous block. ([68070](https://github.com/WordPress/gutenberg/pull/68070)) +- Fix author information leakage by author blocks for Custom Post Types without author support & display notice to user. ([67136](https://github.com/WordPress/gutenberg/pull/67136)) +- Media & Text: Correctly reset the 'useFeaturedImage' attribute. ([68247](https://github.com/WordPress/gutenberg/pull/68247)) +- Navigation Submenu Block: Add dropdown menu props to ToolsPanel component. ([68015](https://github.com/WordPress/gutenberg/pull/68015)) +- Page List Block: Fix critical error when converting to link. ([68076](https://github.com/WordPress/gutenberg/pull/68076)) +- Page List block: Don't wrap Edit button with ToolsPanelItem component. ([68248](https://github.com/WordPress/gutenberg/pull/68248)) +- Query Total: Remove nested element. ([68304](https://github.com/WordPress/gutenberg/pull/68304)) +- Table Block: Fix margin/padding to include caption in spacing. ([68281](https://github.com/WordPress/gutenberg/pull/68281)) +- Update SiteTitle block to Fix `isLink` Toggle Behavior. ([68295](https://github.com/WordPress/gutenberg/pull/68295)) +- i18n: Make example and variations translatable in `post-navigation-link`. ([68375](https://github.com/WordPress/gutenberg/pull/68375)) +- i18n: Make example translatable in `query-no-results`. ([68376](https://github.com/WordPress/gutenberg/pull/68376)) +- i18n: Make example translatable in `table-of-contents`. ([68377](https://github.com/WordPress/gutenberg/pull/68377)) + +#### Components +- Block Editor: Fix the 'Reset all' bug for the 'ResolutionTool' component. ([68296](https://github.com/WordPress/gutenberg/pull/68296)) +- BoxControl: Better minimum value support. ([67819](https://github.com/WordPress/gutenberg/pull/67819)) +- BoxControl: Fix `aria-valuetext` value. ([68362](https://github.com/WordPress/gutenberg/pull/68362)) +- Fix end-to-end storybook. ([68307](https://github.com/WordPress/gutenberg/pull/68307)) +- Fixing Text Contrast for Dark Mode. ([68349](https://github.com/WordPress/gutenberg/pull/68349)) +- FontSizePicker: Add `display: Contents` rule to custom size select. ([68280](https://github.com/WordPress/gutenberg/pull/68280)) +- Storybook: Fix `emotion/is-prop-valid` warning. ([68202](https://github.com/WordPress/gutenberg/pull/68202)) +- Storybook: Fix a few editor styles warnings. ([68198](https://github.com/WordPress/gutenberg/pull/68198)) +- Storybook: Fix warnings in Layout document. ([67865](https://github.com/WordPress/gutenberg/pull/67865)) +- Use default value in `useMediaUploadSettings`. ([68100](https://github.com/WordPress/gutenberg/pull/68100)) + +#### Block Editor +- Media Replace Flow: Add custom toggle support and fix button height. ([68084](https://github.com/WordPress/gutenberg/pull/68084)) +- BlockCard: Fix title alignment. ([68115](https://github.com/WordPress/gutenberg/pull/68115)) +- DateFormatPicker: Fix styles & spacing. ([68079](https://github.com/WordPress/gutenberg/pull/68079)) +- Fix Iframe error for links without 'href'. ([68024](https://github.com/WordPress/gutenberg/pull/68024)) +- Grid Visualizer: Improve observation logic. ([68230](https://github.com/WordPress/gutenberg/pull/68230)) +- List View: Fix appender size. ([68221](https://github.com/WordPress/gutenberg/pull/68221)) +- MediaReplaceFlow: Remove store subscription in favor of modern CSS. ([68276](https://github.com/WordPress/gutenberg/pull/68276)) +- Remove patterns from the Quick Inserter to prevent misuse in block-specific contexts. ([67738](https://github.com/WordPress/gutenberg/pull/67738)) +- Revert 'Warning' component autofocus. ([68133](https://github.com/WordPress/gutenberg/pull/68133)) + +#### Post Editor +- DataViews: Fix text in action for setting site home page. ([67787](https://github.com/WordPress/gutenberg/pull/67787)) +- Edit post: Fix meta box pane’s pointer capture. ([68252](https://github.com/WordPress/gutenberg/pull/68252)) +- Editor: Remove HTML from the post title in the document bar. ([68358](https://github.com/WordPress/gutenberg/pull/68358)) +- Fix: Some 403 errors for editor roles. ([68146](https://github.com/WordPress/gutenberg/pull/68146)) +- Improve logic to show entities saved panel description. ([67971](https://github.com/WordPress/gutenberg/pull/67971)) + +#### DataViews +- Don't render actions dropdown when all eligible ones are `primary`. ([68168](https://github.com/WordPress/gutenberg/pull/68168)) +- Handle `grid` preview size based on container width. ([68078](https://github.com/WordPress/gutenberg/pull/68078)) +- Hide actions related UI in `grid` when no actions or bulk actions are passed. ([68033](https://github.com/WordPress/gutenberg/pull/68033)) +- Pages: Update layout-specific configuration when the view is updated. ([67881](https://github.com/WordPress/gutenberg/pull/67881)) +- Use `action.disabled` state to disable actions (primary and secondary). ([68275](https://github.com/WordPress/gutenberg/pull/68275)) + +#### Site Editor +- Add CSS classname to fix the negative margins not appearing in the Navigation Screen. ([67825](https://github.com/WordPress/gutenberg/pull/67825)) +- Fix obsolete `getLocationWithParams` usage. ([68388](https://github.com/WordPress/gutenberg/pull/68388)) +- Pages: Remove unnecessary padding for items. ([67977](https://github.com/WordPress/gutenberg/pull/67977)) +- Update active menu item appearance. ([68147](https://github.com/WordPress/gutenberg/pull/68147)) + +#### Style Book +- Fix global styles updating in style book. ([68111](https://github.com/WordPress/gutenberg/pull/68111)) +- Fix style book background color. ([68088](https://github.com/WordPress/gutenberg/pull/68088)) +- Fix uploading background images in stylebook view. ([68159](https://github.com/WordPress/gutenberg/pull/68159)) +- Stylebook: Avoid double line in subcategory titles. ([67752](https://github.com/WordPress/gutenberg/pull/67752)) + +#### Zoom Out +- Allow replace operation on empty default block in Zoom Out. ([68026](https://github.com/WordPress/gutenberg/pull/68026)) +- Fix don't show inserter in Zoom Out dropzone when the text is visible. ([68031](https://github.com/WordPress/gutenberg/pull/68031)) +- Hide separators for currently dragged section in Zoom Out. ([67638](https://github.com/WordPress/gutenberg/pull/67638)) +- Make Write mode and Zoom out block options menus consistent. ([67749](https://github.com/WordPress/gutenberg/pull/67749)) + +#### Design Tools +- Background supports: Add default controls supports. ([68085](https://github.com/WordPress/gutenberg/pull/68085)) +- Block supports: Show selected item in font family select control. ([68254](https://github.com/WordPress/gutenberg/pull/68254)) +- Fix: Ensure consistency in editor tools for navigation buttons and delete options. ([67253](https://github.com/WordPress/gutenberg/pull/67253)) + +#### Template Editor +- Fix: Editing "Page" is broken for low capability users. ([68110](https://github.com/WordPress/gutenberg/pull/68110)) +- Plugin: Fix eligibility check for post types' default rendering mode. ([67879](https://github.com/WordPress/gutenberg/pull/67879)) + +#### Widgets Editor +- Customizer Widgets: Fix inserter button size and animation. ([67880](https://github.com/WordPress/gutenberg/pull/67880)) +- Widget Editor: Fix: Close button is not working. ([65443](https://github.com/WordPress/gutenberg/pull/65443)) + +#### Meta Boxes +- Show metabox when pattern is accessed directly. ([68255](https://github.com/WordPress/gutenberg/pull/68255)) + +#### Typography +- Button Block: Set proper typography for inner elements. ([68023](https://github.com/WordPress/gutenberg/pull/68023)) + +#### History +- Query Pagination: Fix 'undo' trap. ([68022](https://github.com/WordPress/gutenberg/pull/68022)) + +#### npm Packages +- Add --glob argument to rimraf cli scripts. ([67829](https://github.com/WordPress/gutenberg/pull/67829)) + +#### Paste +- Image: Avoid link class loss when pasting for raw transformation. ([67803](https://github.com/WordPress/gutenberg/pull/67803)) + +#### Extensibility +- Make Block Bindings work with `editor.BlockEdit` hook (2nd try). ([67523](https://github.com/WordPress/gutenberg/pull/67523)) + + +### Accessibility + +- Dataviews List layout: Do not use grid role on a `ul` element. ([67849](https://github.com/WordPress/gutenberg/pull/67849)) +- Fix: Templates and patterns are nesting two elements with the button role. ([67801](https://github.com/WordPress/gutenberg/pull/67801)) +- [Dataviews] Fix: Media item focus style is not visible on Grid. ([67789](https://github.com/WordPress/gutenberg/pull/67789)) + +#### Block Editor +- Fix: Inserter category tabs: Avoid unnecessary aria-label. ([68160](https://github.com/WordPress/gutenberg/pull/68160)) +- Improve accessibility of the Warning component in the block editor. ([67433](https://github.com/WordPress/gutenberg/pull/67433)) + +#### Global Styles +- Shadows: Always show reset button if hover is not supported. ([68122](https://github.com/WordPress/gutenberg/pull/68122)) +- Visual Refactor: Add Chevron Icon for Shadows in Global Styles. ([67720](https://github.com/WordPress/gutenberg/pull/67720)) + +#### Block Library +- Button: Replace ButtonGroup usage with ToggleGroupControl. ([65346](https://github.com/WordPress/gutenberg/pull/65346)) +- Fix Choose menu label when a menu has been deleted. ([67009](https://github.com/WordPress/gutenberg/pull/67009)) + +#### DataViews +- Add confirm dialog before Permanently delete. ([67824](https://github.com/WordPress/gutenberg/pull/67824)) + +#### Site Editor +- Make sure the sidebar navigation item focus style is fully visible. ([67817](https://github.com/WordPress/gutenberg/pull/67817)) + +#### Components +- CustomSelectControl: Refactor to use Ariakit store state for current value. ([67815](https://github.com/WordPress/gutenberg/pull/67815)) + + +### Performance + +#### Block Library +- Don't fetch media details if the block doesn't use a featured image. ([68299](https://github.com/WordPress/gutenberg/pull/68299)) +- Media & Text: Optimize block editor store subscriptions. ([68290](https://github.com/WordPress/gutenberg/pull/68290)) + + +### Experiments + +#### DataViews +- Proof of concept: Visualize hierarchical data. ([66479](https://github.com/WordPress/gutenberg/pull/66479)) + + +### Documentation + +- .wp-env.json schema: Add `testsPort` field. ([68220](https://github.com/WordPress/gutenberg/pull/68220)) +- Add README for TextAlignmentControl component. ([68126](https://github.com/WordPress/gutenberg/pull/68126)) +- Add layout related updates to the DataForm README. ([68050](https://github.com/WordPress/gutenberg/pull/68050)) +- Added Global Documentation in load.php. ([68325](https://github.com/WordPress/gutenberg/pull/68325)) +- Badge component: Fix Storybook URL link. ([68077](https://github.com/WordPress/gutenberg/pull/68077)) +- Badge: Fix up extra newline in readme. ([68359](https://github.com/WordPress/gutenberg/pull/68359)) +- Block Editor Storybook: Restructure the directory and add badges to private components. ([68352](https://github.com/WordPress/gutenberg/pull/68352)) +- Clarify template property behavior in InnerBlocks documentation to specify prefill when empty. ([66911](https://github.com/WordPress/gutenberg/pull/66911)) +- Components: Normalize newlines in auto-generated READMEs. ([68208](https://github.com/WordPress/gutenberg/pull/68208)) +- Components: Prevent broken lists in auto-generated readmes. ([68301](https://github.com/WordPress/gutenberg/pull/68301)) +- Components: Warn private API in auto-generated readmes. ([68317](https://github.com/WordPress/gutenberg/pull/68317)) +- Create a catalog list of private APIs. ([66558](https://github.com/WordPress/gutenberg/pull/66558)) +- DateFormatPicker: Improve line breaks in JSDoc and README. ([68006](https://github.com/WordPress/gutenberg/pull/68006)) +- Doc: Add JSDoc and update README for BlockCard component. ([68114](https://github.com/WordPress/gutenberg/pull/68114)) +- Docs: Fix some typos on reference-guide data-core-block-editor.md. ([68066](https://github.com/WordPress/gutenberg/pull/68066)) +- Documenting innerBlocks in save function. ([66689](https://github.com/WordPress/gutenberg/pull/66689)) +- Fix reference to `wp-env start` in documentation. ([68034](https://github.com/WordPress/gutenberg/pull/68034)) +- Fix wrong `npm start` command. ([65221](https://github.com/WordPress/gutenberg/pull/65221)) +- Fix: Fix link to minimal-block example plugin code. ([67888](https://github.com/WordPress/gutenberg/pull/67888)) +- Fixed typo in README of TextTransformControl. ([68443](https://github.com/WordPress/gutenberg/pull/68443)) +- Section Styles: Update block style variation documentation. ([68169](https://github.com/WordPress/gutenberg/pull/68169)) +- Storybook : Add TextTransformControl stories. ([67365](https://github.com/WordPress/gutenberg/pull/67365)) +- Storybook: Add BorderRadiusControl story. ([67383](https://github.com/WordPress/gutenberg/pull/67383)) +- Storybook: Add PlainText Storybook stories. ([67341](https://github.com/WordPress/gutenberg/pull/67341)) +- Storybook: Add stories for BlockCard component. ([67191](https://github.com/WordPress/gutenberg/pull/67191)) +- Storybook: Add stories for BlockTitle Component. ([67234](https://github.com/WordPress/gutenberg/pull/67234)) +- Storybook: Add stories for DateFormatPicker Component. ([67290](https://github.com/WordPress/gutenberg/pull/67290)) +- Storybook: Add stories for the ContrastChecker component. ([68120](https://github.com/WordPress/gutenberg/pull/68120)) +- Storybook: Add stories for the TextAlignmentControl component. ([67371](https://github.com/WordPress/gutenberg/pull/67371)) +- Storybook: Add stories for the TextDecorationControl component. ([67337](https://github.com/WordPress/gutenberg/pull/67337)) +- Storybook: Add story for the Warning component. ([68124](https://github.com/WordPress/gutenberg/pull/68124)) +- Storybook: Make prop sort order consistent. ([68152](https://github.com/WordPress/gutenberg/pull/68152)) +- Tabs: Auto-generate README. ([68209](https://github.com/WordPress/gutenberg/pull/68209)) +- Update platform documentation intro. ([61341](https://github.com/WordPress/gutenberg/pull/61341)) +- Update the copyright license to 2025. ([68440](https://github.com/WordPress/gutenberg/pull/68440)) +- Updated @since Doc Order in Inline documentation. ([68003](https://github.com/WordPress/gutenberg/pull/68003)) +- Updated Document URL in Documentation. ([67990](https://github.com/WordPress/gutenberg/pull/67990)) +- Updated Small Typo in documentation in docs/getting-started/faq.md file. ([68357](https://github.com/WordPress/gutenberg/pull/68357)) +- [Docs] Fix: Two broken links to the packages reference API and to blocks documentation. ([67889](https://github.com/WordPress/gutenberg/pull/67889)) +- env: Fix changelog entry. ([68219](https://github.com/WordPress/gutenberg/pull/68219)) +- theme.json schema: Fix block list. ([68343](https://github.com/WordPress/gutenberg/pull/68343)) + + +### Code Quality + +- Adding myself as a code owner of the block library package. ([67891](https://github.com/WordPress/gutenberg/pull/67891)) +- Create Block: Migrate Inquirer.js dependency to the new API. ([67877](https://github.com/WordPress/gutenberg/pull/67877)) +- Fix indentation in the upload-media tsconfig. ([68083](https://github.com/WordPress/gutenberg/pull/68083)) +- Fix indentation in upload-media package.json. ([68037](https://github.com/WordPress/gutenberg/pull/68037)) +- Fix: Invalid JSDoc syntax for optional object. ([68061](https://github.com/WordPress/gutenberg/pull/68061)) +- Remove some obsolete stylelint `at-rule-no-unknown` disable rules. ([68087](https://github.com/WordPress/gutenberg/pull/68087)) + +#### Components +- DatePicker: Prepare day buttons for 40px default size. ([68156](https://github.com/WordPress/gutenberg/pull/68156)) +- DropZone: Make the drop zone in Storybook the same size as the item. ([68231](https://github.com/WordPress/gutenberg/pull/68231)) +- Fix Button size violations in misc. unit tests. ([68154](https://github.com/WordPress/gutenberg/pull/68154)) +- Fix: Add soft deperecation notice for the ButtonGroup component. ([65429](https://github.com/WordPress/gutenberg/pull/65429)) +- InputControl : Deprecate 36px default size. ([66897](https://github.com/WordPress/gutenberg/pull/66897)) +- Menu: Migrate Storybook examples to CSF3. ([68204](https://github.com/WordPress/gutenberg/pull/68204)) +- Menu: Use ariakit types. ([68206](https://github.com/WordPress/gutenberg/pull/68206)) +- Navigation: Prepare for hard deprecation. ([68158](https://github.com/WordPress/gutenberg/pull/68158)) +- Navigation: Upsize back buttons. ([68157](https://github.com/WordPress/gutenberg/pull/68157)) +- RadioGroup: Log deprecation warning. ([68067](https://github.com/WordPress/gutenberg/pull/68067)) +- SelectControl : Deprecate 36px default size. ([66898](https://github.com/WordPress/gutenberg/pull/66898)) +- Slot: Use layout effect and update Cover block unit tests. ([68176](https://github.com/WordPress/gutenberg/pull/68176)) +- SlotFill: Use observableMap everywhere, remove manual rerendering. ([67400](https://github.com/WordPress/gutenberg/pull/67400)) +- Tabs: Use correct ariakit type for root component. ([68207](https://github.com/WordPress/gutenberg/pull/68207)) +- TreeSelect: Deprecate 36px default size. ([67855](https://github.com/WordPress/gutenberg/pull/67855)) + +#### Plugin +- chore: fix return type for `WP_Duotone_Gutenberg::Get_selector()`. ([66695](https://github.com/WordPress/gutenberg/pull/66695)) +- fix: Deprecated `WP_Webfonts()` constructor takes no arguments. ([66700](https://github.com/WordPress/gutenberg/pull/66700)) +- fix: Remove extraneous arg from `gutenberg_url()` call in `gutenberg_posts_dashboard()`. ([66699](https://github.com/WordPress/gutenberg/pull/66699)) +- fix: Remove extraneous param from `remove_filter()` calls. ([66697](https://github.com/WordPress/gutenberg/pull/66697)) +- fix: Wrong number of `$accepted_args` on `add_filter()` calls. ([66694](https://github.com/WordPress/gutenberg/pull/66694)) +- fix: explicitly return false in `WP_Theme_JSON_Gutenberg::Should_override_preset()`. ([66696](https://github.com/WordPress/gutenberg/pull/66696)) + +#### Block Editor +- Fix ESLint warnings for the 'useInnerBlockTemplateSync' hook. ([68355](https://github.com/WordPress/gutenberg/pull/68355)) +- FontAppearanceControl: Deprecate 36px default size. ([67854](https://github.com/WordPress/gutenberg/pull/67854)) +- FontFamilyControl: Deprecate 36px default size. ([67853](https://github.com/WordPress/gutenberg/pull/67853)) +- Inserter: Use 40px default size for toggle button. ([68155](https://github.com/WordPress/gutenberg/pull/68155)) +- LineHeightControl: Deprecate 36px default size. ([67850](https://github.com/WordPress/gutenberg/pull/67850)) + +#### Post Editor +- DocumentTools: Use standard ToolbarButton for inserter. ([68332](https://github.com/WordPress/gutenberg/pull/68332)) +- Editor: Remove constants for notices. ([68361](https://github.com/WordPress/gutenberg/pull/68361)) +- Editor: Remove the 'content-only' check from 'TemplatePartConverterMenuItem'. ([67961](https://github.com/WordPress/gutenberg/pull/67961)) + +#### DataViews +- DataForm: Add unit tests. ([68054](https://github.com/WordPress/gutenberg/pull/68054)) +- DataForm: Remove `FormFieldVisibility`. ([68203](https://github.com/WordPress/gutenberg/pull/68203)) +- [DataView] Initial list of unit tests for the DataView component. ([68205](https://github.com/WordPress/gutenberg/pull/68205)) + +#### Block Library +- Columns: Replace some store selectors with 'getBlockOrder'. ([67991](https://github.com/WordPress/gutenberg/pull/67991)) +- Fix trailing spaces in navigation block classnames. ([68161](https://github.com/WordPress/gutenberg/pull/68161)) + +#### Site Editor +- Edit Site: Standardize reduced motion handling using media queries. ([68419](https://github.com/WordPress/gutenberg/pull/68419)) + +#### Design Tools +- Block Supports: Revert stabilization of typography, border, skip serialization and default controls supports. ([68163](https://github.com/WordPress/gutenberg/pull/68163)) + +#### Zoom Out +- Correct spelling in Zoom Out Inserters comment. ([68051](https://github.com/WordPress/gutenberg/pull/68051)) + +#### Block API +- Fail gracefully when block in `createBlock` function is not registered. ([68043](https://github.com/WordPress/gutenberg/pull/68043)) + +#### Icons +- Deprecate `warning` and rename to `cautionFilled`. ([67895](https://github.com/WordPress/gutenberg/pull/67895)) + + +### Tools + +#### Build Tooling +- Add new private `upload-media` package. ([66290](https://github.com/WordPress/gutenberg/pull/66290)) +- Build: Simplify tsconfig.json files. ([68326](https://github.com/WordPress/gutenberg/pull/68326)) +- Clean script: Use braces instead of @-pattern for glob. ([67833](https://github.com/WordPress/gutenberg/pull/67833)) +- Fix VS Code performance. ([68347](https://github.com/WordPress/gutenberg/pull/68347)) +- Fix tsconfig for test/ directory. ([68346](https://github.com/WordPress/gutenberg/pull/68346)) +- Fix: Script with glob option doesn't work on Windows. ([67862](https://github.com/WordPress/gutenberg/pull/67862)) + +#### Testing +- Page - Quick Edit: Add end-to-end tests. ([68151](https://github.com/WordPress/gutenberg/pull/68151)) +- Add ESLint rule to prevent usage of the verb 'toggle' in translatable strings. ([67741](https://github.com/WordPress/gutenberg/pull/67741)) +- Enhance template registration end-to-end tests to handle welcome dialog visibility. ([68059](https://github.com/WordPress/gutenberg/pull/68059)) + + +### Various + +- ActionItem.Slot: Render as `MenuGroup` by default. ([67985](https://github.com/WordPress/gutenberg/pull/67985)) +- Storybook: Add BlockAlignmentMatrixControl Stories and update README. ([68007](https://github.com/WordPress/gutenberg/pull/68007)) +- Update "Call to Action" to "Call to action". ([67876](https://github.com/WordPress/gutenberg/pull/67876)) + +#### Plugin +- Assets: Add README.md about syncing. ([68128](https://github.com/WordPress/gutenberg/pull/68128)) +- Workflows: Sync assets to plugin repo upon change in trunk. ([68052](https://github.com/WordPress/gutenberg/pull/68052)) + + +## First-time contributors + +The following PRs were merged by first-time contributors: + +- @benazeer-ben: Add command to navigate to site editor. ([66722](https://github.com/WordPress/gutenberg/pull/66722)) +- @dhruvikpatel18: Fixed typo in README of TextTransformControl. ([68443](https://github.com/WordPress/gutenberg/pull/68443)) +- @fushar: Stylebook: Add the Appearance -> Design submenu through `admin_menu` action. ([68174](https://github.com/WordPress/gutenberg/pull/68174)) +- @im3dabasia: Storybook : Add TextTransformControl stories. ([67365](https://github.com/WordPress/gutenberg/pull/67365)) +- @justlevine: fix: Deprecated `WP_Webfonts()` constructor takes no arguments. ([66700](https://github.com/WordPress/gutenberg/pull/66700)) +- @karthick-murugan: Latest Posts Border Block Support. ([66353](https://github.com/WordPress/gutenberg/pull/66353)) +- @mayurprajapatii: Updated Document URL in Documentation. ([67990](https://github.com/WordPress/gutenberg/pull/67990)) +- @PARTHVATALIYA: Widget Editor: Fix: Close button is not working. ([65443](https://github.com/WordPress/gutenberg/pull/65443)) +- @prasadkarmalkar: Replace PanelBody with ToolsPanel and ToolsPanelItem in column block. ([67913](https://github.com/WordPress/gutenberg/pull/67913)) +- @rilwis: Fix wrong `npm start` command. ([65221](https://github.com/WordPress/gutenberg/pull/65221)) +- @sarthaknagoshe2002: Clarify template property behavior in InnerBlocks documentation to specify prefill when empty. ([66911](https://github.com/WordPress/gutenberg/pull/66911)) +- @timse201: Split upload into verbs and nouns. ([68227](https://github.com/WordPress/gutenberg/pull/68227)) +- @vampdroid: Add text domain option while scaffolding the block in create-block. ([57197](https://github.com/WordPress/gutenberg/pull/57197)) + + +## Contributors + +The following contributors merged PRs in this release: + +@aaronrobertshaw @afercia @akasunil @benazeer-ben @bph @Chrico @ciampo @d-alleyne @DAreRodz @dhruvikpatel18 @draganescu @ellatrix @fabiankaegy @fushar @getdave @gigitux @gziolo @hbhalodia @himanshupathak95 @im3dabasia @Infinite-Null @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @justlevine @karthick-murugan @kmanijak @louwie17 @Lovor01 @Mamaduka @manzoorwanijk @matiasbenedetto @Mayank-Tripathi32 @mayurprajapatii @mcsf @michalczaplinski @mikachan @mirka @ntsekouras @oandregal @ockham @PARTHVATALIYA @prasadkarmalkar @ramonjd @rilwis @rinkalpagdar @Rishit30G @rohitmathur-7 @SainathPoojary @sarthaknagoshe2002 @SH4LIN @shail-mehta @shimotmk @sirreal @stokesman @Sukhendu2002 @swissspidy @t-hamano @talldan @tellthemachines @timse201 @tyxla @up1512001 @vampdroid @Vrishabhsk @yogeshbhutkar @youknowriad + + = 19.9.0 = ## Changelog diff --git a/docs/contributors/triage.md b/docs/contributors/triage.md index 33275b8d3df01..5c4cf7c161f03 100644 --- a/docs/contributors/triage.md +++ b/docs/contributors/triage.md @@ -9,7 +9,7 @@ To keep the repository healthy, it needs to be triaged regularly. **Triage is th The triage team is an open group of people with a particular role of making sure triage is done consistently across the Gutenberg repo. There are various types of triage which happen: - Regular self triage sessions done by members on their own time. -- Organised triage sessions done as a group at a set time. You can [review the meetings page](https://make.wordpress.org/meetings/) to find these triage sessions and appropriate slack channels. +- Organized triage sessions done as a group at a set time. You can [review the meetings page](https://make.wordpress.org/meetings/) to find these triage sessions and appropriate slack channels. - Focused triage sessions on a specific board, label or feature. These are the expectations of being a triage team member: diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index 5f5e73d1372f7..68f09f04d21d3 100644 --- a/docs/explanations/architecture/styles.md +++ b/docs/explanations/architecture/styles.md @@ -37,10 +37,8 @@ The user may change the state of this block by applying different styles: a text After some user modifications to the block, the initial markup may become something like this: ```html -

+

``` This is what we refer to as "user-provided block styles", also know as "local styles" or "serialized styles". Essentially, each tool (font size, color, etc) ends up adding some classes and/or inline styles to the block markup. The CSS styling for these classes is part of the block, global, or theme stylesheets. @@ -125,7 +123,7 @@ The block supports API only serializes the font size value to the wrapper, resul This is an active area of work you can follow [in the tracking issue](https://github.com/WordPress/gutenberg/issues/38167). The linked proposal is exploring a different way to serialize the user changes: instead of each block support serializing its own data (for example, classes such as `has-small-font-size`, `has-green-color`) the idea is the block would get a single class instead (for example, `wp-style-UUID`) and the CSS styling for that class will be generated in the server by WordPress. -While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `skipSerialization`. For example: +While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `__experimentalSkipSerialization`. For example: ```json { @@ -134,7 +132,7 @@ While work continues in that proposal, there's an escape hatch, an experimental "supports": { "typography": { "fontSize": true, - "skipSerialization": true + "__experimentalSkipSerialization": true } } } @@ -142,7 +140,7 @@ While work continues in that proposal, there's an escape hatch, an experimental This means that the typography block support will do all of the things (create a UI control, bind the block attribute to the control, etc) except serializing the user values into the HTML markup. The classes and inline styles will not be automatically applied to the wrapper and it is the block author's responsibility to implement this in the `edit`, `save`, and `render_callback` functions. See [this issue](https://github.com/WordPress/gutenberg/issues/28913) for examples of how it was done for some blocks provided by WordPress. -Note that, if `skipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc). +Note that, if `__experimentalSkipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc). To enable for a _single_ property only, you may use an array to declare which properties are to be skipped. In the example below, only `fontSize` will skip serialization, leaving other items within the `typography` group (e.g. `lineHeight`, `fontFamily` .etc) unaffected. @@ -154,7 +152,7 @@ To enable for a _single_ property only, you may use an array to declare which pr "typography": { "fontSize": true, "lineHeight": true, - "skipSerialization": [ "fontSize" ] + "__experimentalSkipSerialization": [ "fontSize" ] } } } @@ -475,7 +473,7 @@ If blocks do this, they need to be registered in the server using the `block.jso Every chunk of styles can only use a single selector. -This is particularly relevant if the block is using `skipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more. +This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more. #### 3. **Only a single property per block** diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 8ac489e3c154a..d9120cc58197e 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/getting-started/fundamentals/javascript-in-the-block-editor.md b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md index 7accc5d4c2129..4cd7c0b36fe86 100644 --- a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md +++ b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md @@ -26,7 +26,7 @@ The diagram below provides an overview of the build process when using the `wp-s - **Production Mode (`npm run build`):** In this mode, `wp-scripts` compiles your JavaScript, minifying the output to reduce file size and improve loading times in the browser. This is ideal for deploying your code to a live site. -- **Development Mode (`npm run start`):** This mode is tailored for active development. It skips minification for easier debugging, generates source maps for better error tracking, and watches your source files for changes. When a change is detected, it automatically rebuilds the affected files, allowing you to see updates in real-time. +- **Development Mode (`npm start`):** This mode is tailored for active development. It skips minification for easier debugging, generates source maps for better error tracking, and watches your source files for changes. When a change is detected, it automatically rebuilds the affected files, allowing you to see updates in real-time. The `wp-scripts` package also facilitates the use of JavaScript modules, allowing code distribution across multiple files and resulting in a streamlined bundle after the build process. The [block-development-example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) GitHub repository provides some good examples. diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md index 86721c77e463c..a50a17b75cb54 100644 --- a/docs/reference-guides/block-api/block-edit-save.md +++ b/docs/reference-guides/block-api/block-edit-save.md @@ -183,9 +183,34 @@ save: ( { attributes } ) => { ``` - When saving your block, you want to save the attributes in the same format specified by the attribute source definition. If no attribute source is specified, the attribute will be saved to the block's comment delimiter. See the [Block Attributes documentation](/docs/reference-guides/block-api/block-attributes.md) for more details. +### innerBlocks + +There is a second property in the props passed to the `save` function, `innerBlocks`. This property is typically used for internal operations, and there are very few scenarios where you would need to use it. + +`innerBlocks`, when initialized, is an array containing object representations of nested blocks. In those rare cases where you might use this property, +it can help you adjust how a block is rendered. For example, you could render a block differently based on the number of nested blocks or if a specific block type is present.. + + +```jsx +save: ( { attributes, innerBlocks } ) => { + const { className, ...rest } = useBlockProps.save(); + + // innerBlocks could also be an object - react element during initialization + const numberOfInnerBlocks = innerBlocks?.length; + if ( numberOfInnerBlocks > 1 ) { + className = className + ( className ? ' ' : '' ) + 'more-than-one'; + }; + const blockProps = { ...rest, className }; + + return
{ attributes.content }
; +}; +``` + + +Here, an additional class is added to the block if number of inner blocks is greater than one, allowing for different styling of the block. + ## Examples Here are a couple examples of using attributes, edit, and save all together. diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7e031fa525e1f..b45c090ac8cb1 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -512,7 +512,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr - **Name:** core/page-list - **Category:** widgets - **Allowed Blocks:** core/page-list-item -- **Supports:** interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ +- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** isNested, parentPageID ## Page List Item @@ -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/gutenberg.php b/gutenberg.php index 29cd0f63b4077..f736359a8b357 100644 --- a/gutenberg.php +++ b/gutenberg.php @@ -5,7 +5,7 @@ * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality. * Requires at least: 6.6 * Requires PHP: 7.2 - * Version: 19.9.0 + * Version: 20.0.0-rc.1 * Author: Gutenberg Team * Text Domain: gutenberg * diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 204c9955c3cff..0000000000000 --- 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/block-supports/block-style-variations.php b/lib/block-supports/block-style-variations.php index b1f3243bfd04d..5f7d02007ed39 100644 --- a/lib/block-supports/block-style-variations.php +++ b/lib/block-supports/block-style-variations.php @@ -273,7 +273,7 @@ function gutenberg_enqueue_block_style_variation_styles() { } // Add Gutenberg filters and action. -add_filter( 'render_block_data', 'gutenberg_render_block_style_variation_support_styles', 10, 2 ); +add_filter( 'render_block_data', 'gutenberg_render_block_style_variation_support_styles' ); add_filter( 'render_block', 'gutenberg_render_block_style_variation_class_name', 10, 2 ); add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_style_variation_styles', 1 ); diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php index f890ed84566b7..bd4c772675a5e 100644 --- a/lib/block-supports/border.php +++ b/lib/block-supports/border.php @@ -17,7 +17,7 @@ function gutenberg_register_border_support( $block_type ) { $block_type->attributes = array(); } - if ( block_has_support( $block_type, array( 'border' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) { + if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) { $block_type->attributes['style'] = array( 'type' => 'object', ); @@ -52,7 +52,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { if ( gutenberg_has_border_feature_support( $block_type, 'radius' ) && isset( $block_attributes['style']['border']['radius'] ) && - ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'radius' ) + ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' ) ) { $border_radius = $block_attributes['style']['border']['radius']; @@ -67,7 +67,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { if ( gutenberg_has_border_feature_support( $block_type, 'style' ) && isset( $block_attributes['style']['border']['style'] ) && - ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) + ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ) { $border_block_styles['style'] = $block_attributes['style']['border']['style']; } @@ -76,7 +76,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { if ( $has_border_width_support && isset( $block_attributes['style']['border']['width'] ) && - ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) + ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ) { $border_width = $block_attributes['style']['border']['width']; @@ -91,7 +91,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { // Border color. if ( $has_border_color_support && - ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' ) + ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ) { $preset_border_color = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null; $custom_border_color = $block_attributes['style']['border']['color'] ?? null; @@ -103,9 +103,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) { $border = $block_attributes['style']['border'][ $side ] ?? null; $border_side_values = array( - 'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) ? $border['width'] : null, - 'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' ) ? $border['color'] : null, - 'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) ? $border['style'] : null, + 'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null, + 'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null, + 'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null, ); $border_block_styles[ $side ] = $border_side_values; } @@ -129,9 +129,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { /** * Checks whether the current block type supports the border feature requested. * - * If the `border` support flag is a boolean `true` all border + * If the `__experimentalBorder` support flag is a boolean `true` all border * support features are available. Otherwise, the specific feature's support - * flag nested under `border` must be enabled for the feature + * flag nested under `experimentalBorder` must be enabled for the feature * to be opted into. * * @param WP_Block_Type $block_type Block type to check for support. @@ -141,17 +141,17 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) { * @return boolean Whether or not the feature is supported. */ function gutenberg_has_border_feature_support( $block_type, $feature, $default_value = false ) { - // Check if all border support features have been opted into via `"border": true`. + // Check if all border support features have been opted into via `"__experimentalBorder": true`. if ( $block_type instanceof WP_Block_Type ) { - $block_type_supports_border = $block_type->supports['border'] ?? $default_value; + $block_type_supports_border = $block_type->supports['__experimentalBorder'] ?? $default_value; if ( true === $block_type_supports_border ) { return true; } } // Check if the specific feature has been opted into individually - // via nested flag under `border`. - return block_has_support( $block_type, array( 'border', $feature ), $default_value ); + // via nested flag under `__experimentalBorder`. + return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value ); } // Register the block support. diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index 35a41270a1980..f3243bc717895 100644 --- a/lib/block-supports/elements.php +++ b/lib/block-supports/elements.php @@ -255,12 +255,12 @@ function gutenberg_render_elements_class_name( $block_content, $block ) { } // Remove deprecated WordPress core filters. -remove_filter( 'render_block', 'wp_render_elements_support', 10, 2 ); -remove_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10, 2 ); +remove_filter( 'render_block', 'wp_render_elements_support', 10 ); +remove_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10 ); // Remove WordPress core filters to avoid rendering duplicate elements stylesheet & attaching classes twice. -remove_filter( 'render_block', 'wp_render_elements_class_name', 10, 2 ); -remove_filter( 'render_block_data', 'wp_render_elements_support_styles', 10, 1 ); +remove_filter( 'render_block', 'wp_render_elements_class_name', 10 ); +remove_filter( 'render_block_data', 'wp_render_elements_support_styles', 10 ); add_filter( 'render_block', 'gutenberg_render_elements_class_name', 10, 2 ); add_filter( 'render_block_data', 'gutenberg_render_elements_support_styles', 10, 1 ); diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index ddbd1917c3054..7d63074ccb09b 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -1055,8 +1055,8 @@ static function ( $matches ) { } if ( function_exists( 'wp_restore_group_inner_container' ) ) { - remove_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 ); - remove_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 ); + remove_filter( 'render_block', 'wp_restore_group_inner_container', 10 ); + remove_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10 ); } add_filter( 'render_block_core/group', 'gutenberg_restore_group_inner_container', 10, 2 ); @@ -1118,6 +1118,6 @@ function gutenberg_restore_image_outer_container( $block_content, $block ) { } if ( function_exists( 'wp_restore_image_outer_container' ) ) { - remove_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 ); + remove_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10 ); } add_filter( 'render_block_core/image', 'gutenberg_restore_image_outer_container', 10, 2 ); diff --git a/lib/block-supports/settings.php b/lib/block-supports/settings.php index b175fe778ce1b..0246b5c039c86 100644 --- a/lib/block-supports/settings.php +++ b/lib/block-supports/settings.php @@ -128,7 +128,7 @@ function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) { return null; } // Remove WordPress core filter to avoid rendering duplicate settings style blocks. -remove_filter( 'render_block', '_wp_add_block_level_presets_class', 10, 2 ); -remove_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10, 2 ); +remove_filter( 'render_block', '_wp_add_block_level_presets_class', 10 ); +remove_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10 ); add_filter( 'render_block', '_gutenberg_add_block_level_presets_class', 10, 2 ); add_filter( 'pre_render_block', '_gutenberg_add_block_level_preset_styles', 10, 2 ); diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 21086b94f15c1..a4719b7bdd409 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) { return; } - $has_font_family_support = $typography_supports['fontFamily'] ?? false; + $has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false; $has_font_size_support = $typography_supports['fontSize'] ?? false; - $has_font_style_support = $typography_supports['fontStyle'] ?? false; - $has_font_weight_support = $typography_supports['fontWeight'] ?? false; - $has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false; + $has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false; + $has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false; + $has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false; $has_line_height_support = $typography_supports['lineHeight'] ?? false; $has_text_align_support = $typography_supports['textAlign'] ?? false; $has_text_columns_support = $typography_supports['textColumns'] ?? false; - $has_text_decoration_support = $typography_supports['textDecoration'] ?? false; - $has_text_transform_support = $typography_supports['textTransform'] ?? false; + $has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false; + $has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false; $has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false; $has_typography_support = $has_font_family_support @@ -91,16 +91,16 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { return array(); } - $has_font_family_support = $typography_supports['fontFamily'] ?? false; + $has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false; $has_font_size_support = $typography_supports['fontSize'] ?? false; - $has_font_style_support = $typography_supports['fontStyle'] ?? false; - $has_font_weight_support = $typography_supports['fontWeight'] ?? false; - $has_letter_spacing_support = $typography_supports['letterSpacing'] ?? false; + $has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false; + $has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false; + $has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false; $has_line_height_support = $typography_supports['lineHeight'] ?? false; $has_text_align_support = $typography_supports['textAlign'] ?? false; $has_text_columns_support = $typography_supports['textColumns'] ?? false; - $has_text_decoration_support = $typography_supports['textDecoration'] ?? false; - $has_text_transform_support = $typography_supports['textTransform'] ?? false; + $has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false; + $has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false; $has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false; // Whether to skip individual block support features. diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 5f3b1bb5cd6b1..cc49c320da650 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/lib/class-wp-duotone-gutenberg.php @@ -640,7 +640,7 @@ private static function get_global_styles_presets( $sources ) { * * @param string $block_name The block name. * - * @return string The CSS selector or null if there is no support. + * @return ?string The CSS selector or null if there is no support. */ private static function get_selector( $block_name ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name ); @@ -669,6 +669,8 @@ private static function get_selector( $block_name ) { // Regular filter.duotone support uses filter.duotone selectors with fallbacks. return wp_get_block_css_selector( $block_type, array( 'filter', 'duotone' ), true ); } + + return null; } /** diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 2e79098200d6c..e3186d2d37032 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -615,10 +615,10 @@ class WP_Theme_JSON_Gutenberg { * @var string[] */ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array( - 'border' => 'border', - 'color' => 'color', - 'spacing' => 'spacing', - 'typography' => 'typography', + '__experimentalBorder' => 'border', + 'color' => 'color', + 'spacing' => 'spacing', + 'typography' => 'typography', ); /** @@ -3413,6 +3413,8 @@ protected static function should_override_preset( $theme_json, $path, $override return true; } + + return false; } /** diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php index dc8747c04aec2..6cfa98691020e 100644 --- a/lib/compat/wordpress-6.8/blocks.php +++ b/lib/compat/wordpress-6.8/blocks.php @@ -5,151 +5,6 @@ * @package gutenberg */ -/** - * Filters the block type arguments during registration to stabilize - * experimental block supports. - * - * This is a temporary compatibility shim as the approach in core is for this - * to be handled within the WP_Block_Type class rather than requiring a filter. - * - * @param array $args Array of arguments for registering a block type. - * @return array Array of arguments for registering a block type. - */ -function gutenberg_stabilize_experimental_block_supports( $args ) { - if ( empty( $args['supports'] ) ) { - return $args; - } - - $experimental_supports_map = array( '__experimentalBorder' => 'border' ); - $common_experimental_properties = array( - '__experimentalDefaultControls' => 'defaultControls', - '__experimentalSkipSerialization' => 'skipSerialization', - ); - $experimental_support_properties = array( - 'typography' => array( - '__experimentalFontFamily' => 'fontFamily', - '__experimentalFontStyle' => 'fontStyle', - '__experimentalFontWeight' => 'fontWeight', - '__experimentalLetterSpacing' => 'letterSpacing', - '__experimentalTextDecoration' => 'textDecoration', - '__experimentalTextTransform' => 'textTransform', - ), - ); - $done = array(); - - $updated_supports = array(); - foreach ( $args['supports'] as $support => $config ) { - /* - * If this support config has already been stabilized, skip it. - * A stable support key occurring after an experimental key, gets - * stabilized then so that the two configs can be merged effectively. - */ - if ( isset( $done[ $support ] ) ) { - continue; - } - - $stable_support_key = $experimental_supports_map[ $support ] ?? $support; - - /* - * Use the support's config as is when it's not in need of stabilization. - * - * A support does not need stabilization if: - * - The support key doesn't need stabilization AND - * - Either: - * - The config isn't an array, so can't have experimental properties OR - * - The config is an array but has no experimental properties to stabilize. - */ - if ( $support === $stable_support_key && - ( ! is_array( $config ) || - ( ! isset( $experimental_support_properties[ $stable_support_key ] ) && - empty( array_intersect_key( $common_experimental_properties, $config ) ) - ) - ) - ) { - $updated_supports[ $support ] = $config; - continue; - } - - $stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) { - if ( ! is_array( $unstable_config ) ) { - return $unstable_config; - } - - $stable_config = array(); - foreach ( $unstable_config as $key => $value ) { - // Get stable key from support-specific map, common properties map, or keep original. - $stable_key = $experimental_support_properties[ $stable_support_key ][ $key ] ?? - $common_experimental_properties[ $key ] ?? - $key; - - $stable_config[ $stable_key ] = $value; - - /* - * The `__experimentalSkipSerialization` key needs to be kept until - * WP 6.8 becomes the minimum supported version. This is due to the - * core `wp_should_skip_block_supports_serialization` function only - * checking for `__experimentalSkipSerialization` in earlier versions. - */ - if ( '__experimentalSkipSerialization' === $key || 'skipSerialization' === $key ) { - $stable_config['__experimentalSkipSerialization'] = $value; - } - } - return $stable_config; - }; - - // Stabilize the config value. - $stable_config = is_array( $config ) ? $stabilize_config( $config, $stable_support_key ) : $config; - - /* - * If a plugin overrides the support config with the `register_block_type_args` - * filter, both experimental and stable configs may be present. In that case, - * use the order keys are defined in to determine the final value. - * - If config is an array, merge the arrays in their order of definition. - * - If config is not an array, use the value defined last. - * - * The reason for preferring the last defined key is that after filters - * are applied, the last inserted key is likely the most up-to-date value. - * We cannot determine with certainty which value was "last modified" so - * the insertion order is the best guess. The extreme edge case of multiple - * filters tweaking the same support property will become less over time as - * extenders migrate existing blocks and plugins to stable keys. - */ - if ( $support !== $stable_support_key && isset( $args['supports'][ $stable_support_key ] ) ) { - $key_positions = array_flip( array_keys( $args['supports'] ) ); - $experimental_first = - ( $key_positions[ $support ] ?? PHP_INT_MAX ) < - ( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX ); - - /* - * To merge the alternative support config effectively, it also needs to be - * stabilized before merging to keep stabilized and experimental flags in - * sync. - */ - $args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key ); - // Prevents reprocessing this support as it was stabilized above. - $done[ $stable_support_key ] = true; - - if ( is_array( $stable_config ) && is_array( $args['supports'][ $stable_support_key ] ) ) { - $stable_config = $experimental_first - ? array_merge( $stable_config, $args['supports'][ $stable_support_key ] ) - : array_merge( $args['supports'][ $stable_support_key ], $stable_config ); - } else { - $stable_config = $experimental_first - ? $args['supports'][ $stable_support_key ] - : $stable_config; - } - } - - $updated_supports[ $stable_support_key ] = $stable_config; - } - - $args['supports'] = $updated_supports; - - return $args; -} - -add_filter( 'register_block_type_args', 'gutenberg_stabilize_experimental_block_supports', PHP_INT_MAX, 1 ); - function gutenberg_apply_block_hooks_to_post_content( $content ) { // The `the_content` filter does not provide the post that the content is coming from. // However, we can infer it by calling `get_post()`, which will return the current post diff --git a/lib/experimental/font-face/bc-layer/webfonts-deprecations.php b/lib/experimental/font-face/bc-layer/webfonts-deprecations.php index 2534d8db16527..fb5e6b315dbda 100644 --- a/lib/experimental/font-face/bc-layer/webfonts-deprecations.php +++ b/lib/experimental/font-face/bc-layer/webfonts-deprecations.php @@ -28,7 +28,7 @@ function wp_webfonts() { global $wp_webfonts; if ( ! ( $wp_webfonts instanceof WP_Webfonts ) ) { - $wp_webfonts = new WP_Webfonts( wp_fonts() ); + $wp_webfonts = new WP_Webfonts(); } return $wp_webfonts; diff --git a/lib/experimental/kses-allowed-html.php b/lib/experimental/kses-allowed-html.php index 122faef7b4ca2..9a4f2e7c614b8 100644 --- a/lib/experimental/kses-allowed-html.php +++ b/lib/experimental/kses-allowed-html.php @@ -40,4 +40,4 @@ function gutenberg_kses_allowed_html( $allowedtags ) { ); return $allowedtags; } -add_filter( 'wp_kses_allowed_html', 'gutenberg_kses_allowed_html', 10, 2 ); +add_filter( 'wp_kses_allowed_html', 'gutenberg_kses_allowed_html' ); diff --git a/lib/experimental/media/load.php b/lib/experimental/media/load.php index 69a5915a98bf2..5e7b00173ca61 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/lib/experimental/posts/load.php b/lib/experimental/posts/load.php index 699534f1886f5..b6dd9d55a8d7d 100644 --- a/lib/experimental/posts/load.php +++ b/lib/experimental/posts/load.php @@ -51,7 +51,7 @@ function gutenberg_posts_dashboard() { do_action( 'enqueue_block_editor_assets' ); wp_register_style( 'wp-gutenberg-posts-dashboard', - gutenberg_url( 'build/edit-site/posts.css', __FILE__ ), + gutenberg_url( 'build/edit-site/posts.css' ), array( 'wp-components', 'wp-commands', 'wp-edit-site' ) ); wp_enqueue_style( 'wp-gutenberg-posts-dashboard' ); diff --git a/lib/rest-api.php b/lib/rest-api.php index 424927acf1f4a..783abc24d3ee3 100644 --- a/lib/rest-api.php +++ b/lib/rest-api.php @@ -26,7 +26,7 @@ function gutenberg_override_global_styles_endpoint( array $args ): array { return $args; } -add_filter( 'register_wp_global_styles_post_type_args', 'gutenberg_override_global_styles_endpoint', 10, 2 ); +add_filter( 'register_wp_global_styles_post_type_args', 'gutenberg_override_global_styles_endpoint' ); /** * Registers the Edit Site Export REST API routes. diff --git a/lib/theme-i18n.json b/lib/theme-i18n.json index e4d14502132cb..1b7a8d0d31190 100644 --- a/lib/theme-i18n.json +++ b/lib/theme-i18n.json @@ -45,6 +45,13 @@ } ] }, + "shadow": { + "presets": [ + { + "name": "Shadow name" + } + ] + }, "blocks": { "*": { "typography": { @@ -69,6 +76,18 @@ { "name": "Gradient name" } + ], + "duotone": [ + { + "name": "Duotone name" + } + ] + }, + "dimensions": { + "aspectRatios": [ + { + "name": "Aspect ratio name" + } ] }, "spacing": { diff --git a/package-lock.json b/package-lock.json index eb2059e151f53..2b2a7e2e7abcb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gutenberg", - "version": "19.9.0", + "version": "20.0.0-rc.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "gutenberg", - "version": "19.9.0", + "version": "20.0.0-rc.1", "hasInstallScript": true, "license": "GPL-2.0-or-later", "workspaces": [ @@ -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", @@ -48812,12 +48708,12 @@ }, "packages/a11y": { "name": "@wordpress/a11y", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/dom-ready": "*", - "@wordpress/i18n": "*" + "@wordpress/dom-ready": "file:../dom-ready", + "@wordpress/i18n": "file:../i18n" }, "engines": { "node": ">=18.12.0", @@ -48826,14 +48722,14 @@ }, "packages/annotations": { "name": "@wordpress/annotations", - "version": "3.14.0", + "version": "3.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/data": "*", - "@wordpress/hooks": "*", - "@wordpress/i18n": "*", - "@wordpress/rich-text": "*", + "@wordpress/data": "file:../data", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/rich-text": "file:../rich-text", "uuid": "^9.0.1" }, "engines": { @@ -48854,12 +48750,12 @@ }, "packages/api-fetch": { "name": "@wordpress/api-fetch", - "version": "7.14.0", + "version": "7.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/i18n": "*", - "@wordpress/url": "*" + "@wordpress/i18n": "file:../i18n", + "@wordpress/url": "file:../url" }, "engines": { "node": ">=18.12.0", @@ -48868,7 +48764,7 @@ }, "packages/autop": { "name": "@wordpress/autop", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -48880,7 +48776,7 @@ }, "packages/babel-plugin-import-jsx-pragma": { "name": "@wordpress/babel-plugin-import-jsx-pragma", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -48892,7 +48788,7 @@ }, "packages/babel-plugin-makepot": { "name": "@wordpress/babel-plugin-makepot", - "version": "6.14.0", + "version": "6.15.0", "license": "GPL-2.0-or-later", "dependencies": { "deepmerge": "^4.3.0", @@ -48909,7 +48805,7 @@ }, "packages/babel-preset-default": { "name": "@wordpress/babel-preset-default", - "version": "8.14.0", + "version": "8.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/core": "7.25.7", @@ -48918,8 +48814,8 @@ "@babel/preset-env": "7.25.7", "@babel/preset-typescript": "7.25.7", "@babel/runtime": "7.25.7", - "@wordpress/browserslist-config": "*", - "@wordpress/warning": "*", + "@wordpress/browserslist-config": "file:../browserslist-config", + "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", "core-js": "^3.31.0", "react": "^18.3.0" @@ -50040,7 +49936,7 @@ }, "packages/base-styles": { "name": "@wordpress/base-styles", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -50049,7 +49945,7 @@ }, "packages/blob": { "name": "@wordpress/blob", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -50061,28 +49957,28 @@ }, "packages/block-directory": { "name": "@wordpress/block-directory", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/editor": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/notices": "*", - "@wordpress/plugins": "*", - "@wordpress/private-apis": "*", - "@wordpress/url": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/editor": "file:../editor", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/plugins": "file:../plugins", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url", "change-case": "^4.1.2", "clsx": "^2.1.1" }, @@ -50097,44 +49993,44 @@ }, "packages/block-editor": { "name": "@wordpress/block-editor", - "version": "14.9.0", + "version": "14.10.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@react-spring/web": "^9.4.5", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/block-serialization-default-parser": "*", - "@wordpress/blocks": "*", - "@wordpress/commands": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/notices": "*", - "@wordpress/preferences": "*", - "@wordpress/priority-queue": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/style-engine": "*", - "@wordpress/token-list": "*", - "@wordpress/url": "*", - "@wordpress/warning": "*", - "@wordpress/wordcount": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser", + "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/notices": "file:../notices", + "@wordpress/preferences": "file:../preferences", + "@wordpress/priority-queue": "file:../priority-queue", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/style-engine": "file:../style-engine", + "@wordpress/token-list": "file:../token-list", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", + "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.7.0", @@ -50197,43 +50093,43 @@ }, "packages/block-library": { "name": "@wordpress/block-library", - "version": "9.14.0", + "version": "9.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/autop": "*", - "@wordpress/blob": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/interactivity": "*", - "@wordpress/interactivity-router": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/notices": "*", - "@wordpress/patterns": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/reusable-blocks": "*", - "@wordpress/rich-text": "*", - "@wordpress/server-side-render": "*", - "@wordpress/url": "*", - "@wordpress/viewport": "*", - "@wordpress/wordcount": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/autop": "file:../autop", + "@wordpress/blob": "file:../blob", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/interactivity": "file:../interactivity", + "@wordpress/interactivity-router": "file:../interactivity-router", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/reusable-blocks": "file:../reusable-blocks", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/server-side-render": "file:../server-side-render", + "@wordpress/url": "file:../url", + "@wordpress/viewport": "file:../viewport", + "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.7.0", @@ -50263,7 +50159,7 @@ }, "packages/block-serialization-default-parser": { "name": "@wordpress/block-serialization-default-parser", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -50275,7 +50171,7 @@ }, "packages/block-serialization-spec-parser": { "name": "@wordpress/block-serialization-spec-parser", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "dependencies": { "pegjs": "^0.10.0", @@ -50288,25 +50184,25 @@ }, "packages/blocks": { "name": "@wordpress/blocks", - "version": "14.3.0", + "version": "14.4.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/autop": "*", - "@wordpress/blob": "*", - "@wordpress/block-serialization-default-parser": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/shortcode": "*", - "@wordpress/warning": "*", + "@wordpress/autop": "file:../autop", + "@wordpress/blob": "file:../blob", + "@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/shortcode": "file:../shortcode", + "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "colord": "^2.7.0", "fast-deep-equal": "^3.1.3", @@ -50342,7 +50238,7 @@ }, "packages/browserslist-config": { "name": "@wordpress/browserslist-config", - "version": "6.14.0", + "version": "6.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -50351,17 +50247,17 @@ }, "packages/commands": { "name": "@wordpress/commands", - "version": "1.14.0", + "version": "1.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/components": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/private-apis": "*", + "@wordpress/components": "file:../components", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1", "cmdk": "^1.0.0" }, @@ -50590,7 +50486,7 @@ }, "packages/components": { "name": "@wordpress/components", - "version": "29.0.0", + "version": "29.1.1", "license": "GPL-2.0-or-later", "dependencies": { "@ariakit/react": "^0.4.15", @@ -50605,23 +50501,23 @@ "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", "@use-gesture/react": "^10.3.1", - "@wordpress/a11y": "*", - "@wordpress/compose": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/keycodes": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/warning": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/compose": "file:../compose", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.7.0", @@ -50681,18 +50577,18 @@ }, "packages/compose": { "name": "@wordpress/compose", - "version": "7.14.0", + "version": "7.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", "@types/mousetrap": "^1.6.8", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/keycodes": "*", - "@wordpress/priority-queue": "*", - "@wordpress/undo-manager": "*", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/priority-queue": "file:../priority-queue", + "@wordpress/undo-manager": "file:../undo-manager", "change-case": "^4.1.2", "clipboard": "^2.0.11", "mousetrap": "^1.6.5", @@ -50718,23 +50614,23 @@ }, "packages/core-commands": { "name": "@wordpress/core-commands", - "version": "1.14.0", + "version": "1.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/block-editor": "*", - "@wordpress/commands": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/notices": "*", - "@wordpress/private-apis": "*", - "@wordpress/router": "*", - "@wordpress/url": "*" + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/commands": "file:../commands", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/router": "file:../router", + "@wordpress/url": "file:../url" }, "engines": { "node": ">=18.12.0", @@ -50747,26 +50643,26 @@ }, "packages/core-data": { "name": "@wordpress/core-data", - "version": "7.14.0", + "version": "7.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/sync": "*", - "@wordpress/undo-manager": "*", - "@wordpress/url": "*", - "@wordpress/warning": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/sync": "file:../sync", + "@wordpress/undo-manager": "file:../undo-manager", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "equivalent-key-map": "^0.2.2", "fast-deep-equal": "^3.1.3", @@ -50792,11 +50688,11 @@ }, "packages/create-block": { "name": "@wordpress/create-block", - "version": "4.57.0", + "version": "4.58.1", "license": "GPL-2.0-or-later", "dependencies": { "@inquirer/prompts": "^7.2.0", - "@wordpress/lazy-import": "*", + "@wordpress/lazy-import": "file:../lazy-import", "chalk": "^4.0.0", "change-case": "^4.1.2", "check-node-version": "^4.1.0", @@ -50819,7 +50715,7 @@ }, "packages/create-block-interactive-template": { "name": "@wordpress/create-block-interactive-template", - "version": "2.14.0", + "version": "2.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -50828,7 +50724,7 @@ }, "packages/create-block-tutorial-template": { "name": "@wordpress/create-block-tutorial-template", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -50837,30 +50733,30 @@ }, "packages/customize-widgets": { "name": "@wordpress/customize-widgets", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/block-editor": "*", - "@wordpress/block-library": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/interface": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/media-utils": "*", - "@wordpress/preferences": "*", - "@wordpress/private-apis": "*", - "@wordpress/widgets": "*", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/block-library": "file:../block-library", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/interface": "file:../interface", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/media-utils": "file:../media-utils", + "@wordpress/preferences": "file:../preferences", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/widgets": "file:../widgets", "clsx": "^2.1.1", "fast-deep-equal": "^3.1.3" }, @@ -50875,17 +50771,17 @@ }, "packages/data": { "name": "@wordpress/data", - "version": "10.14.0", + "version": "10.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/compose": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/priority-queue": "*", - "@wordpress/private-apis": "*", - "@wordpress/redux-routine": "*", + "@wordpress/compose": "file:../compose", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/priority-queue": "file:../priority-queue", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/redux-routine": "file:../redux-routine", "deepmerge": "^4.3.0", "equivalent-key-map": "^0.2.2", "is-plain-object": "^5.0.0", @@ -50904,13 +50800,13 @@ }, "packages/data-controls": { "name": "@wordpress/data-controls", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*" + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated" }, "engines": { "node": ">=18.12.0", @@ -50922,20 +50818,20 @@ }, "packages/dataviews": { "name": "@wordpress/dataviews", - "version": "4.10.0", + "version": "4.11.1", "license": "GPL-2.0-or-later", "dependencies": { "@ariakit/react": "^0.4.15", "@babel/runtime": "7.25.7", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/warning": "*", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/warning": "file:../warning", "clsx": "^2.1.1", "remove-accents": "^0.5.0" }, @@ -50949,11 +50845,11 @@ }, "packages/date": { "name": "@wordpress/date", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/deprecated": "*", + "@wordpress/deprecated": "file:../deprecated", "moment": "^2.29.4", "moment-timezone": "^0.5.40" }, @@ -50964,7 +50860,7 @@ }, "packages/dependency-extraction-webpack-plugin": { "name": "@wordpress/dependency-extraction-webpack-plugin", - "version": "6.14.0", + "version": "6.15.0", "license": "GPL-2.0-or-later", "dependencies": { "json2php": "^0.0.7" @@ -50979,11 +50875,11 @@ }, "packages/deprecated": { "name": "@wordpress/deprecated", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/hooks": "*" + "@wordpress/hooks": "file:../hooks" }, "engines": { "node": ">=18.12.0", @@ -50992,7 +50888,7 @@ }, "packages/docgen": { "name": "@wordpress/docgen", - "version": "2.14.0", + "version": "2.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/core": "7.25.7", @@ -51013,11 +50909,11 @@ }, "packages/dom": { "name": "@wordpress/dom", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/deprecated": "*" + "@wordpress/deprecated": "file:../deprecated" }, "engines": { "node": ">=18.12.0", @@ -51026,7 +50922,7 @@ }, "packages/dom-ready": { "name": "@wordpress/dom-ready", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -51038,13 +50934,13 @@ }, "packages/e2e-test-utils": { "name": "@wordpress/e2e-test-utils", - "version": "11.14.0", + "version": "11.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/keycodes": "*", - "@wordpress/url": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/url": "file:../url", "change-case": "^4.1.2", "form-data": "^4.0.0", "node-fetch": "2.7.0" @@ -51060,7 +50956,7 @@ }, "packages/e2e-test-utils-playwright": { "name": "@wordpress/e2e-test-utils-playwright", - "version": "1.14.0", + "version": "1.15.0", "license": "GPL-2.0-or-later", "dependencies": { "change-case": "^4.1.2", @@ -51086,16 +50982,16 @@ }, "packages/e2e-tests": { "name": "@wordpress/e2e-tests", - "version": "8.14.0", + "version": "8.15.1", "license": "GPL-2.0-or-later", "dependencies": { - "@wordpress/e2e-test-utils": "*", - "@wordpress/interactivity": "*", - "@wordpress/interactivity-router": "*", - "@wordpress/jest-console": "*", - "@wordpress/jest-puppeteer-axe": "*", - "@wordpress/scripts": "*", - "@wordpress/url": "*", + "@wordpress/e2e-test-utils": "file:../e2e-test-utils", + "@wordpress/interactivity": "file:../interactivity", + "@wordpress/interactivity-router": "file:../interactivity-router", + "@wordpress/jest-console": "file:../jest-console", + "@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe", + "@wordpress/scripts": "file:../scripts", + "@wordpress/url": "file:../url", "chalk": "^4.0.0", "expect-puppeteer": "^4.4.0", "filenamify": "^4.2.0", @@ -51124,39 +51020,39 @@ }, "packages/edit-post": { "name": "@wordpress/edit-post", - "version": "8.14.0", + "version": "8.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/block-library": "*", - "@wordpress/blocks": "*", - "@wordpress/commands": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-commands": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/editor": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/notices": "*", - "@wordpress/plugins": "*", - "@wordpress/preferences": "*", - "@wordpress/private-apis": "*", - "@wordpress/url": "*", - "@wordpress/viewport": "*", - "@wordpress/warning": "*", - "@wordpress/widgets": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/block-library": "file:../block-library", + "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-commands": "file:../core-commands", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/editor": "file:../editor", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/notices": "file:../notices", + "@wordpress/plugins": "file:../plugins", + "@wordpress/preferences": "file:../preferences", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url", + "@wordpress/viewport": "file:../viewport", + "@wordpress/warning": "file:../warning", + "@wordpress/widgets": "file:../widgets", "clsx": "^2.1.1", "memize": "^2.1.0" }, @@ -51171,51 +51067,51 @@ }, "packages/edit-site": { "name": "@wordpress/edit-site", - "version": "6.14.0", + "version": "6.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", "@react-spring/web": "^9.4.5", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/block-editor": "*", - "@wordpress/block-library": "*", - "@wordpress/blocks": "*", - "@wordpress/commands": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-commands": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/dataviews": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/editor": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/fields": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/media-utils": "5.14.0", - "@wordpress/notices": "*", - "@wordpress/patterns": "*", - "@wordpress/plugins": "*", - "@wordpress/preferences": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/reusable-blocks": "*", - "@wordpress/router": "*", - "@wordpress/style-engine": "*", - "@wordpress/url": "*", - "@wordpress/viewport": "*", - "@wordpress/widgets": "*", - "@wordpress/wordcount": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/block-library": "file:../block-library", + "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-commands": "file:../core-commands", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/dataviews": "file:../dataviews", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/editor": "file:../editor", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/fields": "file:../fields", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/media-utils": "file:../media-utils", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/plugins": "file:../plugins", + "@wordpress/preferences": "file:../preferences", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/reusable-blocks": "file:../reusable-blocks", + "@wordpress/router": "file:../router", + "@wordpress/style-engine": "file:../style-engine", + "@wordpress/url": "file:../url", + "@wordpress/viewport": "file:../viewport", + "@wordpress/widgets": "file:../widgets", + "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.9.2", @@ -51234,36 +51130,36 @@ }, "packages/edit-widgets": { "name": "@wordpress/edit-widgets", - "version": "6.14.0", + "version": "6.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/block-library": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/interface": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/media-utils": "*", - "@wordpress/notices": "*", - "@wordpress/patterns": "*", - "@wordpress/plugins": "*", - "@wordpress/preferences": "*", - "@wordpress/private-apis": "*", - "@wordpress/reusable-blocks": "*", - "@wordpress/url": "*", - "@wordpress/widgets": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/block-library": "file:../block-library", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/interface": "file:../interface", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/media-utils": "file:../media-utils", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/plugins": "file:../plugins", + "@wordpress/preferences": "file:../preferences", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/reusable-blocks": "file:../reusable-blocks", + "@wordpress/url": "file:../url", + "@wordpress/widgets": "file:../widgets", "clsx": "^2.1.1" }, "engines": { @@ -51277,45 +51173,45 @@ }, "packages/editor": { "name": "@wordpress/editor", - "version": "14.14.0", + "version": "14.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/commands": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/dataviews": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/fields": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/interface": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/media-utils": "*", - "@wordpress/notices": "*", - "@wordpress/patterns": "*", - "@wordpress/plugins": "*", - "@wordpress/preferences": "*", - "@wordpress/private-apis": "*", - "@wordpress/reusable-blocks": "*", - "@wordpress/rich-text": "*", - "@wordpress/server-side-render": "*", - "@wordpress/url": "*", - "@wordpress/warning": "*", - "@wordpress/wordcount": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/dataviews": "file:../dataviews", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/fields": "file:../fields", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/interface": "file:../interface", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/media-utils": "file:../media-utils", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/plugins": "file:../plugins", + "@wordpress/preferences": "file:../preferences", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/reusable-blocks": "file:../reusable-blocks", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/server-side-render": "file:../server-side-render", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", + "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "client-zip": "^2.4.5", "clsx": "^2.1.1", @@ -51339,13 +51235,13 @@ }, "packages/element": { "name": "@wordpress/element", - "version": "6.14.0", + "version": "6.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", "@types/react": "^18.2.79", "@types/react-dom": "^18.2.25", - "@wordpress/escape-html": "*", + "@wordpress/escape-html": "file:../escape-html", "change-case": "^4.1.2", "is-plain-object": "^5.0.0", "react": "^18.3.0", @@ -51358,7 +51254,7 @@ }, "packages/env": { "name": "@wordpress/env", - "version": "10.14.0", + "version": "10.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@inquirer/prompts": "^7.2.0", @@ -51407,7 +51303,7 @@ }, "packages/escape-html": { "name": "@wordpress/escape-html", - "version": "3.14.0", + "version": "3.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -51419,14 +51315,14 @@ }, "packages/eslint-plugin": { "name": "@wordpress/eslint-plugin", - "version": "22.0.0", + "version": "22.1.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/eslint-parser": "7.25.7", "@typescript-eslint/eslint-plugin": "^6.4.1", "@typescript-eslint/parser": "^6.4.1", - "@wordpress/babel-preset-default": "*", - "@wordpress/prettier-config": "*", + "@wordpress/babel-preset-default": "file:../babel-preset-default", + "@wordpress/prettier-config": "file:../prettier-config", "cosmiconfig": "^7.0.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.2", @@ -51488,33 +51384,33 @@ }, "packages/fields": { "name": "@wordpress/fields", - "version": "0.6.0", + "version": "0.7.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/dataviews": "*", - "@wordpress/date": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/media-utils": "*", - "@wordpress/notices": "*", - "@wordpress/patterns": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/router": "*", - "@wordpress/url": "*", - "@wordpress/warning": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/dataviews": "file:../dataviews", + "@wordpress/date": "file:../date", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/media-utils": "file:../media-utils", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/router": "file:../router", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", "change-case": "4.1.2", "client-zip": "^2.4.5", "clsx": "2.1.1", @@ -51530,22 +51426,22 @@ }, "packages/format-library": { "name": "@wordpress/format-library", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/block-editor": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/url": "*" + "@wordpress/a11y": "file:../a11y", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/url": "file:../url" }, "engines": { "node": ">=18.12.0", @@ -51558,7 +51454,7 @@ }, "packages/hooks": { "name": "@wordpress/hooks", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -51570,7 +51466,7 @@ }, "packages/html-entities": { "name": "@wordpress/html-entities", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -51582,11 +51478,11 @@ }, "packages/i18n": { "name": "@wordpress/i18n", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/hooks": "*", + "@wordpress/hooks": "file:../hooks", "gettext-parser": "^1.3.1", "memize": "^2.1.0", "sprintf-js": "^1.1.1", @@ -51602,12 +51498,12 @@ }, "packages/icons": { "name": "@wordpress/icons", - "version": "10.14.0", + "version": "10.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/element": "*", - "@wordpress/primitives": "*" + "@wordpress/element": "file:../element", + "@wordpress/primitives": "file:../primitives" }, "engines": { "node": ">=18.12.0", @@ -51616,7 +51512,7 @@ }, "packages/interactivity": { "name": "@wordpress/interactivity", - "version": "6.14.0", + "version": "6.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@preact/signals": "^1.3.0", @@ -51629,11 +51525,11 @@ }, "packages/interactivity-router": { "name": "@wordpress/interactivity-router", - "version": "2.14.0", + "version": "2.15.1", "license": "GPL-2.0-or-later", "dependencies": { - "@wordpress/a11y": "*", - "@wordpress/interactivity": "*" + "@wordpress/a11y": "file:../a11y", + "@wordpress/interactivity": "file:../interactivity" }, "engines": { "node": ">=18.12.0", @@ -51642,21 +51538,21 @@ }, "packages/interface": { "name": "@wordpress/interface", - "version": "8.3.0", + "version": "9.0.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/plugins": "*", - "@wordpress/preferences": "*", - "@wordpress/viewport": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/plugins": "file:../plugins", + "@wordpress/preferences": "file:../preferences", + "@wordpress/viewport": "file:../viewport", "clsx": "^2.1.1" }, "engines": { @@ -51670,7 +51566,7 @@ }, "packages/is-shallow-equal": { "name": "@wordpress/is-shallow-equal", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -51682,7 +51578,7 @@ }, "packages/jest-console": { "name": "@wordpress/jest-console", - "version": "8.14.0", + "version": "8.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -51698,10 +51594,10 @@ }, "packages/jest-preset-default": { "name": "@wordpress/jest-preset-default", - "version": "12.14.0", + "version": "12.15.1", "license": "GPL-2.0-or-later", "dependencies": { - "@wordpress/jest-console": "*", + "@wordpress/jest-console": "file:../jest-console", "babel-jest": "29.7.0" }, "engines": { @@ -51715,7 +51611,7 @@ }, "packages/jest-puppeteer-axe": { "name": "@wordpress/jest-puppeteer-axe", - "version": "7.14.0", + "version": "7.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@axe-core/puppeteer": "^4.0.0", @@ -51737,13 +51633,13 @@ }, "packages/keyboard-shortcuts": { "name": "@wordpress/keyboard-shortcuts", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/keycodes": "*" + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/keycodes": "file:../keycodes" }, "engines": { "node": ">=18.12.0", @@ -51755,11 +51651,11 @@ }, "packages/keycodes": { "name": "@wordpress/keycodes", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/i18n": "*" + "@wordpress/i18n": "file:../i18n" }, "engines": { "node": ">=18.12.0", @@ -51768,7 +51664,7 @@ }, "packages/lazy-import": { "name": "@wordpress/lazy-import", - "version": "2.14.0", + "version": "2.15.0", "license": "GPL-2.0-or-later", "dependencies": { "execa": "^4.0.2", @@ -51782,16 +51678,16 @@ }, "packages/list-reusable-blocks": { "name": "@wordpress/list-reusable-blocks", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", "change-case": "^4.1.2" }, "engines": { @@ -51805,15 +51701,15 @@ }, "packages/media-utils": { "name": "@wordpress/media-utils", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/private-apis": "*" + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/private-apis": "file:../private-apis" }, "engines": { "node": ">=18.12.0", @@ -51822,12 +51718,12 @@ }, "packages/notices": { "name": "@wordpress/notices", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/data": "*" + "@wordpress/a11y": "file:../a11y", + "@wordpress/data": "file:../data" }, "engines": { "node": ">=18.12.0", @@ -51839,7 +51735,7 @@ }, "packages/npm-package-json-lint-config": { "name": "@wordpress/npm-package-json-lint-config", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -51851,17 +51747,17 @@ }, "packages/nux": { "name": "@wordpress/nux", - "version": "9.14.0", + "version": "9.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*" + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons" }, "engines": { "node": ">=18.12.0", @@ -51874,24 +51770,24 @@ }, "packages/patterns": { "name": "@wordpress/patterns", - "version": "2.14.0", + "version": "2.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/notices": "*", - "@wordpress/private-apis": "*", - "@wordpress/url": "*" + "@wordpress/a11y": "file:../a11y", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url" }, "engines": { "node": ">=18.12.0", @@ -51904,17 +51800,17 @@ }, "packages/plugins": { "name": "@wordpress/plugins", - "version": "7.14.0", + "version": "7.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/icons": "*", - "@wordpress/is-shallow-equal": "*", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/icons": "file:../icons", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", "memize": "^2.0.1" }, "engines": { @@ -51928,10 +51824,10 @@ }, "packages/postcss-plugins-preset": { "name": "@wordpress/postcss-plugins-preset", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { - "@wordpress/base-styles": "*", + "@wordpress/base-styles": "file:../base-styles", "autoprefixer": "^10.4.20" }, "engines": { @@ -51997,7 +51893,7 @@ }, "packages/postcss-themes": { "name": "@wordpress/postcss-themes", - "version": "6.14.0", + "version": "6.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -52009,19 +51905,19 @@ }, "packages/preferences": { "name": "@wordpress/preferences", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/private-apis": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1" }, "engines": { @@ -52035,11 +51931,11 @@ }, "packages/preferences-persistence": { "name": "@wordpress/preferences-persistence", - "version": "2.14.0", + "version": "2.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*" + "@wordpress/api-fetch": "file:../api-fetch" }, "engines": { "node": ">=18.12.0", @@ -52048,7 +51944,7 @@ }, "packages/prettier-config": { "name": "@wordpress/prettier-config", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -52060,11 +51956,11 @@ }, "packages/primitives": { "name": "@wordpress/primitives", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/element": "*", + "@wordpress/element": "file:../element", "clsx": "^2.1.1" }, "engines": { @@ -52077,7 +51973,7 @@ }, "packages/priority-queue": { "name": "@wordpress/priority-queue", - "version": "3.14.0", + "version": "3.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -52090,7 +51986,7 @@ }, "packages/private-apis": { "name": "@wordpress/private-apis", - "version": "1.14.0", + "version": "1.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -52102,7 +51998,7 @@ }, "packages/project-management-automation": { "name": "@wordpress/project-management-automation", - "version": "2.14.0", + "version": "2.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@actions/core": "1.9.1", @@ -52130,12 +52026,12 @@ }, "packages/react-i18n": { "name": "@wordpress/react-i18n", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/element": "*", - "@wordpress/i18n": "*", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", "utility-types": "^3.10.0" }, "engines": { @@ -52148,8 +52044,8 @@ "version": "1.121.0", "license": "GPL-2.0-or-later", "dependencies": { - "@wordpress/element": "*", - "@wordpress/keycodes": "*" + "@wordpress/element": "file:../element", + "@wordpress/keycodes": "file:../keycodes" }, "engines": { "node": ">=18.12.0", @@ -52165,7 +52061,7 @@ "version": "1.121.0", "license": "GPL-2.0-or-later", "dependencies": { - "@wordpress/react-native-aztec": "*" + "@wordpress/react-native-aztec": "file:../react-native-aztec" }, "engines": { "node": ">=18.12.0", @@ -52190,18 +52086,18 @@ "@react-navigation/native": "6.0.14", "@react-navigation/routers": "5.4.9", "@react-navigation/stack": "6.3.5", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/block-library": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/data": "*", - "@wordpress/edit-post": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/i18n": "*", - "@wordpress/react-native-aztec": "*", - "@wordpress/react-native-bridge": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/block-library": "file:../block-library", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/data": "file:../data", + "@wordpress/edit-post": "file:../edit-post", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/react-native-aztec": "file:../react-native-aztec", + "@wordpress/react-native-bridge": "file:../react-native-bridge", "core-js": "^3.31.0", "fast-average-color": "^9.1.1", "gettext-parser": "^1.3.1", @@ -52286,7 +52182,7 @@ }, "packages/readable-js-assets-webpack-plugin": { "name": "@wordpress/readable-js-assets-webpack-plugin", - "version": "3.14.0", + "version": "3.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -52298,7 +52194,7 @@ }, "packages/redux-routine": { "name": "@wordpress/redux-routine", - "version": "5.14.0", + "version": "5.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -52341,21 +52237,21 @@ }, "packages/reusable-blocks": { "name": "@wordpress/reusable-blocks", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/notices": "*", - "@wordpress/private-apis": "*", - "@wordpress/url": "*" + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url" }, "engines": { "node": ">=18.12.0", @@ -52368,18 +52264,18 @@ }, "packages/rich-text": { "name": "@wordpress/rich-text", - "version": "7.14.0", + "version": "7.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/i18n": "*", - "@wordpress/keycodes": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/i18n": "file:../i18n", + "@wordpress/keycodes": "file:../keycodes", "memize": "^2.1.0" }, "engines": { @@ -52392,14 +52288,14 @@ }, "packages/router": { "name": "@wordpress/router", - "version": "1.14.0", + "version": "1.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/compose": "*", - "@wordpress/element": "*", - "@wordpress/private-apis": "*", - "@wordpress/url": "*", + "@wordpress/compose": "file:../compose", + "@wordpress/element": "file:../element", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url", "history": "^5.3.0", "route-recognizer": "^0.3.4" }, @@ -52413,22 +52309,22 @@ }, "packages/scripts": { "name": "@wordpress/scripts", - "version": "30.7.0", + "version": "30.8.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/core": "7.25.7", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@svgr/webpack": "^8.0.1", - "@wordpress/babel-preset-default": "*", - "@wordpress/browserslist-config": "*", - "@wordpress/dependency-extraction-webpack-plugin": "*", - "@wordpress/e2e-test-utils-playwright": "*", - "@wordpress/eslint-plugin": "*", - "@wordpress/jest-preset-default": "*", - "@wordpress/npm-package-json-lint-config": "*", - "@wordpress/postcss-plugins-preset": "*", - "@wordpress/prettier-config": "*", - "@wordpress/stylelint-config": "*", + "@wordpress/babel-preset-default": "file:../babel-preset-default", + "@wordpress/browserslist-config": "file:../browserslist-config", + "@wordpress/dependency-extraction-webpack-plugin": "file:../dependency-extraction-webpack-plugin", + "@wordpress/e2e-test-utils-playwright": "file:../e2e-test-utils-playwright", + "@wordpress/eslint-plugin": "file:../eslint-plugin", + "@wordpress/jest-preset-default": "file:../jest-preset-default", + "@wordpress/npm-package-json-lint-config": "file:../npm-package-json-lint-config", + "@wordpress/postcss-plugins-preset": "file:../postcss-plugins-preset", + "@wordpress/prettier-config": "file:../prettier-config", + "@wordpress/stylelint-config": "file:../stylelint-config", "adm-zip": "^0.5.9", "babel-jest": "29.7.0", "babel-loader": "9.2.1", @@ -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", @@ -52551,19 +52447,19 @@ }, "packages/server-side-render": { "name": "@wordpress/server-side-render", - "version": "5.14.0", + "version": "5.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/url": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/url": "file:../url", "fast-deep-equal": "^3.1.3" }, "engines": { @@ -52577,7 +52473,7 @@ }, "packages/shortcode": { "name": "@wordpress/shortcode", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -52590,7 +52486,7 @@ }, "packages/style-engine": { "name": "@wordpress/style-engine", - "version": "2.14.0", + "version": "2.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -52603,7 +52499,7 @@ }, "packages/stylelint-config": { "name": "@wordpress/stylelint-config", - "version": "23.6.0", + "version": "23.7.0", "license": "MIT", "dependencies": { "@stylistic/stylelint-plugin": "^3.0.1", @@ -52714,12 +52610,12 @@ }, "packages/sync": { "name": "@wordpress/sync", - "version": "1.14.0", + "version": "1.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", "@types/simple-peer": "^9.11.5", - "@wordpress/url": "*", + "@wordpress/url": "file:../url", "import-locals": "^2.0.0", "lib0": "^0.2.42", "simple-peer": "^9.11.0", @@ -52735,7 +52631,7 @@ }, "packages/token-list": { "name": "@wordpress/token-list", - "version": "3.14.0", + "version": "3.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" @@ -52747,11 +52643,11 @@ }, "packages/undo-manager": { "name": "@wordpress/undo-manager", - "version": "1.14.0", + "version": "1.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/is-shallow-equal": "*" + "@wordpress/is-shallow-equal": "file:../is-shallow-equal" }, "engines": { "node": ">=18.12.0", @@ -52782,7 +52678,7 @@ }, "packages/url": { "name": "@wordpress/url", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", @@ -52795,13 +52691,13 @@ }, "packages/viewport": { "name": "@wordpress/viewport", - "version": "6.14.0", + "version": "6.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/element": "*" + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element" }, "engines": { "node": ">=18.12.0", @@ -52825,7 +52721,7 @@ }, "packages/warning": { "name": "@wordpress/warning", - "version": "3.14.0", + "version": "3.15.0", "license": "GPL-2.0-or-later", "engines": { "node": ">=18.12.0", @@ -52834,21 +52730,21 @@ }, "packages/widgets": { "name": "@wordpress/widgets", - "version": "4.14.0", + "version": "4.15.1", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/notices": "*", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", "clsx": "^2.1.1" }, "engines": { @@ -52862,7 +52758,7 @@ }, "packages/wordcount": { "name": "@wordpress/wordcount", - "version": "4.14.0", + "version": "4.15.0", "license": "GPL-2.0-or-later", "dependencies": { "@babel/runtime": "7.25.7" diff --git a/package.json b/package.json index de73148bd6245..58a99ada7308a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gutenberg", - "version": "19.9.0", + "version": "20.0.0-rc.1", "private": true, "description": "A new WordPress editor experience.", "author": "The WordPress Contributors", @@ -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/CHANGELOG.md b/packages/a11y/CHANGELOG.md index d61f28833d3f6..5c8241a12f8b4 100644 --- a/packages/a11y/CHANGELOG.md +++ b/packages/a11y/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.15.0 (2025-01-02) + ## 4.14.0 (2024-12-11) ## 4.13.0 (2024-11-27) diff --git a/packages/a11y/package.json b/packages/a11y/package.json index 6ad4f8acb9bd8..dc2a9db468dc8 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/a11y", - "version": "4.14.0", + "version": "4.15.1", "description": "Accessibility (a11y) utilities for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -32,8 +32,8 @@ "types": "build-types", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/dom-ready": "*", - "@wordpress/i18n": "*" + "@wordpress/dom-ready": "file:../dom-ready", + "@wordpress/i18n": "file:../i18n" }, "publishConfig": { "access": "public" diff --git a/packages/a11y/tsconfig.json b/packages/a11y/tsconfig.json index 093c2775f96d6..13229eadde8f2 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/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md index 66433930b6375..2db47776ea25d 100644 --- a/packages/annotations/CHANGELOG.md +++ b/packages/annotations/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 3.15.0 (2025-01-02) + ## 3.14.0 (2024-12-11) ## 3.13.0 (2024-11-27) diff --git a/packages/annotations/package.json b/packages/annotations/package.json index e10ece8600e81..f48dc22ff9579 100644 --- a/packages/annotations/package.json +++ b/packages/annotations/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/annotations", - "version": "3.14.0", + "version": "3.15.1", "description": "Annotate content in the Gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -28,10 +28,10 @@ "wpScript": true, "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/data": "*", - "@wordpress/hooks": "*", - "@wordpress/i18n": "*", - "@wordpress/rich-text": "*", + "@wordpress/data": "file:../data", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/rich-text": "file:../rich-text", "uuid": "^9.0.1" }, "peerDependencies": { diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md index d1d481d6ff9fc..c03af1b66cb83 100644 --- a/packages/api-fetch/CHANGELOG.md +++ b/packages/api-fetch/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 7.15.0 (2025-01-02) + ## 7.14.0 (2024-12-11) ## 7.13.0 (2024-11-27) diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json index fd2430dfc7760..6e1a81f1f9688 100644 --- a/packages/api-fetch/package.json +++ b/packages/api-fetch/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/api-fetch", - "version": "7.14.0", + "version": "7.15.1", "description": "Utility to make WordPress REST API requests.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -30,8 +30,8 @@ "types": "build-types", "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/i18n": "*", - "@wordpress/url": "*" + "@wordpress/i18n": "file:../i18n", + "@wordpress/url": "file:../url" }, "publishConfig": { "access": "public" diff --git a/packages/api-fetch/tsconfig.json b/packages/api-fetch/tsconfig.json index f9d517286a102..635fe4a8c0d35 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/CHANGELOG.md b/packages/autop/CHANGELOG.md index fc054bb8c14e0..7dc60247ccfa6 100644 --- a/packages/autop/CHANGELOG.md +++ b/packages/autop/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.15.0 (2025-01-02) + ## 4.14.0 (2024-12-11) ## 4.13.0 (2024-11-27) diff --git a/packages/autop/package.json b/packages/autop/package.json index cdffb6175b31e..f696f0f178735 100644 --- a/packages/autop/package.json +++ b/packages/autop/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/autop", - "version": "4.14.0", + "version": "4.15.0", "description": "WordPress's automatic paragraph functions `autop` and `removep`.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/autop/tsconfig.json b/packages/autop/tsconfig.json index a09ec7466c435..f68a855bab79c 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/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md index d372ad314b1b6..7952463060d69 100644 --- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md +++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.15.0 (2025-01-02) + ## 5.14.0 (2024-12-11) ## 5.13.0 (2024-11-27) diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json index d7ebed0e46f28..44d0649a6e66d 100644 --- a/packages/babel-plugin-import-jsx-pragma/package.json +++ b/packages/babel-plugin-import-jsx-pragma/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/babel-plugin-import-jsx-pragma", - "version": "5.14.0", + "version": "5.15.0", "description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md index 7f608c6704635..4520b626df51c 100644 --- a/packages/babel-plugin-makepot/CHANGELOG.md +++ b/packages/babel-plugin-makepot/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 6.15.0 (2025-01-02) + ## 6.14.0 (2024-12-11) ## 6.13.0 (2024-11-27) diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json index 352da89d84b37..e5bd79453a1f5 100644 --- a/packages/babel-plugin-makepot/package.json +++ b/packages/babel-plugin-makepot/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/babel-plugin-makepot", - "version": "6.14.0", + "version": "6.15.0", "description": "WordPress Babel internationalization (i18n) plugin.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index 1401fc5d1452b..3e5e3b667f38b 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 8.15.0 (2025-01-02) + ## 8.14.0 (2024-12-11) ## 8.13.0 (2024-11-27) diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index b983a198f42f9..48046c00bfb3a 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/babel-preset-default", - "version": "8.14.0", + "version": "8.15.1", "description": "Default Babel preset for WordPress development.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -38,8 +38,8 @@ "@babel/preset-env": "7.25.7", "@babel/preset-typescript": "7.25.7", "@babel/runtime": "7.25.7", - "@wordpress/browserslist-config": "*", - "@wordpress/warning": "*", + "@wordpress/browserslist-config": "file:../browserslist-config", + "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", "core-js": "^3.31.0", "react": "^18.3.0" diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md index ccdb7976cd0c2..1331b656810ff 100644 --- a/packages/base-styles/CHANGELOG.md +++ b/packages/base-styles/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.15.0 (2025-01-02) + ## 5.14.0 (2024-12-11) ## 5.13.0 (2024-11-27) diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss index e5bbf86375735..728f702ba1630 100644 --- a/packages/base-styles/_animations.scss +++ b/packages/base-styles/_animations.scss @@ -14,10 +14,10 @@ } } - - animation: __wp-base-styles-fade-in $speed $easing $delay; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not (prefers-reduced-motion) { + animation: __wp-base-styles-fade-in $speed $easing $delay; + animation-fill-mode: forwards; + } } @mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) { @@ -30,10 +30,10 @@ } } - - animation: __wp-base-styles-fade-out $speed $easing $delay; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + @media not (prefers-reduced-motion) { + animation: __wp-base-styles-fade-out $speed $easing $delay; + animation-fill-mode: forwards; + } } // Deprecated diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index e2f953e578781..9f089b8d9e832 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -141,10 +141,13 @@ // Tabs, Inputs, Square buttons. @mixin input-style__neutral() { box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; + + @media not (prefers-reduced-motion) { + transition: box-shadow 0.1s linear; + } + border-radius: $radius-small; border: $border-width solid $gray-600; - @include reduce-motion("transition"); } diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json index 0677b61ca0bfd..6866965ec5657 100644 --- a/packages/base-styles/package.json +++ b/packages/base-styles/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/base-styles", - "version": "5.14.0", + "version": "5.15.0", "description": "Base SCSS utilities and variables for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md index 03c4724426eb6..a0082c8ea8858 100644 --- a/packages/blob/CHANGELOG.md +++ b/packages/blob/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 4.15.0 (2025-01-02) + ## 4.14.0 (2024-12-11) ## 4.13.0 (2024-11-27) diff --git a/packages/blob/package.json b/packages/blob/package.json index b69a5c2a5d913..42ac3b59e6cf8 100644 --- a/packages/blob/package.json +++ b/packages/blob/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/blob", - "version": "4.14.0", + "version": "4.15.0", "description": "Blob utilities for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blob/tsconfig.json b/packages/blob/tsconfig.json index 6e33d8ff82d47..7ff060ab6ce10 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-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md index eb6b832b407e1..f6f37d48607da 100644 --- a/packages/block-directory/CHANGELOG.md +++ b/packages/block-directory/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.15.0 (2025-01-02) + ## 5.14.0 (2024-12-11) ## 5.13.0 (2024-11-27) diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index fc1176b98fa3a..89cf16cacd849 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-directory", - "version": "5.14.0", + "version": "5.15.1", "description": "Extend editor with block directory features to search, download and install blocks.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -28,24 +28,24 @@ "wpScript": true, "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/editor": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/notices": "*", - "@wordpress/plugins": "*", - "@wordpress/private-apis": "*", - "@wordpress/url": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/editor": "file:../editor", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/notices": "file:../notices", + "@wordpress/plugins": "file:../plugins", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/url": "file:../url", "change-case": "^4.1.2", "clsx": "^2.1.1" }, diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 623ec018c483c..67ee2d92ec0fd 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 14.10.0 (2025-01-02) + ## 14.9.0 (2024-12-11) ## 14.8.0 (2024-11-27) diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index c5e82b5924585..da1687b28d25b 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-editor", - "version": "14.9.0", + "version": "14.10.1", "description": "Generic block editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -37,37 +37,37 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@react-spring/web": "^9.4.5", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/blob": "*", - "@wordpress/block-serialization-default-parser": "*", - "@wordpress/blocks": "*", - "@wordpress/commands": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/data": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/notices": "*", - "@wordpress/preferences": "*", - "@wordpress/priority-queue": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/style-engine": "*", - "@wordpress/token-list": "*", - "@wordpress/url": "*", - "@wordpress/warning": "*", - "@wordpress/wordcount": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/blob": "file:../blob", + "@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser", + "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/data": "file:../data", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/notices": "file:../notices", + "@wordpress/preferences": "file:../preferences", + "@wordpress/priority-queue": "file:../priority-queue", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/style-engine": "file:../style-engine", + "@wordpress/token-list": "file:../token-list", + "@wordpress/url": "file:../url", + "@wordpress/warning": "file:../warning", + "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.7.0", diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js index 2703aa3988d64..6c703ad2eadb4 100644 --- a/packages/block-editor/src/components/background-image-control/index.js +++ b/packages/block-editor/src/components/background-image-control/index.js @@ -24,6 +24,7 @@ import { Placeholder, Spinner, __experimentalDropdownContentWrapper as DropdownContentWrapper, + Button, } from '@wordpress/components'; import { __, _x, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; @@ -378,6 +379,9 @@ function BackgroundImageControls( { /> } variant="secondary" + renderToggle={ ( props ) => ( + + <> + + { clearable && value && ( + , + ], + }, +}; + +export const WithSecondaryActions = { + args: { + ...Default.args, + secondaryActions: [ + { title: __( 'Get help' ) }, + { title: __( 'Remove block' ) }, + ], + }, +}; diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 14b3dbf7669b3..4ab4c69a41f31 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -31,7 +31,7 @@ import { import { store as blockEditorStore } from '../store'; import { __ } from '@wordpress/i18n'; -export const BORDER_SUPPORT_KEY = 'border'; +export const BORDER_SUPPORT_KEY = '__experimentalBorder'; export const SHADOW_SUPPORT_KEY = 'shadow'; const getColorByProperty = ( colors, property, value ) => { @@ -161,8 +161,14 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) { } const defaultControls = { - ...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ), - ...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ), + ...getBlockSupport( name, [ + BORDER_SUPPORT_KEY, + '__experimentalDefaultControls', + ] ), + ...getBlockSupport( name, [ + SHADOW_SUPPORT_KEY, + '__experimentalDefaultControls', + ] ), }; return ( diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 2fecc10a31198..ef8984c936785 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -290,7 +290,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) { const defaultControls = getBlockSupport( name, [ COLOR_SUPPORT_KEY, - 'defaultControls', + '__experimentalDefaultControls', ] ); const enableContrastChecking = diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index c98cc34e4272c..ffa4048b7740e 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -88,11 +88,11 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) { const defaultDimensionsControls = getBlockSupport( name, [ DIMENSIONS_SUPPORT_KEY, - 'defaultControls', + '__experimentalDefaultControls', ] ); const defaultSpacingControls = getBlockSupport( name, [ SPACING_SUPPORT_KEY, - 'defaultControls', + '__experimentalDefaultControls', ] ); const defaultControls = { ...defaultDimensionsControls, diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index e5d8e02ab8ec0..ba9a66a8bcf04 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -13,7 +13,7 @@ import { shouldSkipSerialization } from './utils'; import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; import { unlock } from '../lock-unlock'; -export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily'; +export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; const { kebabCase } = unlock( componentsPrivateApis ); /** diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index c7f9df868f2bd..0e4c2aa276fd4 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/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index db2acd01665b6..998d13cfd2224 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -98,16 +98,22 @@ function addAttribute( settings ) { * @type {Record} */ const skipSerializationPathsEdit = { - [ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ], - [ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ], - [ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [ + [ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ], + [ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + COLOR_SUPPORT_KEY, + ], + [ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ TYPOGRAPHY_SUPPORT_KEY, ], - [ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [ + [ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ DIMENSIONS_SUPPORT_KEY, ], - [ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ], - [ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ], + [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + SPACING_SUPPORT_KEY, + ], + [ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + SHADOW_SUPPORT_KEY, + ], }; /** diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 102b78bbb96e6..75f2bdf2dc219 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -6,20 +6,20 @@ import { Platform } from '@wordpress/element'; const ALIGN_SUPPORT_KEY = 'align'; const ALIGN_WIDE_SUPPORT_KEY = 'alignWide'; -const BORDER_SUPPORT_KEY = 'border'; +const BORDER_SUPPORT_KEY = '__experimentalBorder'; const COLOR_SUPPORT_KEY = 'color'; const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName'; -const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily'; +const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize'; const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight'; /** * Key within block settings' support array indicating support for font style. */ -const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle'; +const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle'; /** * Key within block settings' support array indicating support for font weight. */ -const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight'; +const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight'; /** * Key within block settings' supports array indicating support for text * align e.g. settings found in `block.json`. @@ -34,7 +34,7 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns'; * Key within block settings' supports array indicating support for text * decorations e.g. settings found in `block.json`. */ -const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration'; +const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration'; /** * Key within block settings' supports array indicating support for writing mode * e.g. settings found in `block.json`. @@ -44,13 +44,13 @@ const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode'; * Key within block settings' supports array indicating support for text * transforms e.g. settings found in `block.json`. */ -const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform'; +const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform'; /** * Key within block settings' supports array indicating support for letter-spacing * e.g. settings found in `block.json`. */ -const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing'; +const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing'; const LAYOUT_SUPPORT_KEY = 'layout'; const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 40e7169194b82..2cfe299b8c8d9 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -133,7 +133,8 @@ describe( 'addSaveProps', () => { const applySkipSerialization = ( features ) => { const updatedSettings = { ...blockSettings }; Object.keys( features ).forEach( ( key ) => { - updatedSettings.supports[ key ].skipSerialization = features[ key ]; + updatedSettings.supports[ key ].__experimentalSkipSerialization = + features[ key ]; } ); return updatedSettings; }; diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 160894eac4e61..cf3f4327c8f03 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -27,12 +27,12 @@ function omit( object, keys ) { ); } -const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing'; -const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform'; -const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration'; +const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing'; +const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform'; +const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration'; const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns'; -const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle'; -const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight'; +const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle'; +const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight'; const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode'; export const TYPOGRAPHY_SUPPORT_KEY = 'typography'; export const TYPOGRAPHY_SUPPORT_KEYS = [ @@ -133,7 +133,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) { const defaultControls = getBlockSupport( name, [ TYPOGRAPHY_SUPPORT_KEY, - 'defaultControls', + '__experimentalDefaultControls', ] ); return ( diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index ac6e55efe4d3b..4334f70b9d13b 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -124,7 +124,7 @@ export function shouldSkipSerialization( feature ) { const support = getBlockSupport( blockNameOrType, featureSet ); - const skipSerialization = support?.skipSerialization; + const skipSerialization = support?.__experimentalSkipSerialization; if ( Array.isArray( skipSerialization ) ) { return skipSerialization.includes( feature ); diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index c46778d889b3e..72b87a59e8f57 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -502,13 +502,23 @@ export const getParentSectionBlock = ( state, clientId ) => { * @return {boolean} Whether the block is a content locking parent. */ export function isSectionBlock( state, clientId ) { + const blockName = getBlockName( state, clientId ); + if ( + blockName === 'core/block' || + getTemplateLock( state, clientId ) === 'contentOnly' + ) { + return true; + } + + // Template parts become sections in navigation mode. + const _isNavigationMode = isNavigationMode( state ); + if ( _isNavigationMode && blockName === 'core/template-part' ) { + return true; + } + const sectionRootClientId = getSectionRootClientId( state ); const sectionClientIds = getBlockOrder( state, sectionRootClientId ); - return ( - getBlockName( state, clientId ) === 'core/block' || - getTemplateLock( state, clientId ) === 'contentOnly' || - ( isNavigationMode( state ) && sectionClientIds.includes( clientId ) ) - ); + return _isNavigationMode && sectionClientIds.includes( clientId ); } /** diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index edae9c392c37d..fc3803462d892 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1964,8 +1964,14 @@ export function temporarilyEditingFocusModeRevert( state = '', action ) { export function blockEditingModes( state = new Map(), action ) { switch ( action.type ) { case 'SET_BLOCK_EDITING_MODE': + if ( state.get( action.clientId ) === action.mode ) { + return state; + } return new Map( state ).set( action.clientId, action.mode ); case 'UNSET_BLOCK_EDITING_MODE': { + if ( ! state.has( action.clientId ) ) { + return state; + } const newState = new Map( state ); newState.delete( action.clientId ); return newState; @@ -2186,19 +2192,19 @@ function getBlockTreeBlock( state, clientId ) { * The callback receives the current block as its argument. */ function traverseBlockTree( state, clientId, callback ) { - const parentTree = getBlockTreeBlock( state, clientId ); - if ( ! parentTree ) { + const tree = getBlockTreeBlock( state, clientId ); + if ( ! tree ) { return; } - callback( parentTree ); + callback( tree ); - if ( ! parentTree?.innerBlocks?.length ) { + if ( ! tree?.innerBlocks?.length ) { return; } - for ( const block of parentTree?.innerBlocks ) { - traverseBlockTree( state, block.clientId, callback ); + for ( const innerBlock of tree?.innerBlocks ) { + traverseBlockTree( state, innerBlock.clientId, callback ); } } @@ -2212,8 +2218,12 @@ function traverseBlockTree( state, clientId, callback ) { * @return {string|undefined} The client ID of the parent block if found, undefined otherwise. */ function findParentInClientIdsList( state, clientId, clientIds ) { + if ( ! clientIds.length ) { + return; + } + let parent = state.blocks.parents.get( clientId ); - while ( parent ) { + while ( parent !== undefined ) { if ( clientIds.includes( parent ) ) { return parent; } @@ -2258,15 +2268,65 @@ function getDerivedBlockEditingModesForTree( // so the default block editing mode is set to disabled. const sectionRootClientId = state.settings?.[ sectionRootClientIdKey ]; const sectionClientIds = state.blocks.order.get( sectionRootClientId ); - const syncedPatternClientIds = Object.keys( - state.blocks.controlledInnerBlocks - ).filter( - ( clientId ) => - state.blocks.byClientId?.get( clientId )?.name === 'core/block' + const hasDisabledBlocks = Array.from( state.blockEditingModes ).some( + ( [ , mode ] ) => mode === 'disabled' ); + const templatePartClientIds = []; + const syncedPatternClientIds = []; + + Object.keys( state.blocks.controlledInnerBlocks ).forEach( ( clientId ) => { + const block = state.blocks.byClientId?.get( clientId ); + + if ( block?.name === 'core/template-part' ) { + templatePartClientIds.push( clientId ); + } + + if ( block?.name === 'core/block' ) { + syncedPatternClientIds.push( clientId ); + } + } ); traverseBlockTree( state, treeClientId, ( block ) => { const { clientId, name: blockName } = block; + + // If the block already has an explicit block editing mode set, + // don't override it. + if ( state.blockEditingModes.has( clientId ) ) { + return; + } + + // Disabled explicit block editing modes are inherited by children. + // It's an expensive calculation, so only do it if there are disabled blocks. + if ( hasDisabledBlocks ) { + // Look through parents to find one with an explicit block editing mode. + let ancestorBlockEditingMode; + let parent = state.blocks.parents.get( clientId ); + while ( parent !== undefined ) { + // There's a chance we only just calculated this for the parent, + // if so we can return that value for a faster lookup. + if ( derivedBlockEditingModes.has( parent ) ) { + ancestorBlockEditingMode = + derivedBlockEditingModes.get( parent ); + } else if ( state.blockEditingModes.has( parent ) ) { + // Checking the explicit block editing mode will be slower, + // as the block editing mode is more likely to be set on a + // distant ancestor. + ancestorBlockEditingMode = + state.blockEditingModes.get( parent ); + } + if ( ancestorBlockEditingMode ) { + break; + } + parent = state.blocks.parents.get( parent ); + } + + // If the ancestor block editing mode is disabled, it's inherited by the child. + if ( ancestorBlockEditingMode === 'disabled' ) { + derivedBlockEditingModes.set( clientId, 'disabled' ); + return; + } + } + if ( isZoomedOut || isNavMode ) { // If the root block is the section root set its editing mode to contentOnly. if ( clientId === sectionRootClientId ) { @@ -2287,15 +2347,41 @@ function getDerivedBlockEditingModesForTree( // If zoomed out, all blocks that aren't sections or the section root are // disabled. - // If the tree root is not in a section, set its editing mode to disabled. - if ( - isZoomedOut || - ! findParentInClientIdsList( state, clientId, sectionClientIds ) - ) { + if ( isZoomedOut ) { derivedBlockEditingModes.set( clientId, 'disabled' ); return; } + const isInSection = !! findParentInClientIdsList( + state, + clientId, + sectionClientIds + ); + if ( ! isInSection ) { + if ( clientId === '' ) { + derivedBlockEditingModes.set( clientId, 'disabled' ); + return; + } + + // Allow selection of template parts outside of sections. + if ( blockName === 'core/template-part' ) { + derivedBlockEditingModes.set( clientId, 'contentOnly' ); + return; + } + + const isInTemplatePart = !! findParentInClientIdsList( + state, + clientId, + templatePartClientIds + ); + // Allow contentOnly blocks in template parts outside of sections + // to be editable. Only disable blocks that don't fit this criteria. + if ( ! isInTemplatePart && ! isContentBlock( blockName ) ) { + derivedBlockEditingModes.set( clientId, 'disabled' ); + return; + } + } + // Handle synced pattern content so the inner blocks of a synced pattern are // properly disabled. if ( syncedPatternClientIds.length ) { @@ -2560,11 +2646,16 @@ export function withDerivedBlockEditingModes( reducer ) { } break; } + case 'SET_BLOCK_EDITING_MODE': + case 'UNSET_BLOCK_EDITING_MODE': case 'SET_HAS_CONTROLLED_INNER_BLOCKS': { - const updatedBlock = nextState.blocks.tree.get( + const updatedBlock = getBlockTreeBlock( + nextState, action.clientId ); - // The block might have been removed. + + // The block might have been removed in which case it'll be + // handled by the `REMOVE_BLOCKS` action. if ( ! updatedBlock ) { break; } @@ -2573,6 +2664,7 @@ export function withDerivedBlockEditingModes( reducer ) { getDerivedBlockEditingModesUpdates( { prevState: state, nextState, + removedClientIds: [ action.clientId ], addedBlocks: [ updatedBlock ], isNavMode: false, } ); @@ -2580,6 +2672,7 @@ export function withDerivedBlockEditingModes( reducer ) { getDerivedBlockEditingModesUpdates( { prevState: state, nextState, + removedClientIds: [ action.clientId ], addedBlocks: [ updatedBlock ], isNavMode: true, } ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 20d9ac48fe1ce..22d725bbcd65d 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -3087,9 +3087,7 @@ export const getBlockEditingMode = createRegistrySelector( const isContent = hasContentRoleAttribute( name ); return isContent ? 'contentOnly' : 'disabled'; } - // Otherwise, check if there's an ancestor that is contentOnly - const parentMode = getBlockEditingMode( state, rootClientId ); - return parentMode === 'contentOnly' ? 'default' : parentMode; + return 'default'; } ); diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index 74f56728a96a6..bf0e18c7a24d6 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -122,6 +122,7 @@ describe( 'private selectors', () => { '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {}, }, blockEditingModes: new Map( [] ), + derivedBlockEditingModes: new Map( [] ), }; const hasContentRoleAttribute = jest.fn( () => false ); @@ -142,6 +143,7 @@ describe( 'private selectors', () => { const state = { ...baseState, blockEditingModes: new Map( [] ), + derivedBlockEditingModes: new Map( [] ), }; expect( isBlockSubtreeDisabled( @@ -157,6 +159,12 @@ describe( 'private selectors', () => { blockEditingModes: new Map( [ [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], ] ), + derivedBlockEditingModes: new Map( [ + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + ] ), }; expect( isBlockSubtreeDisabled( @@ -170,6 +178,14 @@ describe( 'private selectors', () => { const state = { ...baseState, blockEditingModes: new Map( [ [ '', 'disabled' ] ] ), + derivedBlockEditingModes: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ], + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + ] ), }; expect( isBlockSubtreeDisabled( @@ -186,6 +202,11 @@ describe( 'private selectors', () => { [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], ] ), + derivedBlockEditingModes: new Map( [ + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + ] ), }; expect( isBlockSubtreeDisabled( @@ -202,6 +223,11 @@ describe( 'private selectors', () => { [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ], ] ), + derivedBlockEditingModes: new Map( [ + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + ] ), }; expect( isBlockSubtreeDisabled( @@ -218,6 +244,13 @@ describe( 'private selectors', () => { [ '', 'disabled' ], [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ], ] ), + derivedBlockEditingModes: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ], + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + ] ), }; expect( isBlockSubtreeDisabled( @@ -303,6 +336,7 @@ describe( 'private selectors', () => { const state = { ...baseState, blockEditingModes: new Map( [] ), + derivedBlockEditingModes: new Map( [] ), }; expect( getEnabledClientIdsTree( state ) ).toEqual( [ { @@ -340,6 +374,7 @@ describe( 'private selectors', () => { const state = { ...baseState, blockEditingModes: new Map( [] ), + derivedBlockEditingModes: new Map( [] ), }; expect( getEnabledClientIdsTree( @@ -375,6 +410,10 @@ describe( 'private selectors', () => { [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'contentOnly' ], [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ], ] ), + derivedBlockEditingModes: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ], + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + ] ), }; expect( getEnabledClientIdsTree( state ) ).toEqual( [ { @@ -412,6 +451,7 @@ describe( 'private selectors', () => { ] ), }, blockEditingModes: new Map(), + derivedBlockEditingModes: new Map(), }; expect( getEnabledBlockParents( @@ -433,7 +473,7 @@ describe( 'private selectors', () => { ], [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', - '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', + 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', ], [ '4c2b7140-fffd-44b4-b2a7-820c670a6514', @@ -442,6 +482,7 @@ describe( 'private selectors', () => { ] ), order: new Map( [ + [ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ], [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', [ @@ -453,12 +494,15 @@ describe( 'private selectors', () => { 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ], ], - [ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ], ] ), }, blockEditingModes: new Map( [ [ '', 'disabled' ], - [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'default' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'default' ], + ] ), + derivedBlockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], ] ), blockListSettings: {}, }; @@ -467,10 +511,7 @@ describe( 'private selectors', () => { state, '4c2b7140-fffd-44b4-b2a7-820c670a6514' ) - ).toEqual( [ - '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', - 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', - ] ); + ).toEqual( [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c' ] ); } ); it( 'should order from bottom to top if ascending is true', () => { @@ -493,6 +534,7 @@ describe( 'private selectors', () => { ], ] ), order: new Map( [ + [ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ], [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f' ], @@ -505,13 +547,15 @@ describe( 'private selectors', () => { 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ], ], - [ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ], ] ), }, blockEditingModes: new Map( [ [ '', 'disabled' ], [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'default' ], ] ), + derivedBlockEditingModes: new Map( [ + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + ] ), blockListSettings: {}, }; expect( diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index dd1665d6736ad..6706ff2fbb59e 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -12,8 +12,7 @@ import { createBlock, privateApis, } from '@wordpress/blocks'; -import { combineReducers, select } from '@wordpress/data'; -import { store as preferencesStore } from '@wordpress/preferences'; +import { combineReducers } from '@wordpress/data'; /** * Internal dependencies @@ -3576,6 +3575,7 @@ describe( 'state', () => { blocks, settings, zoomLevel, + blockEditingModes, } ) ); @@ -3598,15 +3598,6 @@ describe( 'state', () => { describe( 'edit mode', () => { let initialState; beforeAll( () => { - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'edit' ), - }; - } - return select( storeName ); - } ); - initialState = dispatchActions( [ { @@ -3651,10 +3642,6 @@ describe( 'state', () => { ); } ); - afterAll( () => { - select.mockRestore(); - } ); - it( 'returns no block editing modes when zoomed out / navigation mode are not active and there are no synced patterns', () => { expect( initialState.derivedBlockEditingModes ).toEqual( new Map() @@ -3665,15 +3652,6 @@ describe( 'state', () => { describe( 'synced patterns', () => { let initialState; beforeAll( () => { - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'edit' ), - }; - } - return select( storeName ); - } ); - // Simulates how the editor typically inserts controlled blocks, // - first the pattern is inserted with no inner blocks. // - next the pattern is marked as a controlled block. @@ -3818,10 +3796,6 @@ describe( 'state', () => { ); } ); - afterAll( () => { - select.mockRestore(); - } ); - it( 'returns the expected block editing modes for synced patterns', () => { // Only the parent pattern and its own children that have bindings // are in contentOnly mode. All other blocks are disabled. @@ -3840,60 +3814,8 @@ describe( 'state', () => { ); } ); - it( 'removes block editing modes when synced patterns are removed', () => { - const { derivedBlockEditingModes } = dispatchActions( - [ - { - type: 'REMOVE_BLOCKS', - clientIds: [ 'root-pattern' ], - }, - ], - testReducer, - initialState - ); - - expect( derivedBlockEditingModes ).toEqual( new Map() ); - } ); - - it( 'returns the expected block editing modes for synced patterns when switching to navigation mode', () => { - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'navigation' ), - }; - } - return select( storeName ); - } ); - - const { - derivedBlockEditingModes, - derivedNavModeBlockEditingModes, - } = dispatchActions( - [ - { - type: 'SET_EDITOR_MODE', - mode: 'navigation', - }, - ], - testReducer, - initialState - ); - - expect( derivedBlockEditingModes ).toEqual( - new Map( - Object.entries( { - 'pattern-paragraph': 'disabled', - 'pattern-group': 'disabled', - 'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings. - 'nested-pattern': 'disabled', - 'nested-paragraph': 'disabled', - 'nested-group': 'disabled', - 'nested-paragraph-with-overrides': 'disabled', - } ) - ) - ); - - expect( derivedNavModeBlockEditingModes ).toEqual( + it( 'returns the expected block editing modes for synced patterns in navigation mode', () => { + expect( initialState.derivedNavModeBlockEditingModes ).toEqual( new Map( Object.entries( { '': 'contentOnly', // Section root. @@ -3912,15 +3834,21 @@ describe( 'state', () => { } ) ) ); + } ); - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'edit' ), - }; - } - return select( storeName ); - } ); + it( 'removes block editing modes when synced patterns are removed', () => { + const { derivedBlockEditingModes } = dispatchActions( + [ + { + type: 'REMOVE_BLOCKS', + clientIds: [ 'root-pattern' ], + }, + ], + testReducer, + initialState + ); + + expect( derivedBlockEditingModes ).toEqual( new Map() ); } ); it( 'returns the expected block editing modes for synced patterns when switching to zoomed out mode', () => { @@ -3961,52 +3889,104 @@ describe( 'state', () => { let initialState; beforeAll( () => { - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'navigation' ), - }; - } - return select( storeName ); - } ); - initialState = dispatchActions( [ { type: 'UPDATE_SETTINGS', settings: { - [ sectionRootClientIdKey ]: '', + [ sectionRootClientIdKey ]: 'section-root', }, }, { type: 'RESET_BLOCKS', blocks: [ + { + name: 'core/template-part', + clientId: 'header', + attributes: {}, + innerBlocks: [], + }, { name: 'core/group', - clientId: 'group-1', + clientId: 'section-root', attributes: {}, innerBlocks: [ - { - name: 'core/paragraph', - clientId: 'paragraph-1', - attributes: {}, - innerBlocks: [], - }, { name: 'core/group', - clientId: 'group-2', + clientId: 'group-1', attributes: {}, innerBlocks: [ { name: 'core/paragraph', - clientId: 'paragraph-2', + clientId: 'paragraph-1', attributes: {}, innerBlocks: [], }, + { + name: 'core/group', + clientId: 'group-2', + attributes: {}, + innerBlocks: [ + { + name: 'core/paragraph', + clientId: + 'paragraph-2', + attributes: {}, + innerBlocks: [], + }, + ], + }, ], }, ], }, + { + name: 'core/template-part', + clientId: 'footer', + attributes: {}, + innerBlocks: [], + }, + ], + }, + { + type: 'SET_HAS_CONTROLLED_INNER_BLOCKS', + clientId: 'header', + hasControlledInnerBlocks: true, + }, + { + type: 'REPLACE_INNER_BLOCKS', + rootClientId: 'header', + blocks: [ + { + name: 'core/group', + clientId: 'header-group', + attributes: {}, + innerBlocks: [ + { + name: 'core/paragraph', + clientId: 'header-paragraph', + attributes: {}, + innerBlocks: [], + }, + ], + }, + ], + }, + { + type: 'SET_HAS_CONTROLLED_INNER_BLOCKS', + clientId: 'footer', + hasControlledInnerBlocks: true, + }, + { + type: 'REPLACE_INNER_BLOCKS', + rootClientId: 'footer', + blocks: [ + { + name: 'core/paragraph', + clientId: 'footer-paragraph', + attributes: {}, + innerBlocks: [], + }, ], }, ], @@ -4014,15 +3994,17 @@ describe( 'state', () => { ); } ); - afterAll( () => { - select.mockRestore(); - } ); - it( 'returns the expected block editing modes', () => { expect( initialState.derivedNavModeBlockEditingModes ).toEqual( new Map( Object.entries( { - '': 'contentOnly', // Section root. + '': 'disabled', + header: 'contentOnly', // Template part. + 'header-group': 'disabled', // Content block in template part. + 'header-paragraph': 'contentOnly', // Content block in template part. + footer: 'contentOnly', // Template part. + 'footer-paragraph': 'contentOnly', // Content block in template part. + 'section-root': 'contentOnly', // Section root. 'group-1': 'contentOnly', // Section block. 'paragraph-1': 'contentOnly', // Content block in section. 'group-2': 'disabled', // Non-content block in section. @@ -4032,6 +4014,49 @@ describe( 'state', () => { ); } ); + it( 'allows content blocks to be disabled explicitly using the block editing mode', () => { + const { + derivedNavModeBlockEditingModes, + blockEditingModes: _blockEditingModes, + } = dispatchActions( + [ + { + type: 'SET_BLOCK_EDITING_MODE', + clientId: 'paragraph-1', + mode: 'disabled', + }, + ], + testReducer, + initialState + ); + + // Paragraph 1 is explicitly disabled and omitted from the + // derived block editing modes. + expect( _blockEditingModes ).toEqual( + new Map( + Object.entries( { + 'paragraph-1': 'disabled', + } ) + ) + ); + expect( derivedNavModeBlockEditingModes ).toEqual( + new Map( + Object.entries( { + '': 'disabled', + header: 'contentOnly', + 'header-group': 'disabled', + 'header-paragraph': 'contentOnly', + footer: 'contentOnly', + 'footer-paragraph': 'contentOnly', + 'section-root': 'contentOnly', + 'group-1': 'contentOnly', + 'group-2': 'disabled', + 'paragraph-2': 'contentOnly', + } ) + ) + ); + } ); + it( 'removes block editing modes when blocks are removed', () => { const { derivedNavModeBlockEditingModes } = dispatchActions( [ @@ -4047,7 +4072,13 @@ describe( 'state', () => { expect( derivedNavModeBlockEditingModes ).toEqual( new Map( Object.entries( { - '': 'contentOnly', + '': 'disabled', + header: 'contentOnly', // Template part. + 'header-group': 'disabled', // Content block in template part. + 'header-paragraph': 'contentOnly', // Content block in template part. + footer: 'contentOnly', // Template part. + 'footer-paragraph': 'contentOnly', // Content block in template part. + 'section-root': 'contentOnly', 'group-1': 'contentOnly', 'paragraph-1': 'contentOnly', } ) @@ -4060,7 +4091,7 @@ describe( 'state', () => { [ { type: 'INSERT_BLOCKS', - rootClientId: '', + rootClientId: 'section-root', blocks: [ { name: 'core/group', @@ -4091,7 +4122,13 @@ describe( 'state', () => { expect( derivedNavModeBlockEditingModes ).toEqual( new Map( Object.entries( { - '': 'contentOnly', // Section root. + '': 'disabled', // Section root. + header: 'contentOnly', // Template part. + 'header-group': 'disabled', // Content block in template part. + 'header-paragraph': 'contentOnly', // Content block in template part. + footer: 'contentOnly', // Template part. + 'footer-paragraph': 'contentOnly', // Content block in template part. + 'section-root': 'contentOnly', // Section root. 'group-1': 'contentOnly', // Section block. 'paragraph-1': 'contentOnly', // Content block in section. 'group-2': 'disabled', // Non-content block in section. @@ -4111,7 +4148,7 @@ describe( 'state', () => { type: 'MOVE_BLOCKS_TO_POSITION', clientIds: [ 'group-2' ], fromRootClientId: 'group-1', - toRootClientId: '', + toRootClientId: 'section-root', }, ], testReducer, @@ -4120,7 +4157,13 @@ describe( 'state', () => { expect( derivedNavModeBlockEditingModes ).toEqual( new Map( Object.entries( { - '': 'contentOnly', // Section root. + '': 'disabled', // Section root. + header: 'contentOnly', // Template part. + 'header-group': 'disabled', // Content block in template part. + 'header-paragraph': 'contentOnly', // Content block in template part. + footer: 'contentOnly', // Template part. + 'footer-paragraph': 'contentOnly', // Content block in template part. + 'section-root': 'contentOnly', // Section root. 'group-1': 'contentOnly', // Section block. 'paragraph-1': 'contentOnly', // Content block in section. 'group-2': 'contentOnly', // New section block. @@ -4148,10 +4191,16 @@ describe( 'state', () => { new Map( Object.entries( { '': 'disabled', - 'group-1': 'contentOnly', - 'paragraph-1': 'contentOnly', - 'group-2': 'contentOnly', - 'paragraph-2': 'contentOnly', + header: 'contentOnly', // Template part. + 'header-group': 'disabled', // Content block in template part. + 'header-paragraph': 'contentOnly', // Content block in template part. + footer: 'contentOnly', // Template part. + 'footer-paragraph': 'contentOnly', // Content block in template part. + 'section-root': 'disabled', + 'group-1': 'contentOnly', // New section root. + 'paragraph-1': 'contentOnly', // Section and content block + 'group-2': 'contentOnly', // Section. + 'paragraph-2': 'contentOnly', // Content block. } ) ) ); @@ -4224,49 +4273,6 @@ describe( 'state', () => { ); } ); - it( 'overrides navigation mode', () => { - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'navigation' ), - }; - } - return select( storeName ); - } ); - - const { derivedBlockEditingModes } = dispatchActions( - [ - { - type: 'SET_EDITOR_MODE', - mode: 'navigation', - }, - ], - testReducer, - initialState - ); - - expect( derivedBlockEditingModes ).toEqual( - new Map( - Object.entries( { - '': 'contentOnly', // Section root. - 'group-1': 'contentOnly', // Section block. - 'paragraph-1': 'disabled', - 'group-2': 'disabled', - 'paragraph-2': 'disabled', - } ) - ) - ); - - select.mockImplementation( ( storeName ) => { - if ( storeName === preferencesStore ) { - return { - get: jest.fn( () => 'edit' ), - }; - } - return select( storeName ); - } ); - } ); - it( 'removes block editing modes when blocks are removed', () => { const { derivedBlockEditingModes } = dispatchActions( [ diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 9fcf212da14e2..587e1036e405e 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -4465,6 +4465,7 @@ describe( 'getBlockEditingMode', () => { '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {}, }, blockEditingModes: new Map( [] ), + derivedBlockEditingModes: new Map( [] ), }; const hasContentRoleAttribute = jest.fn( () => false ); @@ -4519,6 +4520,13 @@ describe( 'getBlockEditingMode', () => { blockEditingModes: new Map( [ [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], ] ), + derivedBlockEditingModes: new Map( [ + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', 'disabled' ], + ] ), }; expect( getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) @@ -4545,6 +4553,12 @@ describe( 'getBlockEditingMode', () => { [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'default' ], [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], ] ), + derivedBlockEditingModes: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', 'disabled' ], + ] ), }; expect( getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) @@ -4555,6 +4569,15 @@ describe( 'getBlockEditingMode', () => { const state = { ...baseState, blockEditingModes: new Map( [ [ '', 'disabled' ] ] ), + derivedBlockEditingModes: new Map( [ + [ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ], + [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ], + [ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ], + [ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ], + [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ], + [ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', 'disabled' ], + ] ), }; expect( getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' ) diff --git a/packages/block-editor/tsconfig.json b/packages/block-editor/tsconfig.json index a3c7d1ffd8807..a3a6bd18f451d 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/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 823d89ecd854f..68631a03626d3 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 9.15.0 (2025-01-02) + ## 9.14.0 (2024-12-11) ## 9.13.0 (2024-11-27) diff --git a/packages/block-library/package.json b/packages/block-library/package.json index d7cc75bc17764..c7f0571d4aa01 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-library", - "version": "9.14.0", + "version": "9.15.1", "description": "Block library for the WordPress editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -41,39 +41,39 @@ ], "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/a11y": "*", - "@wordpress/api-fetch": "*", - "@wordpress/autop": "*", - "@wordpress/blob": "*", - "@wordpress/block-editor": "*", - "@wordpress/blocks": "*", - "@wordpress/components": "*", - "@wordpress/compose": "*", - "@wordpress/core-data": "*", - "@wordpress/data": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/interactivity": "*", - "@wordpress/interactivity-router": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/keycodes": "*", - "@wordpress/notices": "*", - "@wordpress/patterns": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/reusable-blocks": "*", - "@wordpress/rich-text": "*", - "@wordpress/server-side-render": "*", - "@wordpress/url": "*", - "@wordpress/viewport": "*", - "@wordpress/wordcount": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/autop": "file:../autop", + "@wordpress/blob": "file:../blob", + "@wordpress/block-editor": "file:../block-editor", + "@wordpress/blocks": "file:../blocks", + "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", + "@wordpress/core-data": "file:../core-data", + "@wordpress/data": "file:../data", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/interactivity": "file:../interactivity", + "@wordpress/interactivity-router": "file:../interactivity-router", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/notices": "file:../notices", + "@wordpress/patterns": "file:../patterns", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/reusable-blocks": "file:../reusable-blocks", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/server-side-render": "file:../server-side-render", + "@wordpress/url": "file:../url", + "@wordpress/viewport": "file:../viewport", + "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.7.0", diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 2c1c05baa20dd..6fcb7aca4c592 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 8ab83e1b09518..f478c39a0dc32 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 d00e522f5a5d2..06e10f604650e 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -14,7 +14,7 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useEffect, useState, useRef, useMemo } from '@wordpress/element'; import { TextControl, @@ -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 } ) @@ -146,7 +148,11 @@ function WidthPanel( { selectedWidth, setAttributes } ) { ); } ) } @@ -266,6 +272,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.' + ) } + + ) } + ) } initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json index eb5203af33c86..0871b000c569d 100644 --- a/packages/block-library/src/comments-pagination-previous/block.json +++ b/packages/block-library/src/comments-pagination-previous/block.json @@ -12,11 +12,6 @@ "type": "string" } }, - "example": { - "attributes": { - "label": "Comments Previous Page" - } - }, "usesContext": [ "postId", "comments/paginationArrow" ], "supports": { "reusable": false, diff --git a/packages/block-library/src/comments-pagination-previous/index.js b/packages/block-library/src/comments-pagination-previous/index.js index 80e555ccc79d9..975d4c0b6cbc0 100644 --- a/packages/block-library/src/comments-pagination-previous/index.js +++ b/packages/block-library/src/comments-pagination-previous/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { queryPaginationPrevious as icon } from '@wordpress/icons'; /** @@ -16,6 +17,11 @@ export { metadata, name }; export const settings = { icon, edit, + example: { + attributes: { + label: __( 'Older Comments' ), + }, + }, }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index 21db8b986d6e5..b907bd41e3c6a 100644 --- a/packages/block-library/src/comments/index.js +++ b/packages/block-library/src/comments/index.js @@ -17,6 +17,7 @@ export { metadata, name }; export const settings = { icon, + example: {}, edit, save, deprecated, diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index ced3097320329..1eafe99e283eb 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -114,11 +114,18 @@ function CoverEdit( { const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); - const media = useSelect( - ( select ) => - 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 87780e93a1765..336d99935f001 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 a946a499b26f2..820c792730311 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/more/edit.js b/packages/block-library/src/more/edit.js index 21e26b47bfb16..af903640b6b8d 100644 --- a/packages/block-library/src/more/edit.js +++ b/packages/block-library/src/more/edit.js @@ -10,6 +10,10 @@ import { import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { ENTER } from '@wordpress/keycodes'; import { getDefaultBlockName, createBlock } from '@wordpress/blocks'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; const DEFAULT_TEXT = __( 'Read more' ); @@ -41,6 +45,8 @@ export default function MoreEdit( { width: `${ ( customText ? customText : DEFAULT_TEXT ).length + 1.2 }em`, }; + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + return ( <> @@ -51,6 +57,7 @@ export default function MoreEdit( { noTeaser: false, } ); } } + dropdownMenuProps={ dropdownMenuProps } > false } - > -
-

{ convertDescription }

- -
- +
+

{ convertDescription }

+ +
) } diff --git a/packages/block-library/src/post-author-name/block.json b/packages/block-library/src/post-author-name/block.json index 68d2c49bd9105..23211f0bf5bf4 100644 --- a/packages/block-library/src/post-author-name/block.json +++ b/packages/block-library/src/post-author-name/block.json @@ -12,11 +12,13 @@ }, "isLink": { "type": "boolean", - "default": false + "default": false, + "role": "content" }, "linkTarget": { "type": "string", - "default": "_self" + "default": "_self", + "role": "content" } }, "usesContext": [ "postType", "postId" ], diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index d66498c8ee3df..c7f2f01550a61 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -26,11 +26,13 @@ }, "isLink": { "type": "boolean", - "default": false + "default": false, + "role": "content" }, "linkTarget": { "type": "string", - "default": "_self" + "default": "_self", + "role": "content" } }, "usesContext": [ "postType", "postId", "queryId" ], diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json index af893ccb67a08..4b6b333b75cfa 100644 --- a/packages/block-library/src/post-comments-form/block.json +++ b/packages/block-library/src/post-comments-form/block.json @@ -56,5 +56,10 @@ "wp-block-post-comments-form", "wp-block-buttons", "wp-block-button" - ] + ], + "example": { + "attributes": { + "textAlign": "center" + } + } } diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json index 67831b1d15c5d..8e23bc7a69507 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 0000000000000..110179d3ee1df --- /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-date/block.json b/packages/block-library/src/post-date/block.json index 470bddae53bdf..dadc0d2f489fe 100644 --- a/packages/block-library/src/post-date/block.json +++ b/packages/block-library/src/post-date/block.json @@ -15,7 +15,8 @@ }, "isLink": { "type": "boolean", - "default": false + "default": false, + "role": "content" }, "displayType": { "type": "string", diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 6ac39c0f14798..36de2f7e5d725 100644 --- a/packages/block-library/src/post-date/edit.js +++ b/packages/block-library/src/post-date/edit.js @@ -34,6 +34,11 @@ import { edit } from '@wordpress/icons'; import { DOWN } from '@wordpress/keycodes'; import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; + export default function PostDateEdit( { attributes: { textAlign, format, isLink, displayType }, context: { postId, postType: postTypeSlug, queryId }, @@ -45,6 +50,7 @@ export default function PostDateEdit( { [ `wp-block-post-date__modified-date` ]: displayType === 'modified', } ), } ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); // Use internal state instead of a ref to make sure that the component // re-renders when the popover's anchor updates. @@ -170,6 +176,7 @@ export default function PostDateEdit( { displayType: 'date', } ); } } + dropdownMenuProps={ dropdownMenuProps } > diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 8b431ffc62579..3cd144caa0cf4 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -9,7 +9,8 @@ "attributes": { "isLink": { "type": "boolean", - "default": false + "default": false, + "role": "content" }, "aspectRatio": { "type": "string" @@ -30,11 +31,13 @@ "rel": { "type": "string", "attribute": "rel", - "default": "" + "default": "", + "role": "content" }, "linkTarget": { "type": "string", - "default": "_self" + "default": "_self", + "role": "content" }, "overlayColor": { "type": "string" 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 5a3e40a126bf8..9a71a96b2db84 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-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index 5f1b295119822..ce733759846fe 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -34,12 +34,6 @@ "default": "" } }, - "example": { - "attributes": { - "label": "Next post", - "arrow": "arrow" - } - }, "usesContext": [ "postType" ], "supports": { "reusable": false, diff --git a/packages/block-library/src/post-navigation-link/index.js b/packages/block-library/src/post-navigation-link/index.js index e85e594990adb..4bcb199906705 100644 --- a/packages/block-library/src/post-navigation-link/index.js +++ b/packages/block-library/src/post-navigation-link/index.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * Internal dependencies */ @@ -12,6 +17,12 @@ export { metadata, name }; export const settings = { edit, variations, + example: { + attributes: { + label: __( 'Next post' ), + arrow: 'arrow', + }, + }, }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/post-navigation-link/variations.js b/packages/block-library/src/post-navigation-link/variations.js index 4f52b21338af1..e49be1542685e 100644 --- a/packages/block-library/src/post-navigation-link/variations.js +++ b/packages/block-library/src/post-navigation-link/variations.js @@ -17,7 +17,7 @@ const variations = [ scope: [ 'inserter', 'transform' ], example: { attributes: { - label: 'Next post', + label: __( 'Next post' ), arrow: 'arrow', }, }, @@ -33,7 +33,7 @@ const variations = [ scope: [ 'inserter', 'transform' ], example: { attributes: { - label: 'Previous post', + label: __( 'Previous post' ), arrow: 'arrow', }, }, diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 6e1f58155590f..d379a46d3142f 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 7b426b0f3d37a..0000000000000 --- 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 806aadc77470e..e6896f2db024a 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/post-title/block.json b/packages/block-library/src/post-title/block.json index ecb5053d6cd39..5587d71b148d0 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -20,16 +20,19 @@ }, "isLink": { "type": "boolean", - "default": false + "default": false, + "role": "content" }, "rel": { "type": "string", "attribute": "rel", - "default": "" + "default": "", + "role": "content" }, "linkTarget": { "type": "string", - "default": "_self" + "default": "_self", + "role": "content" } }, "example": { diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json index c7d3ff500e0f4..c2b7224aa40b1 100644 --- a/packages/block-library/src/query-no-results/block.json +++ b/packages/block-library/src/query-no-results/block.json @@ -8,16 +8,6 @@ "ancestor": [ "core/query" ], "textdomain": "default", "usesContext": [ "queryId", "query" ], - "example": { - "innerBlocks": [ - { - "name": "core/paragraph", - "attributes": { - "content": "No posts were found." - } - } - ] - }, "supports": { "align": true, "reusable": false, diff --git a/packages/block-library/src/query-no-results/index.js b/packages/block-library/src/query-no-results/index.js index 1c56638cdfdba..fab5993148470 100644 --- a/packages/block-library/src/query-no-results/index.js +++ b/packages/block-library/src/query-no-results/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { loop as icon } from '@wordpress/icons'; /** @@ -18,6 +19,16 @@ export const settings = { icon, edit, save, + example: { + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { + content: __( 'No posts were found.' ), + }, + }, + ], + }, }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/query-total/block.json b/packages/block-library/src/query-total/block.json index 02dbbbbb00f74..f6449fbd8ad4b 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 4824021ae99b0..d91a199071572 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 c78d0498f634f..ff2ac486727b9 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 0000000000000..c6a2bc131cfaf --- /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 497cd77f429e6..f982f35151b4b 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/search/edit.js b/packages/block-library/src/search/edit.js index f193c04e2493a..b4ac37220c816 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -34,7 +34,7 @@ import { } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { Icon, search } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; /** @@ -470,7 +470,11 @@ export default function SearchEdit( { ); } ) } diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json index 3bdbdc1b809ab..1f5b3a5525e3e 100644 --- a/packages/block-library/src/site-logo/block.json +++ b/packages/block-library/src/site-logo/block.json @@ -12,11 +12,13 @@ }, "isLink": { "type": "boolean", - "default": true + "default": true, + "role": "content" }, "linkTarget": { "type": "string", - "default": "_self" + "default": "_self", + "role": "content" }, "shouldSyncIcon": { "type": "boolean" diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index c75b1bc229beb..8edf6b945f9ce 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -20,11 +20,13 @@ }, "isLink": { "type": "boolean", - "default": true + "default": true, + "role": "content" }, "linkTarget": { "type": "string", - "default": "_self" + "default": "_self", + "role": "content" } }, "example": { diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js index 44b29173e06b0..0e3e96bd87cb3 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 > initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json index 11dd5b5f323e3..2f0ea753f6f8d 100644 --- a/packages/block-library/src/table/block.json +++ b/packages/block-library/src/table/block.json @@ -195,11 +195,14 @@ "width": true } }, - "__experimentalSelector": ".wp-block-table > 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 9394bfaf5c614..4f85f929b07cf 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 32221919c7ea2..95ecab25f9598 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 0000000000000..cde95f974d8e6 --- /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 2a2cb1653d428..a8423ee4a2709 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/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md index a0e82f4d19b25..856ea6eb95065 100644 --- a/packages/block-serialization-default-parser/CHANGELOG.md +++ b/packages/block-serialization-default-parser/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.15.0 (2025-01-02) + ## 5.14.0 (2024-12-11) ## 5.13.0 (2024-11-27) diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json index 7bbd52414f91e..82f0125fc8584 100644 --- a/packages/block-serialization-default-parser/package.json +++ b/packages/block-serialization-default-parser/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-serialization-default-parser", - "version": "5.14.0", + "version": "5.15.0", "description": "Block serialization specification parser for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/block-serialization-default-parser/tsconfig.json b/packages/block-serialization-default-parser/tsconfig.json index 6e33d8ff82d47..7ff060ab6ce10 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/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md index 52719d1172dd7..8cbdadc118ebe 100644 --- a/packages/block-serialization-spec-parser/CHANGELOG.md +++ b/packages/block-serialization-spec-parser/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 5.15.0 (2025-01-02) + ## 5.14.0 (2024-12-11) ## 5.13.0 (2024-11-27) diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json index 84d5797857082..3f9d5bfff4983 100644 --- a/packages/block-serialization-spec-parser/package.json +++ b/packages/block-serialization-spec-parser/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/block-serialization-spec-parser", - "version": "5.14.0", + "version": "5.15.0", "description": "Block serialization specification parser for WordPress posts.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md index 2e5aac914e578..066a68341b2a7 100644 --- a/packages/blocks/CHANGELOG.md +++ b/packages/blocks/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 14.4.0 (2025-01-02) + ## 14.3.0 (2024-12-11) ## 14.2.0 (2024-11-27) diff --git a/packages/blocks/package.json b/packages/blocks/package.json index e94bb60f5aa34..4f02e328d43bf 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/blocks", - "version": "14.3.0", + "version": "14.4.1", "description": "Block API for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -31,21 +31,21 @@ ], "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/autop": "*", - "@wordpress/blob": "*", - "@wordpress/block-serialization-default-parser": "*", - "@wordpress/data": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/shortcode": "*", - "@wordpress/warning": "*", + "@wordpress/autop": "file:../autop", + "@wordpress/blob": "file:../blob", + "@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser", + "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/shortcode": "file:../shortcode", + "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "colord": "^2.7.0", "fast-deep-equal": "^3.1.3", diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index aaf6558c47bad..620dfcbb8599c 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -58,12 +58,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, borderColor: { value: [ 'border', 'color' ], - support: [ 'border', 'color' ], + support: [ '__experimentalBorder', 'color' ], useEngine: true, }, borderRadius: { value: [ 'border', 'radius' ], - support: [ 'border', 'radius' ], + support: [ '__experimentalBorder', 'radius' ], properties: { borderTopLeftRadius: 'topLeft', borderTopRightRadius: 'topRight', @@ -74,72 +74,72 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, borderStyle: { value: [ 'border', 'style' ], - support: [ 'border', 'style' ], + support: [ '__experimentalBorder', 'style' ], useEngine: true, }, borderWidth: { value: [ 'border', 'width' ], - support: [ 'border', 'width' ], + support: [ '__experimentalBorder', 'width' ], useEngine: true, }, borderTopColor: { value: [ 'border', 'top', 'color' ], - support: [ 'border', 'color' ], + support: [ '__experimentalBorder', 'color' ], useEngine: true, }, borderTopStyle: { value: [ 'border', 'top', 'style' ], - support: [ 'border', 'style' ], + support: [ '__experimentalBorder', 'style' ], useEngine: true, }, borderTopWidth: { value: [ 'border', 'top', 'width' ], - support: [ 'border', 'width' ], + support: [ '__experimentalBorder', 'width' ], useEngine: true, }, borderRightColor: { value: [ 'border', 'right', 'color' ], - support: [ 'border', 'color' ], + support: [ '__experimentalBorder', 'color' ], useEngine: true, }, borderRightStyle: { value: [ 'border', 'right', 'style' ], - support: [ 'border', 'style' ], + support: [ '__experimentalBorder', 'style' ], useEngine: true, }, borderRightWidth: { value: [ 'border', 'right', 'width' ], - support: [ 'border', 'width' ], + support: [ '__experimentalBorder', 'width' ], useEngine: true, }, borderBottomColor: { value: [ 'border', 'bottom', 'color' ], - support: [ 'border', 'color' ], + support: [ '__experimentalBorder', 'color' ], useEngine: true, }, borderBottomStyle: { value: [ 'border', 'bottom', 'style' ], - support: [ 'border', 'style' ], + support: [ '__experimentalBorder', 'style' ], useEngine: true, }, borderBottomWidth: { value: [ 'border', 'bottom', 'width' ], - support: [ 'border', 'width' ], + support: [ '__experimentalBorder', 'width' ], useEngine: true, }, borderLeftColor: { value: [ 'border', 'left', 'color' ], - support: [ 'border', 'color' ], + support: [ '__experimentalBorder', 'color' ], useEngine: true, }, borderLeftStyle: { value: [ 'border', 'left', 'style' ], - support: [ 'border', 'style' ], + support: [ '__experimentalBorder', 'style' ], useEngine: true, }, borderLeftWidth: { value: [ 'border', 'left', 'width' ], - support: [ 'border', 'width' ], + support: [ '__experimentalBorder', 'width' ], useEngine: true, }, color: { @@ -183,7 +183,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, fontFamily: { value: [ 'typography', 'fontFamily' ], - support: [ 'typography', 'fontFamily' ], + support: [ 'typography', '__experimentalFontFamily' ], useEngine: true, }, fontSize: { @@ -193,12 +193,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, fontStyle: { value: [ 'typography', 'fontStyle' ], - support: [ 'typography', 'fontStyle' ], + support: [ 'typography', '__experimentalFontStyle' ], useEngine: true, }, fontWeight: { value: [ 'typography', 'fontWeight' ], - support: [ 'typography', 'fontWeight' ], + support: [ 'typography', '__experimentalFontWeight' ], useEngine: true, }, lineHeight: { @@ -240,17 +240,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, textDecoration: { value: [ 'typography', 'textDecoration' ], - support: [ 'typography', 'textDecoration' ], + support: [ 'typography', '__experimentalTextDecoration' ], useEngine: true, }, textTransform: { value: [ 'typography', 'textTransform' ], - support: [ 'typography', 'textTransform' ], + support: [ 'typography', '__experimentalTextTransform' ], useEngine: true, }, letterSpacing: { value: [ 'typography', 'letterSpacing' ], - support: [ 'typography', 'letterSpacing' ], + support: [ 'typography', '__experimentalLetterSpacing' ], useEngine: true, }, writingMode: { @@ -297,23 +297,3 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = { 'typography.fontSizes': true, 'spacing.spacingSizes': true, }; - -export const EXPERIMENTAL_SUPPORTS_MAP = { - __experimentalBorder: 'border', -}; - -export const COMMON_EXPERIMENTAL_PROPERTIES = { - __experimentalDefaultControls: 'defaultControls', - __experimentalSkipSerialization: 'skipSerialization', -}; - -export const EXPERIMENTAL_SUPPORT_PROPERTIES = { - typography: { - __experimentalFontFamily: 'fontFamily', - __experimentalFontStyle: 'fontStyle', - __experimentalFontWeight: 'fontWeight', - __experimentalLetterSpacing: 'letterSpacing', - __experimentalTextDecoration: 'textDecoration', - __experimentalTextTransform: 'textTransform', - }, -}; diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js index 25bf64ca65dc9..5eacf96fb1e5b 100644 --- a/packages/blocks/src/api/factory.js +++ b/packages/blocks/src/api/factory.js @@ -17,6 +17,7 @@ import { getGroupingBlockName, } from './registration'; import { + isBlockRegistered, normalizeBlockType, __experimentalSanitizeBlockAttributes, } from './utils'; @@ -31,6 +32,14 @@ import { * @return {Object} Block object. */ export function createBlock( name, attributes = {}, innerBlocks = [] ) { + if ( ! isBlockRegistered( name ) ) { + return createBlock( 'core/missing', { + originalName: name, + originalContent: '', + originalUndelimitedContent: '', + } ); + } + const sanitizedAttributes = __experimentalSanitizeBlockAttributes( name, attributes @@ -94,15 +103,22 @@ export function __experimentalCloneSanitizedBlock( mergeAttributes = {}, newInnerBlocks ) { + const { name } = block; + + if ( ! isBlockRegistered( name ) ) { + return createBlock( 'core/missing', { + originalName: name, + originalContent: '', + originalUndelimitedContent: '', + } ); + } + const clientId = uuid(); - const sanitizedAttributes = __experimentalSanitizeBlockAttributes( - block.name, - { - ...block.attributes, - ...mergeAttributes, - } - ); + const sanitizedAttributes = __experimentalSanitizeBlockAttributes( name, { + ...block.attributes, + ...mergeAttributes, + } ); return { ...block, @@ -583,20 +599,11 @@ export function switchToBlockType( blocks, name ) { * * @return {Object} block. */ -export const getBlockFromExample = ( name, example ) => { - try { - return createBlock( - name, - example.attributes, - ( example.innerBlocks ?? [] ).map( ( innerBlock ) => - getBlockFromExample( innerBlock.name, innerBlock ) - ) - ); - } catch { - return createBlock( 'core/missing', { - originalName: name, - originalContent: '', - originalUndelimitedContent: '', - } ); - } -}; +export const getBlockFromExample = ( name, example ) => + createBlock( + name, + example.attributes, + ( example.innerBlocks ?? [] ).map( ( innerBlock ) => + getBlockFromExample( innerBlock.name, innerBlock ) + ) + ); diff --git a/packages/blocks/src/api/templates.js b/packages/blocks/src/api/templates.js index 71231121362a4..6f7e13f27ebe8 100644 --- a/packages/blocks/src/api/templates.js +++ b/packages/blocks/src/api/templates.js @@ -109,23 +109,12 @@ export function synchronizeBlocksWithTemplate( blocks = [], template ) { attributes ); - let [ blockName, blockAttributes ] = + const [ blockName, blockAttributes ] = convertLegacyBlockNameAndAttributes( name, normalizedAttributes ); - // If a Block is undefined at this point, use the core/missing block as - // a placeholder for a better user experience. - if ( undefined === getBlockType( blockName ) ) { - blockAttributes = { - originalName: name, - originalContent: '', - originalUndelimitedContent: '', - }; - blockName = 'core/missing'; - } - return createBlock( blockName, blockAttributes, diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js index 548bbb27da388..b1906b65b4208 100644 --- a/packages/blocks/src/api/test/utils.js +++ b/packages/blocks/src/api/test/utils.js @@ -12,6 +12,7 @@ import { isUnmodifiedDefaultBlock, getAccessibleBlockLabel, getBlockLabel, + isBlockRegistered, __experimentalSanitizeBlockAttributes, getBlockAttributesNamesByRole, isContentBlock, @@ -213,6 +214,20 @@ describe( 'getAccessibleBlockLabel', () => { } ); } ); +describe( 'isBlockRegistered', () => { + it( 'returns true if the block is registered', () => { + registerBlockType( 'core/test-block', { title: 'Test block' } ); + expect( isBlockRegistered( 'core/test-block' ) ).toBe( true ); + unregisterBlockType( 'core/test-block' ); + } ); + + it( 'returns false if the block is not registered', () => { + expect( isBlockRegistered( 'core/not-registered-test-block' ) ).toBe( + false + ); + } ); +} ); + describe( 'sanitizeBlockAttributes', () => { afterEach( () => { getBlockTypes().forEach( ( block ) => { diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js index 1a21503649655..ad94d9d5c9e0c 100644 --- a/packages/blocks/src/api/utils.js +++ b/packages/blocks/src/api/utils.js @@ -266,6 +266,17 @@ export function getDefault( attributeSchema ) { } } +/** + * Check if a block is registered. + * + * @param {string} name The block's name. + * + * @return {boolean} Whether the block is registered. + */ +export function isBlockRegistered( name ) { + return getBlockType( name ) !== undefined; +} + /** * Ensure attributes contains only values defined by block type, and merge * default values for missing attributes. @@ -370,9 +381,21 @@ export const __experimentalGetBlockAttributesNamesByRole = ( ...args ) => { return getBlockAttributesNamesByRole( ...args ); }; +/** + * Checks if a block is a content block by examining its attributes. + * A block is considered a content block if it has at least one attribute + * with a role of 'content'. + * + * @param {string} name The name of the block to check. + * @return {boolean} Whether the block is a content block. + */ export function isContentBlock( name ) { const attributes = getBlockType( name )?.attributes; + if ( ! attributes ) { + return false; + } + return !! Object.keys( attributes )?.some( ( attributeKey ) => { const attribute = attributes[ attributeKey ]; return ( diff --git a/packages/blocks/src/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js index 0ca28a3c3e207..bc7b1a0e10e77 100644 --- a/packages/blocks/src/store/process-block-type.js +++ b/packages/blocks/src/store/process-block-type.js @@ -15,13 +15,7 @@ import warning from '@wordpress/warning'; * Internal dependencies */ import { isValidIcon, normalizeIconObject, omit } from '../api/utils'; -import { - BLOCK_ICON_DEFAULT, - DEPRECATED_ENTRY_KEYS, - EXPERIMENTAL_SUPPORTS_MAP, - COMMON_EXPERIMENTAL_PROPERTIES, - EXPERIMENTAL_SUPPORT_PROPERTIES, -} from '../api/constants'; +import { BLOCK_ICON_DEFAULT, DEPRECATED_ENTRY_KEYS } from '../api/constants'; /** @typedef {import('../api/registration').WPBlockType} WPBlockType */ @@ -68,155 +62,6 @@ function mergeBlockVariations( return result; } -/** - * Stabilizes a block support configuration by converting experimental properties - * to their stable equivalents. - * - * @param {Object} unstableConfig The support configuration to stabilize. - * @param {string} stableSupportKey The stable support key for looking up properties. - * @return {Object} The stabilized support configuration. - */ -function stabilizeSupportConfig( unstableConfig, stableSupportKey ) { - const stableConfig = {}; - for ( const [ key, value ] of Object.entries( unstableConfig ) ) { - // Get stable key from support-specific map, common properties map, or keep original. - const stableKey = - EXPERIMENTAL_SUPPORT_PROPERTIES[ stableSupportKey ]?.[ key ] ?? - COMMON_EXPERIMENTAL_PROPERTIES[ key ] ?? - key; - - stableConfig[ stableKey ] = value; - - /* - * The `__experimentalSkipSerialization` key needs to be kept until - * WP 6.8 becomes the minimum supported version. This is due to the - * core `wp_should_skip_block_supports_serialization` function only - * checking for `__experimentalSkipSerialization` in earlier versions. - */ - if ( - key === '__experimentalSkipSerialization' || - key === 'skipSerialization' - ) { - stableConfig.__experimentalSkipSerialization = value; - } - } - return stableConfig; -} - -/** - * Stabilizes experimental block supports by converting experimental keys and properties - * to their stable equivalents. - * - * @param {Object|undefined} rawSupports The block supports configuration to stabilize. - * @return {Object|undefined} The stabilized block supports configuration. - */ -function stabilizeSupports( rawSupports ) { - if ( ! rawSupports ) { - return rawSupports; - } - - /* - * Create a new object to avoid mutating the original. This ensures that - * custom block plugins that rely on immutable supports are not affected. - * See: https://github.com/WordPress/gutenberg/pull/66849#issuecomment-2463614281 - */ - const newSupports = {}; - const done = {}; - - for ( const [ support, config ] of Object.entries( rawSupports ) ) { - /* - * If this support config has already been stabilized, skip it. - * A stable support key occurring after an experimental key, gets - * stabilized then so that the two configs can be merged effectively. - */ - if ( done[ support ] ) { - continue; - } - - const stableSupportKey = - EXPERIMENTAL_SUPPORTS_MAP[ support ] ?? support; - - /* - * Use the support's config as is when it's not in need of stabilization. - * A support does not need stabilization if: - * - The support key doesn't need stabilization AND - * - Either: - * - The config isn't an object, so can't have experimental properties OR - * - The config is an object but has no experimental properties to stabilize. - */ - if ( - support === stableSupportKey && - ( ! isPlainObject( config ) || - ( ! EXPERIMENTAL_SUPPORT_PROPERTIES[ stableSupportKey ] && - Object.keys( config ).every( - ( key ) => ! COMMON_EXPERIMENTAL_PROPERTIES[ key ] - ) ) ) - ) { - newSupports[ support ] = config; - continue; - } - - // Stabilize the config value. - const stableConfig = isPlainObject( config ) - ? stabilizeSupportConfig( config, stableSupportKey ) - : config; - - /* - * If a plugin overrides the support config with the `blocks.registerBlockType` - * filter, both experimental and stable configs may be present. In that case, - * use the order keys are defined in to determine the final value. - * - If config is an array, merge the arrays in their order of definition. - * - If config is not an array, use the value defined last. - * - * The reason for preferring the last defined key is that after filters - * are applied, the last inserted key is likely the most up-to-date value. - * We cannot determine with certainty which value was "last modified" so - * the insertion order is the best guess. The extreme edge case of multiple - * filters tweaking the same support property will become less over time as - * extenders migrate existing blocks and plugins to stable keys. - */ - if ( - support !== stableSupportKey && - Object.hasOwn( rawSupports, stableSupportKey ) - ) { - const keyPositions = Object.keys( rawSupports ).reduce( - ( acc, key, index ) => { - acc[ key ] = index; - return acc; - }, - {} - ); - const experimentalFirst = - ( keyPositions[ support ] ?? Number.MAX_VALUE ) < - ( keyPositions[ stableSupportKey ] ?? Number.MAX_VALUE ); - - if ( isPlainObject( rawSupports[ stableSupportKey ] ) ) { - /* - * To merge the alternative support config effectively, it also needs to be - * stabilized before merging to keep stabilized and experimental flags in sync. - */ - rawSupports[ stableSupportKey ] = stabilizeSupportConfig( - rawSupports[ stableSupportKey ], - stableSupportKey - ); - newSupports[ stableSupportKey ] = experimentalFirst - ? { ...stableConfig, ...rawSupports[ stableSupportKey ] } - : { ...rawSupports[ stableSupportKey ], ...stableConfig }; - // Prevents reprocessing this support as it was merged above. - done[ stableSupportKey ] = true; - } else { - newSupports[ stableSupportKey ] = experimentalFirst - ? rawSupports[ stableSupportKey ] - : stableConfig; - } - } else { - newSupports[ stableSupportKey ] = stableConfig; - } - } - - return newSupports; -} - /** * Takes the unprocessed block type settings, merges them with block type metadata * and applies all the existing filters for the registered block type. @@ -257,9 +102,6 @@ export const processBlockType = ), }; - // Stabilize any experimental supports before applying filters. - blockType.supports = stabilizeSupports( blockType.supports ); - const settings = applyFilters( 'blocks.registerBlockType', blockType, @@ -267,10 +109,6 @@ export const processBlockType = null ); - // Re-stabilize any experimental supports after applying filters. - // This ensures that any supports updated by filters are also stabilized. - blockType.supports = stabilizeSupports( blockType.supports ); - if ( settings.description && typeof settings.description !== 'string' @@ -281,40 +119,29 @@ export const processBlockType = } if ( settings.deprecated ) { - settings.deprecated = settings.deprecated.map( ( deprecation ) => { - // Stabilize any experimental supports before applying filters. - let filteredDeprecation = { - ...deprecation, - supports: stabilizeSupports( deprecation.supports ), - }; - - filteredDeprecation = // Only keep valid deprecation keys. - applyFilters( - 'blocks.registerBlockType', - // Merge deprecation keys with pre-filter settings - // so that filters that depend on specific keys being - // present don't fail. - { - // Omit deprecation keys here so that deprecations - // can opt out of specific keys like "supports". - ...omit( blockType, DEPRECATED_ENTRY_KEYS ), - ...filteredDeprecation, - }, - blockType.name, - filteredDeprecation - ); - // Re-stabilize any experimental supports after applying filters. - // This ensures that any supports updated by filters are also stabilized. - filteredDeprecation.supports = stabilizeSupports( - filteredDeprecation.supports - ); - - return Object.fromEntries( - Object.entries( filteredDeprecation ).filter( ( [ key ] ) => + settings.deprecated = settings.deprecated.map( ( deprecation ) => + Object.fromEntries( + Object.entries( + // Only keep valid deprecation keys. + applyFilters( + 'blocks.registerBlockType', + // Merge deprecation keys with pre-filter settings + // so that filters that depend on specific keys being + // present don't fail. + { + // Omit deprecation keys here so that deprecations + // can opt out of specific keys like "supports". + ...omit( blockType, DEPRECATED_ENTRY_KEYS ), + ...deprecation, + }, + blockType.name, + deprecation + ) + ).filter( ( [ key ] ) => DEPRECATED_ENTRY_KEYS.includes( key ) ) - ); - } ); + ) + ); } if ( ! isPlainObject( settings ) ) { diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js index 2c173b96b0bcb..ada2bd7c8cbcf 100644 --- a/packages/blocks/src/store/test/private-selectors.js +++ b/packages/blocks/src/store/test/private-selectors.js @@ -127,12 +127,12 @@ describe( 'private selectors', () => { name: 'core/example-block', supports: { typography: { - fontFamily: true, - fontStyle: true, - fontWeight: true, - textDecoration: true, - textTransform: true, - letterSpacing: true, + __experimentalFontFamily: true, + __experimentalFontStyle: true, + __experimentalFontWeight: true, + __experimentalTextDecoration: true, + __experimentalTextTransform: true, + __experimentalLetterSpacing: true, fontSize: true, lineHeight: true, }, diff --git a/packages/blocks/src/store/test/process-block-type.js b/packages/blocks/src/store/test/process-block-type.js deleted file mode 100644 index 82b2c1ad3080d..0000000000000 --- a/packages/blocks/src/store/test/process-block-type.js +++ /dev/null @@ -1,490 +0,0 @@ -/** - * WordPress dependencies - */ -import { addFilter, removeFilter } from '@wordpress/hooks'; - -/** - * Internal dependencies - */ -import { processBlockType } from '../process-block-type'; - -describe( 'processBlockType', () => { - const baseBlockSettings = { - apiVersion: 3, - attributes: {}, - edit: () => null, - name: 'test/block', - save: () => null, - title: 'Test Block', - }; - - const select = { - getBootstrappedBlockType: () => null, - }; - - afterEach( () => { - removeFilter( 'blocks.registerBlockType', 'test/filterSupports' ); - } ); - - it( 'should stabilize experimental block supports', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - typography: { - fontSize: true, - lineHeight: true, - __experimentalFontFamily: true, - __experimentalFontStyle: true, - __experimentalFontWeight: true, - __experimentalLetterSpacing: true, - __experimentalTextTransform: true, - __experimentalTextDecoration: true, - __experimentalWritingMode: true, - __experimentalDefaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - __experimentalBorder: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - }, - }; - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toMatchObject( { - typography: { - fontSize: true, - lineHeight: true, - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - defaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - border: { - color: true, - radius: true, - style: true, - width: true, - defaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - } ); - } ); - - it( 'should reapply transformations after supports are filtered', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - typography: { - fontSize: true, - lineHeight: true, - __experimentalFontFamily: true, - __experimentalFontStyle: true, - __experimentalFontWeight: true, - __experimentalLetterSpacing: true, - __experimentalTextTransform: true, - __experimentalTextDecoration: true, - __experimentalWritingMode: true, - __experimentalDefaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - __experimentalBorder: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - }, - }; - - addFilter( - 'blocks.registerBlockType', - 'test/filterSupports', - ( settings, name ) => { - if ( name === 'test/block' && settings.supports.typography ) { - settings.supports.typography.__experimentalFontFamily = false; - settings.supports.typography.__experimentalFontStyle = false; - settings.supports.typography.__experimentalFontWeight = false; - if ( ! settings.supports.__experimentalBorder ) { - settings.supports.__experimentalBorder = {}; - } - settings.supports.__experimentalBorder.radius = false; - } - return settings; - } - ); - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toMatchObject( { - typography: { - fontSize: true, - lineHeight: true, - fontFamily: false, - fontStyle: false, - fontWeight: false, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - defaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - border: { - color: true, - radius: false, - style: true, - width: true, - defaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - } ); - } ); - - describe( 'block deprecations', () => { - const deprecatedBlockSettings = { - ...baseBlockSettings, - supports: { - typography: { - fontSize: true, - lineHeight: true, - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - __experimentalDefaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - border: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - }, - deprecated: [ - { - supports: { - typography: { - __experimentalFontFamily: true, - __experimentalFontStyle: true, - __experimentalFontWeight: true, - __experimentalLetterSpacing: true, - __experimentalTextTransform: true, - __experimentalTextDecoration: true, - __experimentalWritingMode: true, - }, - __experimentalBorder: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - }, - }, - ], - }; - - beforeEach( () => { - // Freeze the deprecated block object and its supports so that the original is not mutated. - Object.freeze( deprecatedBlockSettings.deprecated[ 0 ] ); - Object.freeze( deprecatedBlockSettings.deprecated[ 0 ].supports ); - } ); - - it( 'should stabilize experimental supports', () => { - const processedBlockType = processBlockType( - 'test/block', - deprecatedBlockSettings - )( { select } ); - - expect( processedBlockType.deprecated[ 0 ].supports ).toMatchObject( - { - typography: { - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - }, - border: { - color: true, - radius: true, - style: true, - width: true, - defaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - } - ); - } ); - - it( 'should reapply transformations after supports are filtered', () => { - addFilter( - 'blocks.registerBlockType', - 'test/filterSupports', - ( settings, name ) => { - if ( - name === 'test/block' && - settings.supports.typography - ) { - settings.supports.typography.__experimentalFontFamily = false; - settings.supports.typography.__experimentalFontStyle = false; - settings.supports.typography.__experimentalFontWeight = false; - settings.supports.__experimentalBorder = { - radius: false, - }; - } - return settings; - } - ); - - const processedBlockType = processBlockType( - 'test/block', - deprecatedBlockSettings - )( { select } ); - - expect( processedBlockType.deprecated[ 0 ].supports ).toMatchObject( - { - typography: { - fontFamily: false, - fontStyle: false, - fontWeight: false, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - }, - border: { - color: true, - radius: false, - style: true, - width: true, - defaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - } - ); - } ); - } ); - - it( 'should stabilize common experimental properties across all supports', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - typography: { - fontSize: true, - __experimentalDefaultControls: { - fontSize: true, - }, - __experimentalSkipSerialization: true, - }, - spacing: { - padding: true, - __experimentalDefaultControls: { - padding: true, - }, - __experimentalSkipSerialization: true, - }, - }, - }; - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toMatchObject( { - typography: { - fontSize: true, - defaultControls: { - fontSize: true, - }, - skipSerialization: true, - __experimentalSkipSerialization: true, - }, - spacing: { - padding: true, - defaultControls: { - padding: true, - }, - skipSerialization: true, - __experimentalSkipSerialization: true, - }, - } ); - } ); - - it( 'should merge experimental and stable keys in order of definition', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - __experimentalBorder: { - color: true, - radius: false, - }, - border: { - color: false, - style: true, - }, - }, - }; - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toMatchObject( { - border: { - color: false, - radius: false, - style: true, - }, - } ); - - const reversedSettings = { - ...baseBlockSettings, - supports: { - border: { - color: false, - style: true, - }, - __experimentalBorder: { - color: true, - radius: false, - }, - }, - }; - - const reversedProcessedType = processBlockType( - 'test/block', - reversedSettings - )( { select } ); - - expect( reversedProcessedType.supports ).toMatchObject( { - border: { - color: true, - radius: false, - style: true, - }, - } ); - } ); - - it( 'should handle non-object config values', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - __experimentalBorder: true, - border: false, - }, - }; - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toMatchObject( { - border: false, - } ); - } ); - - it( 'should not modify supports that do not need stabilization', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - align: true, - spacing: { - padding: true, - margin: true, - }, - }, - }; - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toMatchObject( { - align: true, - spacing: { - padding: true, - margin: true, - }, - } ); - } ); -} ); diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md index 770dd74df0fcc..4660344c056ec 100644 --- a/packages/browserslist-config/CHANGELOG.md +++ b/packages/browserslist-config/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 6.15.0 (2025-01-02) + ## 6.14.0 (2024-12-11) ## 6.13.0 (2024-11-27) diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json index 2d9520b2adb45..0b0a3799c5017 100644 --- a/packages/browserslist-config/package.json +++ b/packages/browserslist-config/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/browserslist-config", - "version": "6.14.0", + "version": "6.15.0", "description": "WordPress Browserslist shared configuration.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md index 4bc86b8f433f2..2c6f05046402c 100644 --- a/packages/commands/CHANGELOG.md +++ b/packages/commands/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +## 1.15.0 (2025-01-02) + ## 1.14.0 (2024-12-11) ## 1.13.0 (2024-11-27) diff --git a/packages/commands/package.json b/packages/commands/package.json index 9f7d1ea1e8931..0316fc525b0d8 100644 --- a/packages/commands/package.json +++ b/packages/commands/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/commands", - "version": "1.14.0", + "version": "1.15.1", "description": "Handles the commands menu.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -29,13 +29,13 @@ "wpScript": true, "dependencies": { "@babel/runtime": "7.25.7", - "@wordpress/components": "*", - "@wordpress/data": "*", - "@wordpress/element": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/keyboard-shortcuts": "*", - "@wordpress/private-apis": "*", + "@wordpress/components": "file:../components", + "@wordpress/data": "file:../data", + "@wordpress/element": "file:../element", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", + "@wordpress/private-apis": "file:../private-apis", "clsx": "^2.1.1", "cmdk": "^1.0.0" }, diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 836b245b40f04..28aac09d1fc16 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,10 +2,16 @@ ## Unreleased +## 29.1.0 (2025-01-02) + ### Enhancements - `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)). +- `Heading`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)). +- `Text`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)). ### Deprecations @@ -19,11 +25,14 @@ ### 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 - Add new `Badge` component ([#66555](https://github.com/WordPress/gutenberg/pull/66555)). - `Menu`: refactor to more granular sub-components ([#67422](https://github.com/WordPress/gutenberg/pull/67422)). +- `Badge`: Support text truncation ([#68107](https://github.com/WordPress/gutenberg/pull/68107)). ### Internal diff --git a/packages/components/package.json b/packages/components/package.json index 79df8e92d84b6..eef3ee7435e8d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/components", - "version": "29.0.0", + "version": "29.1.1", "description": "UI components for WordPress.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", @@ -44,23 +44,23 @@ "@types/gradient-parser": "0.1.3", "@types/highlight-words-core": "1.2.1", "@use-gesture/react": "^10.3.1", - "@wordpress/a11y": "*", - "@wordpress/compose": "*", - "@wordpress/date": "*", - "@wordpress/deprecated": "*", - "@wordpress/dom": "*", - "@wordpress/element": "*", - "@wordpress/escape-html": "*", - "@wordpress/hooks": "*", - "@wordpress/html-entities": "*", - "@wordpress/i18n": "*", - "@wordpress/icons": "*", - "@wordpress/is-shallow-equal": "*", - "@wordpress/keycodes": "*", - "@wordpress/primitives": "*", - "@wordpress/private-apis": "*", - "@wordpress/rich-text": "*", - "@wordpress/warning": "*", + "@wordpress/a11y": "file:../a11y", + "@wordpress/compose": "file:../compose", + "@wordpress/date": "file:../date", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/escape-html": "file:../escape-html", + "@wordpress/hooks": "file:../hooks", + "@wordpress/html-entities": "file:../html-entities", + "@wordpress/i18n": "file:../i18n", + "@wordpress/icons": "file:../icons", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keycodes": "file:../keycodes", + "@wordpress/primitives": "file:../primitives", + "@wordpress/private-apis": "file:../private-apis", + "@wordpress/rich-text": "file:../rich-text", + "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "clsx": "^2.1.1", "colord": "^2.7.0", diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md index 267b368454c49..8ba9f6378c185 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 8b98ba813adde..9908282fd9ef9 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 0be531ca6f2df..2100939684a85 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/index.tsx b/packages/components/src/badge/index.tsx index 8a55f3881215f..ee08003c3911d 100644 --- a/packages/components/src/badge/index.tsx +++ b/packages/components/src/badge/index.tsx @@ -56,9 +56,10 @@ function Badge( { icon={ contextBasedIcon() } size={ 16 } fill="currentColor" + className="components-badge__icon" /> ) } - { children } + { children } ); } diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index 7f827d3bfabf5..bbe0bef2a7947 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/badge/styles.scss b/packages/components/src/badge/styles.scss index e1e9cd5312d11..d3f82482cf774 100644 --- a/packages/components/src/badge/styles.scss +++ b/packages/components/src/badge/styles.scss @@ -6,17 +6,18 @@ $badge-colors: ( ); .components-badge { + @include reset; + background-color: color-mix(in srgb, $white 90%, var(--base-color)); color: color-mix(in srgb, $black 50%, var(--base-color)); padding: 0 $grid-unit-10; min-height: $grid-unit-30; + max-width: 100%; border-radius: $radius-small; font-size: $font-size-small; font-weight: 400; - flex-shrink: 0; line-height: $font-line-height-small; - width: fit-content; - display: flex; + display: inline-flex; align-items: center; gap: 2px; @@ -36,3 +37,13 @@ $badge-colors: ( } } } + +.components-badge__icon { + flex-shrink: 0; +} + +.components-badge__content { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} diff --git a/packages/components/src/badge/test/index.tsx b/packages/components/src/badge/test/index.tsx index 47c832eb3c830..114a8f426c7af 100644 --- a/packages/components/src/badge/test/index.tsx +++ b/packages/components/src/badge/test/index.tsx @@ -6,12 +6,17 @@ import { render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import Badge from '..'; +import _Badge from '..'; + +const testid = 'my-badge'; +const Badge = ( props: React.ComponentProps< typeof _Badge > ) => ( + <_Badge data-testid={ testid } { ...props } /> +); describe( 'Badge', () => { it( 'should render correctly with default props', () => { render( Code is Poetry ); - const badge = screen.getByText( 'Code is Poetry' ); + const badge = screen.getByTestId( testid ); expect( badge ).toBeInTheDocument(); expect( badge.tagName ).toBe( 'SPAN' ); expect( badge ).toHaveClass( 'components-badge' ); @@ -19,14 +24,14 @@ describe( 'Badge', () => { it( 'should render as per its intent and contain an icon', () => { render( Code is Poetry ); - const badge = screen.getByText( 'Code is Poetry' ); + const badge = screen.getByTestId( testid ); expect( badge ).toHaveClass( 'components-badge', 'is-error' ); expect( badge ).toHaveClass( 'has-icon' ); } ); it( 'should combine custom className with default class', () => { render( Code is Poetry ); - const badge = screen.getByText( 'Code is Poetry' ); + const badge = screen.getByTestId( testid ); expect( badge ).toHaveClass( 'components-badge' ); expect( badge ).toHaveClass( 'custom-class' ); } ); diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md index 9c8920fbc0689..2a82c19845e47 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 6192cfa47367b..4c0f100065092 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 81fbcad42c1d0..27dff1991d857 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 d63dee9007c2f..c67c795addbf4 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 fd6cc2df3fcde..b1adfd5d9221a 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/drop-zone/stories/index.story.tsx b/packages/components/src/drop-zone/stories/index.story.tsx index 7e2dcbf03c03b..fe0be94e74fe8 100644 --- a/packages/components/src/drop-zone/stories/index.story.tsx +++ b/packages/components/src/drop-zone/stories/index.story.tsx @@ -21,7 +21,13 @@ export default meta; const Template: StoryFn< typeof DropZone > = ( props ) => { return ( -
+
Drop something here
diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index f47ca41b51eb7..b0e33b5aea3a2 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 d281b1ca63927..74e6e36938338 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 652fcbf30ae13..275c46ec5958c 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 d242afe1fdb2f..132595d69c4f7 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 cf863c4b2bb2e..675810948404f 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 29e621f80c1fd..2c9726dbcf541 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/menu/checkbox-item.tsx b/packages/components/src/menu/checkbox-item.tsx index ddb700b43324a..69339387c3add 100644 --- a/packages/components/src/menu/checkbox-item.tsx +++ b/packages/components/src/menu/checkbox-item.tsx @@ -21,7 +21,7 @@ export const MenuCheckboxItem = forwardRef< HTMLDivElement, WordPressComponentProps< MenuCheckboxItemProps, 'div', false > >( function MenuCheckboxItem( - { suffix, children, hideOnClick = false, ...props }, + { suffix, children, disabled = false, hideOnClick = false, ...props }, ref ) { const menuContext = useContext( MenuContext ); @@ -37,6 +37,7 @@ export const MenuCheckboxItem = forwardRef< ref={ ref } { ...props } accessibleWhenDisabled + disabled={ disabled } hideOnClick={ hideOnClick } store={ menuContext.store } > diff --git a/packages/components/src/menu/item.tsx b/packages/components/src/menu/item.tsx index 84ff050bcc223..a716cbcc89654 100644 --- a/packages/components/src/menu/item.tsx +++ b/packages/components/src/menu/item.tsx @@ -15,7 +15,15 @@ export const MenuItem = forwardRef< HTMLDivElement, WordPressComponentProps< MenuItemProps, 'div', false > >( function MenuItem( - { prefix, suffix, children, hideOnClick = true, store, ...props }, + { + prefix, + suffix, + children, + disabled = false, + hideOnClick = true, + store, + ...props + }, ref ) { const menuContext = useContext( MenuContext ); @@ -37,6 +45,7 @@ export const MenuItem = forwardRef< ref={ ref } { ...props } accessibleWhenDisabled + disabled={ disabled } hideOnClick={ hideOnClick } store={ computedStore } > diff --git a/packages/components/src/menu/radio-item.tsx b/packages/components/src/menu/radio-item.tsx index 5534a6b7f3e10..28b3199d7d36b 100644 --- a/packages/components/src/menu/radio-item.tsx +++ b/packages/components/src/menu/radio-item.tsx @@ -28,7 +28,7 @@ export const MenuRadioItem = forwardRef< HTMLDivElement, WordPressComponentProps< MenuRadioItemProps, 'div', false > >( function MenuRadioItem( - { suffix, children, hideOnClick = false, ...props }, + { suffix, children, disabled = false, hideOnClick = false, ...props }, ref ) { const menuContext = useContext( MenuContext ); @@ -44,6 +44,7 @@ export const MenuRadioItem = forwardRef< ref={ ref } { ...props } accessibleWhenDisabled + disabled={ disabled } hideOnClick={ hideOnClick } store={ menuContext.store } > diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index dcd890370a1e0..37ebb6f905dc8 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { css } from '@emotion/react'; /** @@ -67,315 +67,279 @@ const meta: Meta< typeof Menu > = { }; export default meta; -export const Default: StoryFn< typeof Menu > = ( props: MenuProps ) => ( - - } - > - Open menu - - - - Label - - - Label - Help text - - - Label - - The menu item help text is automatically truncated when - there are more than two lines of text - - - - Label - - This item doesn't close the menu on click - - - Disabled item - - - Group label - }> - With prefix - - With suffix - } - suffix="⌥⌘T" +export const Default: StoryObj< typeof Menu > = { + args: { + children: ( + <> + + } > - - Disabled with prefix and suffix - - And help text - - - - -); -Default.args = {}; - -export const WithSubmenu: StoryFn< typeof Menu > = ( props: MenuProps ) => ( - - } - > - Open menu - - - Level 1 item - - - - Submenu trigger item with a long label - - + Open menu + - Level 2 item + Label + + + Label + Help text - Level 2 item + Label + + The menu item help text is automatically truncated + when there are more than two lines of text + + + + Label + + This item doesn't close the menu on click + + Disabled item + + + Group label + } + > + With prefix + + With suffix + + } + suffix="⌥⌘T" + > + + Disabled with prefix and suffix + + And help text + + + + + ), + }, +}; + +export const WithSubmenu: StoryObj< typeof Menu > = { + args: { + ...Default.args, + children: ( + <> + + } + > + Open menu + + + Level 1 item - - Submenu trigger + + + Submenu trigger item with a long label + - Level 3 item + Level 2 item - Level 3 item + Level 2 item + + + + Submenu trigger + + + + + + Level 3 item + + + + + Level 3 item + + + + - - - -); -WithSubmenu.args = { - ...Default.args, + + ), + }, }; -export const WithCheckboxes: StoryFn< typeof Menu > = ( props: MenuProps ) => { - const [ isAChecked, setAChecked ] = useState( false ); - const [ isBChecked, setBChecked ] = useState( true ); - const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = useState< - string[] - >( [ 'b' ] ); - - const onMultipleCheckboxesCheckedChange: React.ComponentProps< - typeof Menu.CheckboxItem - >[ 'onChange' ] = ( e ) => { - setMultipleCheckboxesValue( ( prevValues ) => { - if ( prevValues.includes( e.target.value ) ) { - return prevValues.filter( ( val ) => val !== e.target.value ); - } - return [ ...prevValues, e.target.value ]; - } ); - }; +export const WithCheckboxes: StoryObj< typeof Menu > = { + render: function WithCheckboxes( props: MenuProps ) { + const [ isAChecked, setAChecked ] = useState( false ); + const [ isBChecked, setBChecked ] = useState( true ); + const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = + useState< string[] >( [ 'b' ] ); - return ( - - } - > - Open menu - - - - - Single selection, uncontrolled - - - Checkbox item A - - Initially unchecked - - - - Checkbox item B - Initially checked - - - - - - Single selection, controlled - - { - setAChecked( e.target.checked ); - } } - > - Checkbox item A - - Initially unchecked - - - setBChecked( e.target.checked ) } - > - Checkbox item B - Initially checked - - - - - - Multiple selection, uncontrolled - - - Checkbox item A - - Initially unchecked - - - - Checkbox item B - Initially checked - - - - - - Multiple selection, controlled - - - Checkbox item A - - Initially unchecked - - - - Checkbox item B - Initially checked - - - - - ); -}; -WithCheckboxes.args = { - ...Default.args, -}; + const onMultipleCheckboxesCheckedChange: React.ComponentProps< + typeof Menu.CheckboxItem + >[ 'onChange' ] = ( e ) => { + setMultipleCheckboxesValue( ( prevValues ) => { + if ( prevValues.includes( e.target.value ) ) { + return prevValues.filter( + ( val ) => val !== e.target.value + ); + } + return [ ...prevValues, e.target.value ]; + } ); + }; -export const WithRadios: StoryFn< typeof Menu > = ( props: MenuProps ) => { - const [ radioValue, setRadioValue ] = useState( 'two' ); - const onRadioChange: React.ComponentProps< - typeof Menu.RadioItem - >[ 'onChange' ] = ( e ) => setRadioValue( e.target.value ); + return ( + + + } + > + Open menu + + + + + Single selection, uncontrolled + + + Checkbox item A + + Initially unchecked + + + + Checkbox item B + + Initially checked + + + + + + + Single selection, controlled + + { + setAChecked( e.target.checked ); + } } + > + Checkbox item A + + Initially unchecked + + + + setBChecked( e.target.checked ) + } + > + Checkbox item B + + Initially checked + + + + + + + Multiple selection, uncontrolled + + + Checkbox item A + + Initially unchecked + + + + Checkbox item B + + Initially checked + + + + + + + Multiple selection, controlled + + + Checkbox item A + + Initially unchecked + + + + Checkbox item B + + Initially checked + + + + + + ); + }, - return ( - - } - > - Open menu - - - - Uncontrolled - - Radio item 1 - - Initially unchecked - - - - Radio item 2 - Initially checked - - - - - Controlled - - Radio item 1 - - Initially unchecked - - - - Radio item 2 - Initially checked - - - - - ); -}; -WithRadios.args = { - ...Default.args, + args: { + ...Default.args, + }, }; -const modalOnTopOfMenuPopover = css` - && { - z-index: 1000000; - } -`; - -// For more examples with `Modal`, check https://ariakit.org/examples/menu-wordpress-modal -export const WithModals: StoryFn< typeof Menu > = ( props: MenuProps ) => { - const [ isOuterModalOpen, setOuterModalOpen ] = useState( false ); - const [ isInnerModalOpen, setInnerModalOpen ] = useState( false ); - - const cx = useCx(); - const modalOverlayClassName = cx( modalOnTopOfMenuPopover ); +export const WithRadios: StoryObj< typeof Menu > = { + render: function WithRadios( props: MenuProps ) { + const [ radioValue, setRadioValue ] = useState( 'two' ); + const onRadioChange: React.ComponentProps< + typeof Menu.RadioItem + >[ 'onChange' ] = ( e ) => setRadioValue( e.target.value ); - return ( - <> + return ( = ( props: MenuProps ) => { Open menu - setOuterModalOpen( true ) } - hideOnClick={ false } - > - Open outer modal - - setInnerModalOpen( true ) } - hideOnClick={ false } - > - Open inner modal - - { isInnerModalOpen && ( - setInnerModalOpen( false ) } - overlayClassName={ modalOverlayClassName } + + Uncontrolled + + Radio item 1 + + Initially unchecked + + + - Modal's contents - - - ) } + Radio item 2 + + Initially checked + + + + + + Controlled + + Radio item 1 + + Initially unchecked + + + + Radio item 2 + + Initially checked + + + - { isOuterModalOpen && ( - setOuterModalOpen( false ) } - overlayClassName={ modalOverlayClassName } - > - Modal's contents - - - ) } - - ); + ); + }, + + args: { + ...Default.args, + }, }; -WithModals.args = { - ...Default.args, + +const modalOnTopOfMenuPopover = css` + && { + z-index: 1000000; + } +`; + +export const WithModals: StoryObj< typeof Menu > = { + render: function WithModals( props: MenuProps ) { + const [ isOuterModalOpen, setOuterModalOpen ] = useState( false ); + const [ isInnerModalOpen, setInnerModalOpen ] = useState( false ); + + const cx = useCx(); + const modalOverlayClassName = cx( modalOnTopOfMenuPopover ); + + return ( + <> + + + } + > + Open menu + + + setOuterModalOpen( true ) } + hideOnClick={ false } + > + Open outer modal + + setInnerModalOpen( true ) } + hideOnClick={ false } + > + Open inner modal + + { isInnerModalOpen && ( + + setInnerModalOpen( false ) + } + overlayClassName={ modalOverlayClassName } + > + Modal's contents + + + ) } + + + { isOuterModalOpen && ( + setOuterModalOpen( false ) } + overlayClassName={ modalOverlayClassName } + > + Modal's contents + + + ) } + + ); + }, + + args: { + ...Default.args, + }, }; const ExampleSlotFill = createSlotFill( 'Example' ); @@ -478,9 +526,62 @@ const Fill = ( { children }: { children: React.ReactNode } ) => { ); }; -export const WithSlotFill: StoryFn< typeof Menu > = ( props: MenuProps ) => { - return ( - +export const WithSlotFill: StoryObj< typeof Menu > = { + render: ( props: MenuProps ) => { + return ( + + + + } + > + Open menu + + + + Item + + + + + + + + Item from fill + + + + Submenu from fill + + + + + Submenu item from fill + + + + + + + ); + }, + + args: { + ...Default.args, + }, +}; + +const toolbarVariantContextValue = { + Menu: { + variant: 'toolbar', + }, +}; + +export const ToolbarVariant: StoryObj< typeof Menu > = { + render: ( props: MenuProps ) => ( + // TODO: add toolbar + = ( props: MenuProps ) => { - Item + Level 1 item - + + Level 1 item + + + + + Submenu trigger + + + + Level 2 item + + + + + ), - - - Item from fill - - - - Submenu from fill - - - - - Submenu item from fill - - - - - - - ); -}; -WithSlotFill.args = { - ...Default.args, -}; - -const toolbarVariantContextValue = { - Menu: { - variant: 'toolbar', + args: { + ...Default.args, }, }; -export const ToolbarVariant: StoryFn< typeof Menu > = ( props: MenuProps ) => ( - // TODO: add toolbar - - - } - > - Open menu - - - - Level 1 item - - - Level 1 item - - - - - Submenu trigger - - - - Level 2 item - - - - - - -); -ToolbarVariant.args = { - ...Default.args, -}; -export const InsideModal: StoryFn< typeof Menu > = ( props: MenuProps ) => { - const [ isModalOpen, setModalOpen ] = useState( false ); - return ( - <> - - { isModalOpen && ( - setModalOpen( false ) } - title="Menu inside modal" +export const InsideModal: StoryObj< typeof Menu > = { + render: function InsideModal( props: MenuProps ) { + const [ isModalOpen, setModalOpen ] = useState( false ); + return ( + <> + + { isModalOpen && ( + setModalOpen( false ) } + title="Menu inside modal" + > + + + } + > + Open menu + + + - Submenu trigger + Level 1 item - - - + + + + Level 1 item + + + + + - Level 2 item + Submenu trigger - - - - - - - - ) } - - ); -}; -InsideModal.args = { - ...Default.args, -}; -InsideModal.parameters = { - docs: { - source: { type: 'code' }, + + + + + Level 2 item + + + + + + + + + ) } + + ); + }, + + args: { + ...Default.args, + }, + + parameters: { + docs: { + source: { type: 'code' }, + }, }, }; diff --git a/packages/components/src/menu/types.ts b/packages/components/src/menu/types.ts index f58b5bcc89b95..f9bb0782529d1 100644 --- a/packages/components/src/menu/types.ts +++ b/packages/components/src/menu/types.ts @@ -2,7 +2,6 @@ * External dependencies */ import type * as Ariakit from '@ariakit/react'; -import type { Placement } from '@floating-ui/react-dom'; export interface MenuContext { /** @@ -17,77 +16,93 @@ export interface MenuContext { export interface MenuProps { /** - * The contents of the menu (ie. one or more menu items). + * The elements, which should include one instance of the `Menu.TriggerButton` + * component and one instance of the `Menu.Popover` component. */ - children?: React.ReactNode; + children?: Ariakit.MenuProviderProps[ 'children' ]; /** - * The open state of the menu popover when it is initially rendered. Use when - * not wanting to control its open state. + * Whether the menu popover and its contents should be visible by default. + * + * Note: this prop will be overridden by the `open` prop if it is + * provided (meaning the component will be used in "controlled" mode). * * @default false */ - defaultOpen?: boolean; + defaultOpen?: Ariakit.MenuProviderProps[ 'defaultOpen' ]; /** - * The controlled open state of the menu popover. Must be used in conjunction - * with `onOpenChange`. + * Whether the menu popover and its contents should be visible. + * Should be used in conjunction with `onOpenChange` in order to control + * the open state of the menu popover. + * + * Note: this prop will set the component in "controlled" mode, and it will + * override the `defaultOpen` prop. */ - open?: boolean; + open?: Ariakit.MenuProviderProps[ 'open' ]; /** - * Event handler called when the open state of the menu popover changes. + * A callback that gets called when the `open` state changes. */ - onOpenChange?: ( open: boolean ) => void; + onOpenChange?: Ariakit.MenuProviderProps[ 'setOpen' ]; /** * The placement of the menu popover. * - * @default 'bottom-start' for root-level menus, 'right-start' for nested menus + * @default 'bottom-start' for root-level menus, 'right-start' for submenus */ - placement?: Placement; + placement?: Ariakit.MenuProviderProps[ 'placement' ]; } export interface MenuPopoverProps { /** - * The contents of the dropdown. + * The contents of the menu popover, which should include instances of the + * `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioItem`, `Menu.Group`, and + * `Menu.Separator` components. */ - children?: React.ReactNode; + children?: Ariakit.MenuProps[ 'children' ]; /** * The modality of the menu popover. When set to true, interaction with * outside elements will be disabled and only menu content will be visible to * screen readers. * + * Determines whether the menu popover is modal. Modal dialogs have distinct + * states and behaviors: + * - The `portal` and `preventBodyScroll` props are set to `true`. They can + * still be manually set to `false`. + * - When the dialog is open, element tree outside it will be inert. + * * @default true */ - modal?: boolean; + modal?: Ariakit.MenuProps[ 'modal' ]; /** * The distance between the popover and the anchor element. * * @default 8 for root-level menus, 16 for nested menus */ - gutter?: number; + gutter?: Ariakit.MenuProps[ 'gutter' ]; /** * The skidding of the popover along the anchor element. Can be set to * negative values to make the popover shift to the opposite side. * * @default 0 for root-level menus, -8 for nested menus */ - shift?: number; + shift?: Ariakit.MenuProps[ 'shift' ]; /** - * Determines whether the menu popover will be hidden when the user presses - * the Escape key. + * Determines if the menu popover will hide when the user presses the + * Escape key. + * + * This prop can be either a boolean or a function that accepts an event as an + * argument and returns a boolean. The event object represents the keydown + * event that initiated the hide action, which could be either a native + * keyboard event or a React synthetic event. * * @default `( event ) => { event.preventDefault(); return true; }` */ - hideOnEscape?: - | boolean - | ( ( - event: KeyboardEvent | React.KeyboardEvent< Element > - ) => boolean ); + hideOnEscape?: Ariakit.MenuProps[ 'hideOnEscape' ]; } export interface MenuTriggerButtonProps { /** * The contents of the menu trigger button. */ - children?: React.ReactNode; + children?: Ariakit.MenuButtonProps[ 'children' ]; /** * Allows the component to be rendered as a different HTML element or React * component. The value can be a React element or a function that takes in the @@ -103,9 +118,6 @@ export interface MenuTriggerButtonProps { * This feature can be combined with the `accessibleWhenDisabled` prop to * make disabled elements still accessible via keyboard. * - * **Note**: For this prop to work, the `focusable` prop must be set to - * `true`, if it's not set by default. - * * @default false */ disabled?: Ariakit.MenuButtonProps[ 'disabled' ]; @@ -129,42 +141,54 @@ export interface MenuTriggerButtonProps { export interface MenuGroupProps { /** - * The contents of the menu group (ie. an optional menu group label and one - * or more menu items). + * The contents of the menu group, which should include one instance of the + * `Menu.GroupLabel` component and one or more instances of `Menu.Item`, + * `Menu.CheckboxItem`, and `Menu.RadioItem`. */ - children: React.ReactNode; + children: Ariakit.MenuGroupProps[ 'children' ]; } export interface MenuGroupLabelProps { /** - * The contents of the menu group label. + * The contents of the menu group label, which should provide an accessible + * label for the menu group. */ - children: React.ReactNode; + children: Ariakit.MenuGroupLabelProps[ 'children' ]; } export interface MenuItemProps { /** - * The contents of the menu item. + * The contents of the menu item, which could include one instance of the + * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText` + * component. */ - children: React.ReactNode; + children: Ariakit.MenuItemProps[ 'children' ]; /** - * The contents of the menu item's prefix. + * The contents of the menu item's prefix, such as an icon. */ prefix?: React.ReactNode; /** - * The contents of the menu item's suffix. + * The contents of the menu item's suffix, such as a keyboard shortcut. */ suffix?: React.ReactNode; /** - * Whether to hide the menu popover when the menu item is clicked. + * Determines if the menu should hide when this item is clicked. + * + * **Note**: This behavior isn't triggered if this menu item is rendered as a + * link and modifier keys are used to either open the link in a new tab or + * download it. * * @default true */ - hideOnClick?: boolean; + hideOnClick?: Ariakit.MenuItemProps[ 'hideOnClick' ]; /** - * Determines if the element is disabled. + * Determines if the element is disabled. This sets the `aria-disabled` + * attribute accordingly, enabling support for all elements, including those + * that don't support the native `disabled` attribute. + * + * @default false */ - disabled?: boolean; + disabled?: Ariakit.MenuItemProps[ 'disabled' ]; /** * Allows the component to be rendered as a different HTML element or React * component. The value can be a React element or a function that takes in the @@ -173,73 +197,137 @@ export interface MenuItemProps { */ render?: Ariakit.MenuItemProps[ 'render' ]; /** - * The ariakit store. This prop is only meant for internal use. + * The ariakit menu store. This prop is only meant for internal use. * @ignore */ store?: Ariakit.MenuItemProps[ 'store' ]; } -export interface MenuCheckboxItemProps - extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > { +export interface MenuCheckboxItemProps { /** - * Whether to hide the menu popover when the menu item is clicked. + * The contents of the menu item, which could include one instance of the + * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText` + * component. + */ + children: Ariakit.MenuItemCheckboxProps[ 'children' ]; + /** + * The contents of the menu item's suffix, such as a keyboard shortcut. + */ + suffix?: React.ReactNode; + /** + * Determines if the menu should hide when this item is clicked. + * + * **Note**: This behavior isn't triggered if this menu item is rendered as a + * link and modifier keys are used to either open the link in a new tab or + * download it. * * @default false */ - hideOnClick?: boolean; + hideOnClick?: Ariakit.MenuItemCheckboxProps[ 'hideOnClick' ]; + /** + * Determines if the element is disabled. This sets the `aria-disabled` + * attribute accordingly, enabling support for all elements, including those + * that don't support the native `disabled` attribute. + * + * @default false + */ + disabled?: Ariakit.MenuItemCheckboxProps[ 'disabled' ]; + /** + * Allows the component to be rendered as a different HTML element or React + * component. The value can be a React element or a function that takes in the + * original component props and gives back a React element with the props + * merged. + */ + render?: Ariakit.MenuItemCheckboxProps[ 'render' ]; /** * The checkbox menu item's name. */ - name: string; + name: Ariakit.MenuItemCheckboxProps[ 'name' ]; /** * The checkbox item's value, useful when using multiple checkbox menu items * associated to the same `name`. */ - value?: string; + value?: Ariakit.MenuItemCheckboxProps[ 'value' ]; /** * The controlled checked state of the checkbox menu item. + * + * Note: this prop will override the `defaultChecked` prop. */ - checked?: boolean; + checked?: Ariakit.MenuItemCheckboxProps[ 'checked' ]; /** * The checked state of the checkbox menu item when it is initially rendered. * Use when not wanting to control its checked state. + * + * Note: this prop will be overriden by the `checked` prop, if it is defined. */ - defaultChecked?: boolean; + defaultChecked?: Ariakit.MenuItemCheckboxProps[ 'defaultChecked' ]; /** - * Event handler called when the checked state of the checkbox menu item changes. + * A function that is called when the checkbox's checked state changes. */ - onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void; + onChange?: Ariakit.MenuItemCheckboxProps[ 'onChange' ]; } -export interface MenuRadioItemProps - extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > { +export interface MenuRadioItemProps { + /** + * The contents of the menu item, which could include one instance of the + * `Menu.ItemLabel` component and/or one instance of the `Menu.ItemHelpText` + * component. + */ + children: Ariakit.MenuItemRadioProps[ 'children' ]; + /** + * The contents of the menu item's suffix, such as a keyboard shortcut. + */ + suffix?: React.ReactNode; + /** + * Determines if the menu should hide when this item is clicked. + * + * **Note**: This behavior isn't triggered if this menu item is rendered as a + * link and modifier keys are used to either open the link in a new tab or + * download it. + * + * @default false + */ + hideOnClick?: Ariakit.MenuItemRadioProps[ 'hideOnClick' ]; /** - * Whether to hide the menu popover when the menu item is clicked. + * Determines if the element is disabled. This sets the `aria-disabled` + * attribute accordingly, enabling support for all elements, including those + * that don't support the native `disabled` attribute. * * @default false */ - hideOnClick?: boolean; + disabled?: Ariakit.MenuItemRadioProps[ 'disabled' ]; + /** + * Allows the component to be rendered as a different HTML element or React + * component. The value can be a React element or a function that takes in the + * original component props and gives back a React element with the props + * merged. + */ + render?: Ariakit.MenuItemRadioProps[ 'render' ]; /** * The radio item's name. */ - name: string; + name: Ariakit.MenuItemRadioProps[ 'name' ]; /** * The radio item's value. */ - value: string | number; + value: Ariakit.MenuItemRadioProps[ 'value' ]; /** * The controlled checked state of the radio menu item. + * + * Note: this prop will override the `defaultChecked` prop. */ - checked?: boolean; + checked?: Ariakit.MenuItemRadioProps[ 'checked' ]; /** * The checked state of the radio menu item when it is initially rendered. * Use when not wanting to control its checked state. + * + * Note: this prop will be overriden by the `checked` prop, if it is defined. */ - defaultChecked?: boolean; + defaultChecked?: Ariakit.MenuItemRadioProps[ 'defaultChecked' ]; /** - * Event handler called when the checked radio menu item changes. + * A function that is called when the checkbox's checked state changes. */ - onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void; + onChange?: Ariakit.MenuItemRadioProps[ 'onChange' ]; } export interface MenuSeparatorProps {} diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md index 9c7e846046c90..7f5f3219adfd1 100644 --- a/packages/components/src/tabs/README.md +++ b/packages/components/src/tabs/README.md @@ -1,254 +1,218 @@ # Tabs -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- -Tabs is a collection of React components that combine to render an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). - -Tabs organizes content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen. - -## Development guidelines - -### Usage - -#### Uncontrolled Mode - -Tabs can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultTabId` prop can be used to set the initially selected tab. If this prop is not set, the first tab will be selected by default. In addition, in most cases where the currently active tab becomes disabled or otherwise unavailable, uncontrolled mode will automatically fall back to selecting the first available tab. - -```jsx -import { Tabs } from '@wordpress/components'; - -const onSelect = ( tabName ) => { - console.log( 'Selecting tab', tabName ); -}; - -const MyUncontrolledTabs = () => ( - - - - Tab 1 - - - Tab 2 - - - Tab 3 - - - -

Selected tab: Tab 1

- - -

Selected tab: Tab 2

- - -

Selected tab: Tab 3

- - - ); -``` - -#### Controlled Mode - -Tabs can also be used in a controlled mode, where the parent component specifies the `selectedTabId` and the `onSelect` props to control tab selection. In this mode, the `defaultTabId` prop will be ignored if it is provided. If the `selectedTabId` is `null`, no tab is selected. In this mode, if the currently selected tab becomes disabled or otherwise unavailable, the component will _not_ fall back to another available tab, leaving the controlling component in charge of implementing the desired logic. - -```jsx -import { Tabs } from '@wordpress/components'; - const [ selectedTabId, setSelectedTabId ] = useState< - string | undefined | null - >(); - -const onSelect = ( tabName ) => { - console.log( 'Selecting tab', tabName ); -}; - -const MyControlledTabs = () => ( - { - setSelectedTabId( selectedId ); - onSelect( selectedId ); - } } - > - - - Tab 1 - - - Tab 2 - - - Tab 3 - - - -

Selected tab: Tab 1

- - -

Selected tab: Tab 2

- - -

Selected tab: Tab 3

- - - ); -``` - -### Components and Sub-components - -Tabs is comprised of four individual components: -- `Tabs`: a wrapper component and context provider. It is responsible for managing the state of the tabs and rendering the `TabList` and `TabPanels`. -- `TabList`: a wrapper component for the `Tab` components. It is responsible for rendering the list of tabs. -- `Tab`: renders a single tab. The currently active tab receives default styling that can be overridden with CSS targeting [aria-selected="true"]. -- `TabPanel`: renders the content to display for a single tab once that tab is selected. - -#### Tabs - -##### Props - -###### `children`: `React.ReactNode` - -The children elements, which should include one instance of the `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel` components as there are `Tabs.Tab` components. - -- Required: Yes - -###### `selectOnMove`: `boolean` - -Determines if the tab should be selected when it receives focus. If set to `false`, the tab will only be selected upon clicking, not when using arrow keys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) for more info. - -- Required: No -- Default: `true` - -###### `selectedTabId`: `string | null` + -The id of the tab whose panel is currently visible. +🔒 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. -If left `undefined`, it will be automatically set to the first enabled tab, and the component assumes it is being used in "uncontrolled" mode. +

See the WordPress Storybook for more detailed, interactive documentation.

-Consequently, any value different than `undefined` will set the component in "controlled" mode. When in "controlled" mode, the `null` value will result in no tabs being selected, and the tablist becoming tabbable. +Tabs is a collection of React components that combine to render +an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). -- Required: No +Tabs organizes content across different screens, data sets, and interactions. +It has two sections: a list of tabs, and the view to show when a tab is chosen. -###### `defaultTabId`: `string | null` +`Tabs` itself is a wrapper component and context provider. +It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component. -The id of the tab whose panel is currently visible. +## Props -If left `undefined`, it will be automatically set to the first enabled tab. If set to `null`, no tab will be selected, and the tablist will be tabbable. +### `activeTabId` -_Note: this prop will be overridden by the `selectedTabId` prop if it is provided (meaning the component will be used in "controlled" mode)._ + - Type: `string` + - Required: No -- Required: No +The current active tab `id`. The active tab is the tab element within the +tablist widget that has DOM focus. -###### `onSelect`: `( ( selectedId: string | null | undefined ) => void )` +- `null` represents the tablist (ie. the base composite element). Users + will be able to navigate out of it using arrow keys. +- If `activeTabId` is initially set to `null`, the base composite element + itself will have focus and users will be able to navigate to it using + arrow keys. -The function called when the `selectedTabId` changes. +### `children` -- Required: No -- Default: `noop` + - Type: `ReactNode` + - Required: Yes -###### `activeTabId`: `string | null` +The children elements, which should include one instance of the +`Tabs.Tablist` component and as many instances of the `Tabs.TabPanel` +components as there are `Tabs.Tab` components. -The current active tab `id`. The active tab is the tab element within the tablist widget that has DOM focus. +### `defaultTabId` -- `null` represents the tablist (ie. the base composite element). Users - will be able to navigate out of it using arrow keys; -- If `activeTabId` is initially set to `null`, the base composite element - itself will have focus and users will be able to navigate to it using - arrow keys. + - Type: `string` + - Required: No + +The id of the tab whose panel is currently visible. -- Required: No +If left `undefined`, it will be automatically set to the first enabled +tab. If set to `null`, no tab will be selected, and the tablist will be +tabbable. -###### `defaultActiveTabId`: `string | null` +Note: this prop will be overridden by the `selectedTabId` prop if it is +provided (meaning the component will be used in "controlled" mode). -The tab id that should be active by default when the composite widget is rendered. If `null`, the tablist element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused. +### `defaultActiveTabId` -_Note: this prop will be overridden by the `activeTabId` prop if it is provided._ + - Type: `string` + - Required: No -- Required: No +The tab id that should be active by default when the composite widget is +rendered. If `null`, the tablist element itself will have focus +and users will be able to navigate to it using arrow keys. If `undefined`, +the first enabled item will be focused. -###### `onActiveTabIdChange`: `( ( activeId: string | null | undefined ) => void )` +Note: this prop will be overridden by the `activeTabId` prop if it is +provided. + +### `onSelect` + + - Type: `(selectedId: string) => void` + - Required: No The function called when the `selectedTabId` changes. -- Required: No -- Default: `noop` +### `onActiveTabIdChange` + + - Type: `(activeId: string) => void` + - Required: No + +A callback that gets called when the `activeTabId` state changes. -###### `orientation`: `'horizontal' | 'vertical' | 'both'` +### `orientation` -Defines the orientation of the tablist and determines which arrow keys can be used to move focus: + - Type: `"horizontal" | "vertical" | "both"` + - Required: No + - Default: `"horizontal"` -- `both`: all arrow keys work; -- `horizontal`: only left and right arrow keys work; +Defines the orientation of the tablist and determines which arrow keys +can be used to move focus: + +- `both`: all arrow keys work. +- `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work. -- Required: No -- Default: `horizontal` +### `selectOnMove` + + - Type: `boolean` + - Required: No + - Default: `true` + +Determines if the tab should be selected when it receives focus. If set to +`false`, the tab will only be selected upon clicking, not when using arrow +keys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) +for more info. + +### `selectedTabId` + + - Type: `string` + - Required: No + +The id of the tab whose panel is currently visible. + +If left `undefined`, it will be automatically set to the first enabled +tab, and the component assumes it is being used in "uncontrolled" mode. -#### TabList +Consequently, any value different than `undefined` will set the component +in "controlled" mode. When in "controlled" mode, the `null` value will +result in no tabs being selected, and the tablist becoming tabbable. -##### Props +## Subcomponents -###### `children`: `React.ReactNode` +### Tabs.TabList -The children elements, which should include one or more instances of the `Tabs.Tab` component. +A wrapper component for the `Tab` components. -- Required: No +It is responsible for rendering the list of tabs. -#### Tab +#### Props -##### Props +##### `children` -###### `tabId`: `string` + - Type: `ReactNode` + - Required: Yes -The unique ID of the tab. It will be used to register the tab and match it to a corresponding `Tabs.TabPanel` component. If not provided, a unique ID will be automatically generated. +The children elements, which should include one or more instances of the +`Tabs.Tab` component. -- Required: Yes +### Tabs.Tab -###### `children`: `React.ReactNode` +Renders a single tab. + +The currently active tab receives default styling that can be +overridden with CSS targeting `[aria-selected="true"]`. + +#### Props + +##### `children` + + - Type: `ReactNode` + - Required: No The contents of the tab. -- Required: No +##### `disabled` -###### `disabled`: `boolean` + - Type: `boolean` + - Required: No + - Default: `false` -Determines if the tab should be disabled. Note that disabled tabs can still be accessed via the keyboard when navigating through the tablist. +Determines if the tab should be disabled. Note that disabled tabs can +still be accessed via the keyboard when navigating through the tablist. -- Required: No -- Default: `false` +##### `render` -###### `render`: `React.ReactNode` + - Type: `RenderProp & { ref?: Ref; }> | ReactElement>` + - Required: No -Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged. +Allows the component to be rendered as a different HTML element or React +component. The value can be a React element or a function that takes in the +original component props and gives back a React element with the props +merged. By default, the tab will be rendered as a `button` element. -- Required: No +##### `tabId` -#### TabPanel + - Type: `string` + - Required: Yes -##### Props +The unique ID of the tab. It will be used to register the tab and match +it to a corresponding `Tabs.TabPanel` component. -###### `children`: `React.ReactNode` +### Tabs.TabPanel -The contents of the tab panel. +Renders the content to display for a single tab once that tab is selected. -- Required: No +#### Props -###### `tabId`: `string` +##### `children` -The unique `id` of the `Tabs.Tab` component controlling this panel. This connection is used to assign the `aria-labelledby` attribute to the tab panel and to determine if the tab panel should be visible. + - Type: `ReactNode` + - Required: No -If not provided, this link is automatically established by matching the order of `Tabs.Tab` and `Tabs.TabPanel` elements in the DOM. +The contents of the tab panel. -- Required: Yes +##### `focusable` -###### `focusable`: `boolean` + - Type: `boolean` + - Required: No + - Default: `true` Determines whether or not the tabpanel element should be focusable. +If `false`, pressing the tab key will skip over the tabpanel, and instead +focus on the first focusable element in the panel (if there is one). + +##### `tabId` + + - Type: `string` + - Required: Yes -If `false`, pressing the tab key will skip over the tabpanel, and instead focus on the first focusable element in the panel (if there is one). +The unique `id` of the `Tabs.Tab` component controlling this panel. This +connection is used to assign the `aria-labelledby` attribute to the tab +panel and to determine if the tab panel should be visible. -- Required: No -- Default: `true` +If not provided, this link is automatically established by matching the +order of `Tabs.Tab` and `Tabs.TabPanel` elements in the DOM. diff --git a/packages/components/src/tabs/docs-manifest.json b/packages/components/src/tabs/docs-manifest.json new file mode 100644 index 0000000000000..fc24b177ef616 --- /dev/null +++ b/packages/components/src/tabs/docs-manifest.json @@ -0,0 +1,22 @@ +{ + "$schema": "../../schemas/docs-manifest.json", + "displayName": "Tabs", + "filePath": "./index.tsx", + "subcomponents": [ + { + "displayName": "TabList", + "preferredDisplayName": "Tabs.TabList", + "filePath": "./tablist.tsx" + }, + { + "displayName": "Tab", + "preferredDisplayName": "Tabs.Tab", + "filePath": "./tab.tsx" + }, + { + "displayName": "TabPanel", + "preferredDisplayName": "Tabs.TabPanel", + "filePath": "./tabpanel.tsx" + } + ] +} diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index 819d259395daf..2cbe487976c59 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -36,11 +36,14 @@ function internalToExternalTabId( } /** - * Display one panel of content at a time with a tabbed interface, based on the - * WAI-ARIA Tabs Pattern⁠. + * Tabs is a collection of React components that combine to render + * an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). * - * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ - * ``` + * Tabs organizes content across different screens, data sets, and interactions. + * It has two sections: a list of tabs, and the view to show when a tab is chosen. + * + * `Tabs` itself is a wrapper component and context provider. + * It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component. */ export const Tabs = Object.assign( function Tabs( { @@ -121,12 +124,26 @@ export const Tabs = Object.assign( ); }, { + /** + * Renders a single tab. + * + * The currently active tab receives default styling that can be + * overridden with CSS targeting `[aria-selected="true"]`. + */ Tab: Object.assign( Tab, { displayName: 'Tabs.Tab', } ), + /** + * A wrapper component for the `Tab` components. + * + * It is responsible for rendering the list of tabs. + */ TabList: Object.assign( TabList, { displayName: 'Tabs.TabList', } ), + /** + * Renders the content to display for a single tab once that tab is selected. + */ TabPanel: Object.assign( TabPanel, { displayName: 'Tabs.TabPanel', } ), diff --git a/packages/components/src/tabs/stories/best-practices.mdx b/packages/components/src/tabs/stories/best-practices.mdx new file mode 100644 index 0000000000000..a8bb9cf20a5f0 --- /dev/null +++ b/packages/components/src/tabs/stories/best-practices.mdx @@ -0,0 +1,99 @@ +import { Meta } from '@storybook/blocks'; + +import * as TabsStories from './index.story'; + + + +# Tabs + +## Usage + +### Uncontrolled Mode + +Tabs can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultTabId` prop can be used to set the initially selected tab. If this prop is not set, the first tab will be selected by default. In addition, in most cases where the currently active tab becomes disabled or otherwise unavailable, uncontrolled mode will automatically fall back to selecting the first available tab. + +```jsx +import { Tabs } from '@wordpress/components'; + +const onSelect = ( tabName ) => { + console.log( 'Selecting tab', tabName ); +}; + +const MyUncontrolledTabs = () => ( + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + +

Selected tab: Tab 1

+ + +

Selected tab: Tab 2

+ + +

Selected tab: Tab 3

+ + +); +``` + +### Controlled Mode + +Tabs can also be used in a controlled mode, where the parent component specifies the `selectedTabId` and the `onSelect` props to control tab selection. In this mode, the `defaultTabId` prop will be ignored if it is provided. If the `selectedTabId` is `null`, no tab is selected. In this mode, if the currently selected tab becomes disabled or otherwise unavailable, the component will _not_ fall back to another available tab, leaving the controlling component in charge of implementing the desired logic. + +```tsx +import { Tabs } from '@wordpress/components'; + +const [ selectedTabId, setSelectedTabId ] = useState< + string | undefined | null +>(); + +const onSelect = ( tabName ) => { + console.log( 'Selecting tab', tabName ); +}; + +const MyControlledTabs = () => ( + { + setSelectedTabId( selectedId ); + onSelect( selectedId ); + } } + > + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + +

Selected tab: Tab 1

+ + +

Selected tab: Tab 2

+ + +

Selected tab: Tab 3

+ + +); +``` + +### Using `Tabs` with links + +The semantics implemented by the `Tabs` component don't align well with the semantics needed by a list of links. Furthermore, end users usually expect every link to be tabbable, while `Tabs.Tablist` is a [composite](https://w3c.github.io/aria/#composite) widget acting as a single tab stop. + +For these reasons, even if the `Tabs` component is fully extensible, we don't recommend using `Tabs` with links, and we don't currently provide any related Storybook example. diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx index e434bb501d85c..0502d6400a4f5 100644 --- a/packages/components/src/tabs/stories/index.story.tsx +++ b/packages/components/src/tabs/stories/index.story.tsx @@ -15,7 +15,6 @@ import { useState } from '@wordpress/element'; */ import { Tabs } from '..'; import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill'; -import DropdownMenu from '../../dropdown-menu'; import Button from '../../button'; import Tooltip from '../../tooltip'; import Icon from '../../icon'; @@ -367,133 +366,3 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => { ); }; export const InsertCustomElements = CloseButtonTemplate.bind( {} ); - -const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => { - const [ selectedTabId, setSelectedTabId ] = useState< - string | undefined | null - >( props.selectedTabId ); - - return ( - <> - { - setSelectedTabId( selectedId ); - props.onSelect?.( selectedId ); - } } - > - - Tab 1 - - Tab 2 - - Tab 3 - - -

Selected tab: Tab 1

- - -

Selected tab: Tab 2

- - -

Selected tab: Tab 3

- - -
-

Select a tab:

- setSelectedTabId( 'tab1' ), - title: 'Tab 1', - isActive: selectedTabId === 'tab1', - }, - { - onClick: () => setSelectedTabId( 'tab2' ), - title: 'Tab 2', - isActive: selectedTabId === 'tab2', - }, - { - onClick: () => setSelectedTabId( 'tab3' ), - title: 'Tab 3', - isActive: selectedTabId === 'tab3', - }, - ] } - label="Choose a tab. The power is yours." - /> -
- - ); -}; - -export const ControlledMode = ControlledModeTemplate.bind( {} ); -ControlledMode.args = { - selectedTabId: 'tab3', -}; - -const TabBecomesDisabledTemplate: StoryFn< typeof Tabs > = ( props ) => { - const [ disableTab2, setDisableTab2 ] = useState( false ); - - return ( - <> - - - - Tab 1 - - Tab 2 - - Tab 3 - - -

Selected tab: Tab 1

- - -

Selected tab: Tab 2

- - -

Selected tab: Tab 3

- - - - ); -}; -export const TabBecomesDisabled = TabBecomesDisabledTemplate.bind( {} ); - -const TabGetsRemovedTemplate: StoryFn< typeof Tabs > = ( props ) => { - const [ removeTab1, setRemoveTab1 ] = useState( false ); - - return ( - <> - - - - { ! removeTab1 && Tab 1 } - Tab 2 - Tab 3 - - -

Selected tab: Tab 1

- - -

Selected tab: Tab 2

- - -

Selected tab: Tab 3

- - - - ); -}; -export const TabGetsRemoved = TabGetsRemovedTemplate.bind( {} ); diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts index 959a82509a05d..7ef0f919322c0 100644 --- a/packages/components/src/tabs/types.ts +++ b/packages/components/src/tabs/types.ts @@ -22,18 +22,16 @@ export type TabsProps = { * `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel` * components as there are `Tabs.Tab` components. */ - children: Ariakit.TabProps[ 'children' ]; + children: Ariakit.TabProviderProps[ 'children' ]; /** * Determines if the tab should be selected when it receives focus. If set to * `false`, the tab will only be selected upon clicking, not when using arrow - * keys to shift focus (manual tab activation). See the official W3C docs + * keys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) * for more info. * * @default true - * - * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/ */ - selectOnMove?: Ariakit.TabStoreProps[ 'selectOnMove' ]; + selectOnMove?: Ariakit.TabProviderProps[ 'selectOnMove' ]; /** * The id of the tab whose panel is currently visible. * @@ -44,7 +42,7 @@ export type TabsProps = { * in "controlled" mode. When in "controlled" mode, the `null` value will * result in no tabs being selected, and the tablist becoming tabbable. */ - selectedTabId?: Ariakit.TabStoreProps[ 'selectedId' ]; + selectedTabId?: Ariakit.TabProviderProps[ 'selectedId' ]; /** * The id of the tab whose panel is currently visible. * @@ -55,21 +53,22 @@ export type TabsProps = { * Note: this prop will be overridden by the `selectedTabId` prop if it is * provided (meaning the component will be used in "controlled" mode). */ - defaultTabId?: Ariakit.TabStoreProps[ 'defaultSelectedId' ]; + defaultTabId?: Ariakit.TabProviderProps[ 'defaultSelectedId' ]; /** * The function called when the `selectedTabId` changes. */ - onSelect?: Ariakit.TabStoreProps[ 'setSelectedId' ]; + onSelect?: Ariakit.TabProviderProps[ 'setSelectedId' ]; /** * The current active tab `id`. The active tab is the tab element within the * tablist widget that has DOM focus. + * * - `null` represents the tablist (ie. the base composite element). Users * will be able to navigate out of it using arrow keys. * - If `activeTabId` is initially set to `null`, the base composite element * itself will have focus and users will be able to navigate to it using - * arrow keys.activeTabId + * arrow keys. */ - activeTabId?: Ariakit.TabStoreProps[ 'activeId' ]; + activeTabId?: Ariakit.TabProviderProps[ 'activeId' ]; /** * The tab id that should be active by default when the composite widget is * rendered. If `null`, the tablist element itself will have focus @@ -79,21 +78,22 @@ export type TabsProps = { * Note: this prop will be overridden by the `activeTabId` prop if it is * provided. */ - defaultActiveTabId?: Ariakit.TabStoreProps[ 'defaultActiveId' ]; + defaultActiveTabId?: Ariakit.TabProviderProps[ 'defaultActiveId' ]; /** * A callback that gets called when the `activeTabId` state changes. */ - onActiveTabIdChange?: Ariakit.TabStoreProps[ 'setActiveId' ]; + onActiveTabIdChange?: Ariakit.TabProviderProps[ 'setActiveId' ]; /** * Defines the orientation of the tablist and determines which arrow keys * can be used to move focus: + * * - `both`: all arrow keys work. * - `horizontal`: only left and right arrow keys work. * - `vertical`: only up and down arrow keys work. * * @default "horizontal" */ - orientation?: Ariakit.TabStoreProps[ 'orientation' ]; + orientation?: Ariakit.TabProviderProps[ 'orientation' ]; }; export type TabListProps = { @@ -105,7 +105,6 @@ export type TabListProps = { }; // TODO: consider prop name changes (tabId, selectedTabId) -// switch to auto-generated README // compound technique export type TabProps = { diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index a447b2ce5133b..76314686eb963 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -104,6 +104,7 @@ export default function useText( const isOptimalTextColorDark = getOptimalTextShade( optimizeReadabilityFor ) === 'dark'; + // Should not use theme colors sx.optimalTextColor = isOptimalTextColorDark ? css( { color: COLORS.gray[ 900 ] } ) : css( { color: COLORS.white } ); diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts index e777ed4f0941d..7d3b70e2ab239 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 1b98c0853ac54..caa876cb24dc7 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/tree-select/README.md b/packages/components/src/tree-select/README.md index 5f3247bdb3322..d2f73443a2a88 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 0000000000000..2c204623dc252 --- /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 0000000000000..d631bc600e49a --- /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 0000000000000..8de25b59343b3 --- /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 fafca3a589122..75e87c4d2d0f0 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 28d349fc19bef..080d514f6f363 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 b80833ca725f9..f68f586f47720 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 c05318d5b060f..0bf72c58ba568 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 a766eedaeddca..38c6ac761aab6 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 93d0bd976dd00..d6bbcb27f0adb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,7 @@ { "path": "packages/dom" }, { "path": "packages/dom-ready" }, { "path": "packages/e2e-test-utils-playwright" }, + { "path": "packages/edit-site" }, { "path": "packages/editor" }, { "path": "packages/element" }, { "path": "packages/escape-html" }, @@ -59,7 +60,9 @@ { "path": "packages/url" }, { "path": "packages/vips" }, { "path": "packages/warning" }, - { "path": "packages/wordcount" } + { "path": "packages/wordcount" }, + { "path": "test/e2e" }, + { "path": "test/performance" } ], "files": [] }