From 52a806204a2096dc61fa57c5b07da9a064b4c8c9 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sun, 22 Dec 2024 12:55:26 +0900 Subject: [PATCH 01/83] env: Fix changelog entry (#68219) Co-authored-by: t-hamano Co-authored-by: ryanwelcher --- packages/env/CHANGELOG.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md index 59c8998aba5cc5..7e87ba6371fdba 100644 --- a/packages/env/CHANGELOG.md +++ b/packages/env/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- Add support for WordPress multisite installations. Enabled via the new `multisite` environment config ([#67845](https://github.com/WordPress/gutenberg/pull/67845)). + ### Internal - Refactored the code to use new API introduced together with `@inquirer/prompts` instead of legacy `inquirer` package ([#67877](https://github.com/WordPress/gutenberg/pull/67877)). @@ -10,8 +14,7 @@ ### Enhancements -- Add phpMyAdmin as an optional service. Enabled via the new `phpmyadminPort` environment config, as well as env vars `WP_ENV_PHPMYADMIN_PORT` and `WP_ENV_TESTS_PHPMYADMIN_PORT`. -- Add support for WordPress multisite installations. Enabled via the new `multisite` environment config. +- Add phpMyAdmin as an optional service. Enabled via the new `phpmyadminPort` environment config, as well as env vars `WP_ENV_PHPMYADMIN_PORT` and `WP_ENV_TESTS_PHPMYADMIN_PORT` ([#67588](https://github.com/WordPress/gutenberg/pull/67588)). ### Internal From b1a4344235d0ec66d4c21f1d4b069251fe3a636a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 23 Dec 2024 09:36:38 +1100 Subject: [PATCH 02/83] Try splitting style book into sections. (#68071) * Try splitting style book into sections. * Single block view * Fix classic stylebook logic * Blocks without examples should show all blocks * Update scrolling logic to always scroll to top on long pages * Scroll to top for color --------- Co-authored-by: tellthemachines Co-authored-by: ramonjd --- .../src/components/style-book/constants.ts | 49 ++++++ .../src/components/style-book/index.js | 151 ++++++++++-------- 2 files changed, 137 insertions(+), 63 deletions(-) diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index ea99279fd9e655..dcd41287fa239d 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -148,6 +148,55 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ }, ]; +// Style book preview subcategories for all blocks section. +export const STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [ + ...STYLE_BOOK_THEME_SUBCATEGORIES, + { + slug: 'media', + title: __( 'Media' ), + blocks: [ 'core/post-featured-image' ], + }, + { + slug: 'widgets', + title: __( 'Widgets' ), + blocks: [], + }, + { + slug: 'embed', + title: __( 'Embeds' ), + include: [], + }, +]; + +// Style book preview categories are organised slightly differently to the editor ones. +export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [ + { + slug: 'overview', + title: __( 'Overview' ), + blocks: [], + }, + { + slug: 'text', + title: __( 'Text' ), + blocks: [ + 'core/post-content', + 'core/home-link', + 'core/navigation-link', + ], + }, + { + slug: 'colors', + title: __( 'Colors' ), + blocks: [], + }, + { + slug: 'blocks', + title: __( 'All Blocks' ), + blocks: [], + subcategories: STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES, + }, +]; + // Forming a "block formatting context" to prevent margin collapsing. // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context const ROOT_CONTAINER = ` diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 28a693e76958d7..723953777e2b28 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -51,8 +51,11 @@ import { import { getExamples } from './examples'; import { store as siteEditorStore } from '../../store'; import { useSection } from '../sidebar-global-styles-wrapper'; -import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; import { GlobalStylesRenderer } from '../global-styles-renderer'; +import { + STYLE_BOOK_COLOR_GROUPS, + STYLE_BOOK_PREVIEW_CATEGORIES, +} from '../style-book/constants'; const { ExperimentalBlockEditorProvider, @@ -91,35 +94,24 @@ const scrollToSection = ( anchorId, iframe ) => { }; /** - * Parses a Block Editor navigation path to extract the block name and - * build a style book navigation path. The object can be extended to include a category, - * representing a style book tab/section. + * Parses a Block Editor navigation path to build a style book navigation path. + * The object can be extended to include a category, representing a style book tab/section. * * @param {string} path An internal Block Editor navigation path. * @return {null|{block: string}} An object containing the example to navigate to. */ const getStyleBookNavigationFromPath = ( path ) => { if ( path && typeof path === 'string' ) { - if ( path === '/' ) { + if ( + path === '/' || + path.startsWith( '/typography' ) || + path.startsWith( '/colors' ) || + path.startsWith( '/blocks' ) + ) { return { top: true, }; } - - if ( path.startsWith( '/typography' ) ) { - return { - block: 'typography', - }; - } - let block = path.includes( '/blocks/' ) - ? decodeURIComponent( path.split( '/blocks/' )[ 1 ] ) - : null; - // Default to theme-colors if the path ends with /colors. - block = path.endsWith( '/colors' ) ? 'theme-colors' : block; - - return { - block, - }; } return null; }; @@ -313,29 +305,43 @@ function StyleBook( { ) ) } - { tabs.map( ( tab ) => ( - - - - ) ) } + { tabs.map( ( tab ) => { + const categoryDefinition = tab.slug + ? getTopLevelStyleBookCategories().find( + ( _category ) => + _category.slug === tab.slug + ) + : null; + const filteredExamples = categoryDefinition + ? getExamplesByCategory( + categoryDefinition, + examples + ) + : { examples }; + return ( + + + + ); + } ) } ) : ( { const examples = getExamples( colors ); const examplesForSinglePageUse = getExamplesForSinglePageUse( examples ); + let previewCategory = null; + if ( section.includes( '/colors' ) ) { + previewCategory = 'colors'; + } else if ( section.includes( '/typography' ) ) { + previewCategory = 'text'; + } else if ( section.includes( '/blocks' ) ) { + previewCategory = 'blocks'; + const blockName = + decodeURIComponent( section ).split( '/blocks/' )[ 1 ]; + if ( + blockName && + examples.find( ( example ) => example.name === blockName ) + ) { + previewCategory = blockName; + } + } else if ( ! isStatic ) { + previewCategory = 'overview'; + } + const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find( + ( category ) => category.slug === previewCategory + ); + + // If there's no category definition there may be a single block. + const filteredExamples = categoryDefinition + ? getExamplesByCategory( categoryDefinition, examples ) + : { + examples: [ + examples.find( + ( example ) => example.name === previewCategory + ), + ], + }; + + // If there's no preview category, show all examples. + const displayedExamples = previewCategory + ? filteredExamples + : { examples: examplesForSinglePageUse }; + const { base: baseConfig } = useContext( GlobalStylesContext ); const goTo = getStyleBookNavigationFromPath( section ); @@ -449,7 +493,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { { }; export const StyleBookBody = ( { - category, examples, isSelected, onClick, @@ -508,13 +551,6 @@ export const StyleBookBody = ( { if ( hasIframeLoaded && iframeRef?.current ) { if ( goTo?.top ) { scrollToSection( 'top', iframeRef?.current ); - return; - } - if ( goTo?.block ) { - scrollToSection( - `example-${ goTo?.block }`, - iframeRef?.current - ); } } }, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] ); @@ -541,8 +577,7 @@ export const StyleBookBody = ( { className={ clsx( 'edit-site-style-book__examples', { 'is-wide': sizes.width > 600, } ) } - examples={ examples } - category={ category } + filteredExamples={ examples } label={ title ? sprintf( @@ -554,24 +589,14 @@ export const StyleBookBody = ( { } isSelected={ isSelected } onSelect={ onSelect } - key={ category } + key={ title } /> ); }; const Examples = memo( - ( { className, examples, category, label, isSelected, onSelect } ) => { - const categoryDefinition = category - ? getTopLevelStyleBookCategories().find( - ( _category ) => _category.slug === category - ) - : null; - - const filteredExamples = categoryDefinition - ? getExamplesByCategory( categoryDefinition, examples ) - : { examples }; - + ( { className, filteredExamples, label, isSelected, onSelect } ) => { return ( Date: Mon, 23 Dec 2024 10:04:59 +0800 Subject: [PATCH 03/83] Fix trailing spaces on navigation block classnames (#68161) Co-authored-by: kurudrive Co-authored-by: talldan Co-authored-by: luisherranz Co-authored-by: ramonjd --- packages/block-library/src/navigation/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 9a56e399fcfecb..43ca8331534275 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -539,8 +539,8 @@ private static function get_responsive_container_markup( $attributes, $inner_blo $inner_blocks_html, $toggle_aria_label_open, $toggle_aria_label_close, - esc_attr( implode( ' ', $responsive_container_classes ) ), - esc_attr( implode( ' ', $open_button_classes ) ), + esc_attr( trim( implode( ' ', $responsive_container_classes ) ) ), + esc_attr( trim( implode( ' ', $open_button_classes ) ) ), ( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '', $toggle_button_content, $toggle_close_button_content, From 0fb8403108d1490d7a62453595bea76a7ddd9b2e Mon Sep 17 00:00:00 2001 From: timse201 Date: Mon, 23 Dec 2024 04:43:58 +0100 Subject: [PATCH 04/83] split upload into verbs and nouns (#68227) * split upload * split upload * split upload * split upload * split upload * Add missing imports for _x function --------- Co-authored-by: timse201 Co-authored-by: talldan --- .../block-editor/src/components/media-placeholder/index.js | 6 +++--- .../block-editor/src/components/media-replace-flow/index.js | 4 ++-- packages/block-library/src/video/tracks-editor.js | 2 +- .../components/global-styles/font-library-modal/index.js | 2 +- .../src/components/post-publish-panel/maybe-upload-media.js | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 0cbc6c8c26203f..b19411893b86ca 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -15,7 +15,7 @@ import { __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, withFilters, } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { keyboardReturn } from '@wordpress/icons'; @@ -482,7 +482,7 @@ export function MediaPlaceholder( { ) } onClick={ openFileDialog } > - { __( 'Upload' ) } + { _x( 'Upload', 'verb' ) } { uploadMediaLibraryButton } { renderUrlSelectionUI() } @@ -512,7 +512,7 @@ export function MediaPlaceholder( { 'block-editor-media-placeholder__upload-button' ) } > - { __( 'Upload' ) } + { _x( 'Upload', 'verb' ) } ) } onChange={ onUpload } diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index 0da15033a86bf0..dd6000a5f68451 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -7,7 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useRef } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; import { FormFileUpload, @@ -188,7 +188,7 @@ const MediaReplaceFlow = ( { openFileDialog(); } } > - { __( 'Upload' ) } + { _x( 'Upload', 'verb' ) } ); } } diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js index 33036a14f1fec7..a0152885f55671 100644 --- a/packages/block-library/src/video/tracks-editor.js +++ b/packages/block-library/src/video/tracks-editor.js @@ -323,7 +323,7 @@ export default function TracksEditor( { tracks = [], onChange } ) { openFileDialog(); } } > - { __( 'Upload' ) } + { _x( 'Upload', 'verb' ) } ); } } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js index 27093e0ef1cbba..5661a002f71ecb 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js @@ -28,7 +28,7 @@ const DEFAULT_TAB = { const UPLOAD_TAB = { id: 'upload-fonts', - title: __( 'Upload' ), + title: _x( 'Upload', 'noun' ), }; const tabsFromCollections = ( collections ) => diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 32ea69c425e0b5..a92a4794154344 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -9,7 +9,7 @@ import { __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { isBlobURL } from '@wordpress/blob'; @@ -260,7 +260,7 @@ export default function MaybeUploadMediaPanel() { variant="primary" onClick={ uploadImages } > - { __( 'Upload' ) } + { _x( 'Upload', 'verb' ) } ) } From 068660c154b3a4d8f11b53b9e0819b5f82bfcfb3 Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:55:24 +0530 Subject: [PATCH 05/83] fix: use dropdown menu props (#68015) Co-authored-by: im3dabasia Co-authored-by: fabiankaegy --- packages/block-library/src/navigation-submenu/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index dbdbd23b13b2f6..315169f2736adf 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -44,6 +44,7 @@ import { getColors, getNavigationChildBlockProps, } from '../navigation/edit/utils'; +import { useToolsPanelDropdownMenuProps } from '../utils/hooks'; const ALLOWED_BLOCKS = [ 'core/navigation-link', @@ -153,6 +154,7 @@ export default function NavigationSubmenuEdit( { const isDraggingWithin = useIsDraggingWithin( listItemRef ); const itemLabelPlaceholder = __( 'Add text…' ); const ref = useRef(); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); const { parentCount, @@ -394,6 +396,7 @@ export default function NavigationSubmenuEdit( { rel: '', } ); } } + dropdownMenuProps={ dropdownMenuProps } > Date: Mon, 23 Dec 2024 12:40:29 +0700 Subject: [PATCH 06/83] Stylebook: add the Appearance -> Design submenu through `admin_menu` action (#68174) * Stylebook: add the Appearance -> Design submenu through admin_menu action * Add backport reference Co-authored-by: fushar Co-authored-by: ramonjd --- backport-changelog/6.8/7865.md | 3 ++- lib/compat/wordpress-6.8/site-editor.php | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/backport-changelog/6.8/7865.md b/backport-changelog/6.8/7865.md index f7b23c944dc327..b5de24b8ee63d3 100644 --- a/backport-changelog/6.8/7865.md +++ b/backport-changelog/6.8/7865.md @@ -1,3 +1,4 @@ https://github.com/WordPress/wordpress-develop/pull/7865 -* https://github.com/WordPress/gutenberg/pull/66851 \ No newline at end of file +* https://github.com/WordPress/gutenberg/pull/66851 +* https://github.com/WordPress/gutenberg/pull/68174 diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php index 53d04c2e543f48..9b2575676047d1 100644 --- a/lib/compat/wordpress-6.8/site-editor.php +++ b/lib/compat/wordpress-6.8/site-editor.php @@ -145,4 +145,4 @@ function gutenberg_add_styles_submenu_item() { } } } -add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' ); +add_action( 'admin_menu', 'gutenberg_add_styles_submenu_item' ); From 127eba0d098677fd90e007c293e5e7b3913cfe5b Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 23 Dec 2024 09:13:53 +0200 Subject: [PATCH 07/83] Storybook: Fix emotion/is-prop-valid warning (#68202) Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- package-lock.json | 27 ++++++++++++++------------- package.json | 1 + 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd901baca24a96..6471460ae535d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@babel/runtime-corejs3": "7.25.7", "@babel/traverse": "7.25.7", "@emotion/babel-plugin": "11.11.0", + "@emotion/is-prop-valid": "1.2.2", "@emotion/jest": "11.7.1", "@emotion/native": "11.0.0", "@geometricpanda/storybook-addon-badges": "2.0.5", @@ -4467,6 +4468,19 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, "node_modules/@emotion/jest": { "version": "11.7.1", "resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz", @@ -4618,19 +4632,6 @@ } } }, - "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", - "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", - "dependencies": { - "@emotion/memoize": "^0.8.1" - } - }, - "node_modules/@emotion/styled/node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" - }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", diff --git a/package.json b/package.json index 792546d28582fe..de73148bd62450 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@babel/runtime-corejs3": "7.25.7", "@babel/traverse": "7.25.7", "@emotion/babel-plugin": "11.11.0", + "@emotion/is-prop-valid": "1.2.2", "@emotion/jest": "11.7.1", "@emotion/native": "11.0.0", "@geometricpanda/storybook-addon-badges": "2.0.5", From 5bc955d182dc08c98dd07a5afcf1f54728ef0d19 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:32:24 +0200 Subject: [PATCH 08/83] postcss-plugins-preset: bump autoprefixer to 10.4.20 (#68237) * postcss-plugins-preset: bump autoprefixer to 10.4.20 * CHANGELOG Co-authored-by: tyxla Co-authored-by: gziolo --- package-lock.json | 93 ++++++++++++-------- packages/postcss-plugins-preset/CHANGELOG.md | 4 + packages/postcss-plugins-preset/package.json | 2 +- 3 files changed, 60 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6471460ae535d9..eb2059e151f539 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17514,43 +17514,6 @@ "integrity": "sha512-LEeSAWeh2Gfa2FtlQE1shxQ8zi5F9GHarrGKz08TMdODD5T4eH6BMsvtnhbWZ+XQn+Gb6om/917ucvRu7l7ukw==", "dev": true }, - "node_modules/autoprefixer": { - "version": "10.4.14", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", - "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - } - ], - "dependencies": { - "browserslist": "^4.21.5", - "caniuse-lite": "^1.0.30001464", - "fraction.js": "^4.2.0", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/autoprefixer/node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, "node_modules/autosize": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz", @@ -25666,6 +25629,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "dev": true, "engines": { "node": "*" }, @@ -51968,7 +51932,7 @@ "license": "GPL-2.0-or-later", "dependencies": { "@wordpress/base-styles": "*", - "autoprefixer": "^10.2.5" + "autoprefixer": "^10.4.20" }, "engines": { "node": ">=18.12.0", @@ -51978,6 +51942,59 @@ "postcss": "^8.0.0" } }, + "packages/postcss-plugins-preset/node_modules/autoprefixer": { + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "packages/postcss-plugins-preset/node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, + "packages/postcss-plugins-preset/node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "packages/postcss-themes": { "name": "@wordpress/postcss-themes", "version": "6.14.0", diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md index b1425332402f50..f0e18614b0bdc7 100644 --- a/packages/postcss-plugins-preset/CHANGELOG.md +++ b/packages/postcss-plugins-preset/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- The bundled `autoprefixer` dependency has been updated from requiring `^10.2.5` to requiring `^10.4.20` (see [#68237](https://github.com/WordPress/gutenberg/pull/68237)). + ## 5.14.0 (2024-12-11) ## 5.13.0 (2024-11-27) diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json index caecfb0939863e..aba3012f4cd6bb 100644 --- a/packages/postcss-plugins-preset/package.json +++ b/packages/postcss-plugins-preset/package.json @@ -31,7 +31,7 @@ "main": "lib/index.js", "dependencies": { "@wordpress/base-styles": "*", - "autoprefixer": "^10.2.5" + "autoprefixer": "^10.4.20" }, "peerDependencies": { "postcss": "^8.0.0" From bedc00ac266f75a2fb0d6319ff8d9a6d42686d42 Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Mon, 23 Dec 2024 11:03:57 +0200 Subject: [PATCH 09/83] fix: remove extraneous param from `gutenberg_url()` call in `gutenberg_posts_dashboard()` (#66699) Co-authored-by: justlevine Co-authored-by: gziolo --- lib/experimental/posts/load.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experimental/posts/load.php b/lib/experimental/posts/load.php index 699534f1886f52..b6dd9d55a8d7d8 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' ); From d22e81bb32899268f4484ba230ad2019a27c4785 Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Mon, 23 Dec 2024 11:08:17 +0200 Subject: [PATCH 10/83] fix: deprecated `WP_Webfonts()` constructor takes no arguments (#66700) Co-authored-by: justlevine Co-authored-by: gziolo < gziolo@git.wordpress.org> --- lib/experimental/font-face/bc-layer/webfonts-deprecations.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experimental/font-face/bc-layer/webfonts-deprecations.php b/lib/experimental/font-face/bc-layer/webfonts-deprecations.php index 2534d8db165273..fb5e6b315dbdaf 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; From dda9e56376e6ad182cb28beb6f597e8b3bf56c7b Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Mon, 23 Dec 2024 11:10:39 +0200 Subject: [PATCH 11/83] fix: remove extraneous param from `remove_filter()` calls (#66697) Co-authored-by: justlevine Co-authored-by: gziolo --- lib/block-supports/elements.php | 8 ++++---- lib/block-supports/layout.php | 6 +++--- lib/block-supports/settings.php | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php index 35a41270a19800..f3243bc7178951 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 ddbd1917c30547..7d63074ccb09bb 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 b175fe778ce1b0..0246b5c039c86a 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 ); From 59683c1ec5cda75976c7fde7fe6079c0afd85173 Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Mon, 23 Dec 2024 11:12:12 +0200 Subject: [PATCH 12/83] fix: explicitly return false in `WP_Theme_JSON_Gutenberg::should_ovrride_preset()` (#66696) Co-authored-by: justlevine Co-authored-by: gziolo --- lib/class-wp-theme-json-gutenberg.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 778dcdbec78d96..25e69b859379d3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -3413,6 +3413,8 @@ protected static function should_override_preset( $theme_json, $path, $override return true; } + + return false; } /** From e354e499b184b405c4b23dd8bf9203de7625f983 Mon Sep 17 00:00:00 2001 From: Dovid Levine Date: Mon, 23 Dec 2024 11:14:03 +0200 Subject: [PATCH 13/83] chore: fix return type in WP_Duotone_Gutenberg::get_selector() (#66695) Co-authored-by: justlevine Co-authored-by: gziolo --- lib/class-wp-duotone-gutenberg.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index 5f3b1bb5cd6b11..cc49c320da6506 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; } /** From c9790844331f8a35da15d415f5775a80765e922b Mon Sep 17 00:00:00 2001 From: Anh Tran Date: Mon, 23 Dec 2024 16:20:35 +0700 Subject: [PATCH 14/83] Fix wrong `npm start` command (#65221) Co-authored-by: rilwis Co-authored-by: ndiego Co-authored-by: juanmaguitar --- .../fundamentals/javascript-in-the-block-editor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7accc5d4c2129d..4cd7c0b36fe86a 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. From 09eb60e037bd50be3e15cc62e11fb1dc0ea8ca87 Mon Sep 17 00:00:00 2001 From: Lovro Hrust <33687174+Lovor01@users.noreply.github.com> Date: Mon, 23 Dec 2024 10:33:41 +0100 Subject: [PATCH 15/83] Documenting innerBlocks in save function (#66689) There is an undocumented property 'innerBlocks' of props passed to save function. This change attempts to document it with example of use. Co-authored-by: Lovor01 Co-authored-by: gziolo --- .../block-api/block-edit-save.md | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md index 86721c77e463c6..a50a17b75cb54d 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. From 2e590d0553b02e5ec735fe8dfd8b2e23c5f1e569 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 Dec 2024 11:21:25 +0100 Subject: [PATCH 16/83] Tabs: use correct ariakit component for root component types (#68207) Co-authored-by: ciampo Co-authored-by: tyxla --- packages/components/src/tabs/types.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts index 959a82509a05d6..3e52f11481e85f 100644 --- a/packages/components/src/tabs/types.ts +++ b/packages/components/src/tabs/types.ts @@ -22,7 +22,7 @@ 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 @@ -33,7 +33,7 @@ export type TabsProps = { * * @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 +44,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,11 +55,11 @@ 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. @@ -69,7 +69,7 @@ export type TabsProps = { * itself will have focus and users will be able to navigate to it using * arrow keys.activeTabId */ - 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,11 +79,11 @@ 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: @@ -93,7 +93,7 @@ export type TabsProps = { * * @default "horizontal" */ - orientation?: Ariakit.TabStoreProps[ 'orientation' ]; + orientation?: Ariakit.TabProviderProps[ 'orientation' ]; }; export type TabListProps = { From f78c60c2deba5c7bc02e93474f5d8e2280cdec15 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 23 Dec 2024 11:22:32 +0100 Subject: [PATCH 17/83] Menu: use ariakit types (#68206) Co-authored-by: ciampo Co-authored-by: tyxla --- .../components/src/menu/checkbox-item.tsx | 3 +- packages/components/src/menu/item.tsx | 11 +- packages/components/src/menu/radio-item.tsx | 3 +- packages/components/src/menu/types.ts | 214 ++++++++++++------ 4 files changed, 165 insertions(+), 66 deletions(-) diff --git a/packages/components/src/menu/checkbox-item.tsx b/packages/components/src/menu/checkbox-item.tsx index ddb700b43324a6..69339387c3add5 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 84ff050bcc2236..a716cbcc89654c 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 5534a6b7f3e10c..28b3199d7d36b8 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/types.ts b/packages/components/src/menu/types.ts index f58b5bcc89b953..f9bb0782529d1f 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 {} From b73c95df51f92a00d925fd61b45c0a709047015a Mon Sep 17 00:00:00 2001 From: Damien Alleyne <31164683+d-alleyne@users.noreply.github.com> Date: Mon, 23 Dec 2024 06:54:51 -0400 Subject: [PATCH 18/83] Declare shadow presets as translatable in theme.json (#66675) Co-authored-by: d-alleyne Co-authored-by: swissspidy Co-authored-by: Mamaduka Co-authored-by: oandregal Co-authored-by: spacedmonkey --- backport-changelog/6.8/8031.md | 3 +++ lib/theme-i18n.json | 7 +++++++ 2 files changed, 10 insertions(+) create mode 100644 backport-changelog/6.8/8031.md diff --git a/backport-changelog/6.8/8031.md b/backport-changelog/6.8/8031.md new file mode 100644 index 00000000000000..96d06cc671e13e --- /dev/null +++ b/backport-changelog/6.8/8031.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/8031 + +* https://github.com/WordPress/gutenberg/pull/66675 diff --git a/lib/theme-i18n.json b/lib/theme-i18n.json index e4d14502132cbe..ce11ba036c9e79 100644 --- a/lib/theme-i18n.json +++ b/lib/theme-i18n.json @@ -45,6 +45,13 @@ } ] }, + "shadow": { + "presets": [ + { + "name": "Shadow name" + } + ] + }, "blocks": { "*": { "typography": { From 813c24be7cb64a045f845c0a8c6156c5793cce42 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Mon, 23 Dec 2024 21:55:24 +0900 Subject: [PATCH 19/83] Grid Visualizer: Improve observation logic (#68230) * Grid Visualizer: Improve observation logic * Add `class` to `attributeFilter` Co-authored-by: t-hamano Co-authored-by: talldan --- .../src/components/grid/grid-visualizer.js | 11 ++++++++++ .../block-editor/src/components/grid/utils.js | 20 ++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js index 81da0457ffc5ca..9d89866bbff5f7 100644 --- a/packages/block-editor/src/components/grid/grid-visualizer.js +++ b/packages/block-editor/src/components/grid/grid-visualizer.js @@ -62,6 +62,17 @@ const GridVisualizerGrid = forwardRef( observer.observe( element ); observers.push( observer ); } + + const mutationObserver = new window.MutationObserver( () => { + setGridInfo( getGridInfo( gridElement ) ); + } ); + mutationObserver.observe( gridElement, { + attributeFilter: [ 'style', 'class' ], + childList: true, + subtree: true, + } ); + observers.push( mutationObserver ); + return () => { for ( const observer of observers ) { observer.disconnect(); diff --git a/packages/block-editor/src/components/grid/utils.js b/packages/block-editor/src/components/grid/utils.js index fc012c645f0916..21014108085423 100644 --- a/packages/block-editor/src/components/grid/utils.js +++ b/packages/block-editor/src/components/grid/utils.js @@ -160,6 +160,21 @@ export function getGridInfo( gridElement ) { gridElement, 'grid-template-rows' ); + const borderTopWidth = getComputedCSS( gridElement, 'border-top-width' ); + const borderRightWidth = getComputedCSS( + gridElement, + 'border-right-width' + ); + const borderBottomWidth = getComputedCSS( + gridElement, + 'border-bottom-width' + ); + const borderLeftWidth = getComputedCSS( gridElement, 'border-left-width' ); + const paddingTop = getComputedCSS( gridElement, 'padding-top' ); + const paddingRight = getComputedCSS( gridElement, 'padding-right' ); + const paddingBottom = getComputedCSS( gridElement, 'padding-bottom' ); + const paddingLeft = getComputedCSS( gridElement, 'padding-left' ); + const numColumns = gridTemplateColumns.split( ' ' ).length; const numRows = gridTemplateRows.split( ' ' ).length; const numItems = numColumns * numRows; @@ -172,7 +187,10 @@ export function getGridInfo( gridElement ) { gridTemplateColumns, gridTemplateRows, gap: getComputedCSS( gridElement, 'gap' ), - padding: getComputedCSS( gridElement, 'padding' ), + paddingTop: `calc(${ paddingTop } + ${ borderTopWidth })`, + paddingRight: `calc(${ paddingRight } + ${ borderRightWidth })`, + paddingBottom: `calc(${ paddingBottom } + ${ borderBottomWidth })`, + paddingLeft: `calc(${ paddingLeft } + ${ borderLeftWidth })`, }, }; } From 080189e9acc01a16234fadeac0ab897da0abbecb Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Mon, 23 Dec 2024 18:40:59 +0530 Subject: [PATCH 20/83] Storybook: Add story for the Warning component (#68124) * doc: Add storybook for warning component * feat: Add story with actions, and secondary actions Co-authored-by: im3dabasia Co-authored-by: t-hamano --- .../components/warning/stories/index.story.js | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 packages/block-editor/src/components/warning/stories/index.story.js diff --git a/packages/block-editor/src/components/warning/stories/index.story.js b/packages/block-editor/src/components/warning/stories/index.story.js new file mode 100644 index 00000000000000..ee881059f302d7 --- /dev/null +++ b/packages/block-editor/src/components/warning/stories/index.story.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import Warning from '../'; + +const meta = { + title: 'BlockEditor/Warning', + component: Warning, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Displays a warning message with optional action buttons and secondary actions dropdown.', + }, + }, + }, + argTypes: { + children: { + control: 'text', + description: + 'Intended to represent the block to which the warning pertains.', + table: { + type: { summary: 'string|element' }, + }, + }, + className: { + control: 'text', + description: 'Classes to pass to element.', + table: { + type: { summary: 'string' }, + }, + }, + actions: { + control: 'object', + description: + 'An array of elements to be rendered as action buttons in the warning element.', + table: { + type: { summary: 'Element[]' }, + }, + }, + secondaryActions: { + control: 'object', + description: + 'An array of { title, onClick } to be rendered as options in a dropdown of secondary actions.', + table: { + type: { summary: '{ title: string, onClick: Function }[]' }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + args: { + children: __( 'This block ran into an issue.' ), + }, +}; + +export const WithActions = { + args: { + ...Default.args, + actions: [ + , + ], + }, +}; + +export const WithSecondaryActions = { + args: { + ...Default.args, + secondaryActions: [ + { title: __( 'Get help' ) }, + { title: __( 'Remove block' ) }, + ], + }, +}; From 27bb038623933c51d75d38da5a9c1a1e4be850f5 Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Mon, 23 Dec 2024 14:18:17 +0100 Subject: [PATCH 21/83] Add reset button to ColorGradientSettingsDropdown (#67800) * Add reset button to ColorGradientSettingsDropdown * Toggle if it is open, to avoid multiple selectors being open. * Always show reset button if hover is not supported. * Respect clearable setting to display the reset button. * Toggle if it is open, to avoid multiple selectors being open. * Apply suggestions from code review --------- Co-authored-by: juanfra Co-authored-by: t-hamano --- .../components/colors-gradients/dropdown.js | 65 ++++++++++++++++--- .../components/colors-gradients/style.scss | 5 ++ .../components/global-styles/color-panel.js | 3 + .../global-styles/shadows-edit-panel.js | 7 +- 4 files changed, 71 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js index 71b27c06e7ccfc..e667927bee7601 100644 --- a/packages/block-editor/src/components/colors-gradients/dropdown.js +++ b/packages/block-editor/src/components/colors-gradients/dropdown.js @@ -15,6 +15,13 @@ import { __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; +import { useRef } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { reset as resetIcon } from '@wordpress/icons'; /** * Internal dependencies @@ -76,7 +83,15 @@ const LabeledColorIndicator = ( { colorValue, label } ) => ( const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => { - const { colorValue, label } = settings; + const { + clearable, + colorValue, + gradientValue, + onColorChange, + onGradientChange, + label, + } = settings; + const colorButtonRef = useRef( undefined ); const toggleProps = { onClick: onToggle, @@ -85,15 +100,45 @@ const renderToggle = { 'is-open': isOpen } ), 'aria-expanded': isOpen, + ref: colorButtonRef, + }; + + const clearValue = () => { + if ( colorValue ) { + onColorChange(); + } else if ( gradientValue ) { + onGradientChange(); + } }; + const value = colorValue ?? gradientValue; + return ( - + <> + + { clearable && value && ( + - - ) } + 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' }, + }, }, }; From 603a41f1069fe9e0cb0cb7938a08bee3e5ffe017 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 24 Dec 2024 10:14:04 +1000 Subject: [PATCH 27/83] Block Supports: Revert stabilization of typography, border, skip serialization and default controls supports (#68163) * Revert "Global Styles: Fix handling of booleans when stabilizing block supports (#67552)" This reverts commit 4335c452609a747faffd74f25b4846d717679e4c. * Revert "Block Supports: Extend stabilization to common experimental block support flags (#67018)" This reverts commit 5513d7aecf085a7858cae0492acf213d65a436f6. * Revert "Borders: Stabilize border block supports within block processing (#66918)" This reverts commit b5ee9da93a85290630cca0e29895a8e3e209eed0. * Revert "Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports (#66849)" This reverts commit 457fcf8d331a92ae0c2e83db22c77f18b194da54. * Revert "Typography: Stabilize typography block supports within block processing (#63401)" This reverts commit 48341a13f7ca383830fecc328b3e7e3131ba831a. Co-authored-by: aaronrobertshaw Co-authored-by: ramonjd Co-authored-by: talldan --- backport-changelog/6.8/7069.md | 6 - docs/explanations/architecture/styles.md | 16 +- lib/block-supports/border.php | 28 +- lib/block-supports/typography.php | 24 +- lib/class-wp-theme-json-gutenberg.php | 8 +- lib/compat/wordpress-6.8/blocks.php | 145 ------ .../test/use-global-styles-output.js | 2 +- .../global-styles/use-global-styles-output.js | 2 +- packages/block-editor/src/hooks/border.js | 12 +- packages/block-editor/src/hooks/color.js | 2 +- packages/block-editor/src/hooks/dimensions.js | 4 +- .../block-editor/src/hooks/font-family.js | 2 +- packages/block-editor/src/hooks/style.js | 18 +- packages/block-editor/src/hooks/supports.js | 14 +- packages/block-editor/src/hooks/test/style.js | 3 +- packages/block-editor/src/hooks/typography.js | 12 +- packages/block-editor/src/hooks/utils.js | 2 +- packages/blocks/src/api/constants.js | 64 +-- .../blocks/src/store/process-block-type.js | 217 +------- .../src/store/test/private-selectors.js | 12 +- .../src/store/test/process-block-type.js | 490 ------------------ .../components/global-styles/screen-block.js | 5 +- packages/server-side-render/README.md | 2 +- phpunit/block-supports/border-test.php | 381 +------------- phpunit/block-supports/typography-test.php | 105 ---- 25 files changed, 139 insertions(+), 1437 deletions(-) delete mode 100644 backport-changelog/6.8/7069.md delete mode 100644 packages/blocks/src/store/test/process-block-type.js diff --git a/backport-changelog/6.8/7069.md b/backport-changelog/6.8/7069.md deleted file mode 100644 index 3e734637ddbb2f..00000000000000 --- 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/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index 5f5e73d1372f7b..68f09f04d21d32 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/lib/block-supports/border.php b/lib/block-supports/border.php index f890ed84566b7f..bd4c772675a5ed 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/typography.php b/lib/block-supports/typography.php index 21086b94f15c1a..a4719b7bdd4099 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-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 25e69b859379d3..3af123d96bcc5a 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', ); /** diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php index dc8747c04aec2f..6cfa98691020ef 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/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js index 93e5cc9afdbb3c..5022e8ba591dbb 100644 --- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js @@ -855,7 +855,7 @@ describe( 'global styles renderer', () => { it( 'should return block selectors data with old experimental selectors', () => { const imageSupports = { - border: { + __experimentalBorder: { radius: true, __experimentalSelector: 'img, .crop-area', }, diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 7bdc95d222142d..cd4ad0cea50e0d 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -47,7 +47,7 @@ const ELEMENT_CLASS_NAMES = { // List of block support features that can have their related styles // generated under their own feature level selector rather than the block's. const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { - border: 'border', + __experimentalBorder: 'border', color: 'color', spacing: 'spacing', typography: 'typography', diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 14b3dbf7669b3a..4ab4c69a41f311 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 2fecc10a311984..ef8984c9367853 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 c98cc34e4272c8..ffa4048b7740e3 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 e5d8e02ab8ec02..ba9a66a8bcf04f 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/style.js b/packages/block-editor/src/hooks/style.js index db2acd01665b60..998d13cfd22247 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 102b78bbb96e68..75f2bdf2dc219e 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 40e7169194b82e..2cfe299b8c8d91 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 160894eac4e610..cf3f4327c8f034 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 ac6e55efe4d3bd..4334f70b9d13bf 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/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index aaf6558c47bada..620dfcbb8599c0 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/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js index 0ca28a3c3e2070..bc7b1a0e10e774 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 2c173b96b0bcb1..ada2bd7c8cbcfe 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 82b2c1ad3080d7..00000000000000 --- 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/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 347d3cd1bc0a73..64f49574b6b03b 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -113,8 +113,9 @@ function ScreenBlock( { name, variation } ) { if ( settingsForBlockElement?.spacing?.blockGap && blockType?.supports?.spacing?.blockGap && - ( blockType?.supports?.spacing?.skipSerialization === true || - blockType?.supports?.spacing?.skipSerialization?.some?.( + ( blockType?.supports?.spacing?.__experimentalSkipSerialization === + true || + blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.( ( spacingType ) => spacingType === 'blockGap' ) ) ) { diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index ef7cd9bf0189c1..ba6fae302ca0a8 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -79,7 +79,7 @@ add_filter( 'rest_endpoints', 'add_rest_method'); ### skipBlockSupportAttributes -Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `skipSerialization`, all attributes and style properties are removed. +Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `__experimentalSkipSerialization`, all attributes and style properties are removed. - Type: `Boolean` - Required: No diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php index 510633b48aab59..858e4e92cc1740 100644 --- a/phpunit/block-supports/border-test.php +++ b/phpunit/block-supports/border-test.php @@ -128,11 +128,11 @@ public function test_flat_border_with_skipped_serialization() { 'test/flat-border-with-skipped-serialization', array( '__experimentalBorder' => array( - 'color' => true, - 'radius' => true, - 'width' => true, - 'style' => true, - 'skipSerialization' => true, + 'color' => true, + 'radius' => true, + 'width' => true, + 'style' => true, + '__experimentalSkipSerialization' => true, ), ) ); @@ -459,375 +459,4 @@ public function test_split_borders_with_named_colors() { $this->assertSame( $expected, $actual ); } - /** - * Tests that stabilized border supports will also apply to blocks using - * the experimental syntax, for backwards compatibility with existing blocks. - * - * @covers ::gutenberg_apply_border_support - */ - public function test_should_apply_experimental_border_supports() { - $this->test_block_name = 'test/experimental-border-supports'; - register_block_type( - $this->test_block_name, - array( - 'api_version' => 3, - 'attributes' => array( - 'style' => array( - 'type' => 'object', - ), - ), - 'supports' => array( - '__experimentalBorder' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - '__experimentalDefaultControls' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - ), - ), - ), - ) - ); - $registry = WP_Block_Type_Registry::get_instance(); - $block_type = $registry->get_registered( $this->test_block_name ); - $block_atts = array( - 'style' => array( - 'border' => array( - 'color' => '#72aee6', - 'radius' => '10px', - 'style' => 'dashed', - 'width' => '2px', - ), - ), - ); - - $actual = gutenberg_apply_border_support( $block_type, $block_atts ); - $expected = array( - 'class' => 'has-border-color', - 'style' => 'border-color:#72aee6;border-radius:10px;border-style:dashed;border-width:2px;', - ); - - $this->assertSame( $expected, $actual ); - } - - /** - * Tests that stabilized border supports are applied correctly. - * - * @covers ::gutenberg_apply_border_support - */ - public function test_should_apply_stabilized_border_supports() { - $this->test_block_name = 'test/stabilized-border-supports'; - register_block_type( - $this->test_block_name, - array( - 'api_version' => 3, - 'attributes' => array( - 'style' => array( - 'type' => 'object', - ), - ), - 'supports' => array( - 'border' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - '__experimentalDefaultControls' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - ), - ), - ), - ) - ); - $registry = WP_Block_Type_Registry::get_instance(); - $block_type = $registry->get_registered( $this->test_block_name ); - $block_atts = array( - 'style' => array( - 'border' => array( - 'color' => '#72aee6', - 'radius' => '10px', - 'style' => 'dashed', - 'width' => '2px', - ), - ), - ); - - $actual = gutenberg_apply_border_support( $block_type, $block_atts ); - $expected = array( - 'class' => 'has-border-color', - 'style' => 'border-color:#72aee6;border-radius:10px;border-style:dashed;border-width:2px;', - ); - - $this->assertSame( $expected, $actual ); - } - - /** - * Tests that experimental border support configuration gets stabilized correctly. - */ - public function test_should_stabilize_border_supports() { - $block_type_args = array( - 'supports' => array( - '__experimentalBorder' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - '__experimentalSkipSerialization' => true, - '__experimentalDefaultControls' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - ), - ), - ), - ); - - $actual = gutenberg_stabilize_experimental_block_supports( $block_type_args ); - $expected = array( - 'supports' => array( - 'border' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - 'skipSerialization' => true, - // Has to be kept due to core's `wp_should_skip_block_supports_serialization` only checking the experimental flag until 6.8. - '__experimentalSkipSerialization' => true, - 'defaultControls' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - ), - ), - ), - ); - - $this->assertSame( $expected, $actual, 'Stabilized border block support config does not match.' ); - } - - /** - * Tests the merging of border support configuration when stabilizing - * experimental config. Due to the ability to filter block type args, plugins - * or themes could filter using outdated experimental keys. While not every - * permutation of filtering can be covered, the majority of use cases are - * served best by merging configs based on the order they were defined if possible. - */ - public function test_should_stabilize_border_supports_using_order_based_merge() { - $experimental_border_config = array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - '__experimentalSkipSerialization' => true, - '__experimentalDefaultControls' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - ), - - /* - * The following simulates theme/plugin filtering using `__experimentalBorder` - * key but stable serialization and default control keys. - */ - 'skipSerialization' => false, - 'defaultControls' => array( - 'color' => true, - 'radius' => false, - 'style' => true, - 'width' => true, - ), - ); - $stable_border_config = array( - 'color' => true, - 'radius' => true, - 'style' => false, - 'width' => true, - 'skipSerialization' => false, - 'defaultControls' => array( - 'color' => true, - 'radius' => false, - 'style' => false, - 'width' => true, - ), - - /* - * The following simulates theme/plugin filtering using stable `border` key - * but experimental serialization and default control keys. - */ - '__experimentalSkipSerialization' => true, - '__experimentalDefaultControls' => array( - 'color' => false, - 'radius' => false, - 'style' => false, - 'width' => false, - ), - ); - - $experimental_first_args = array( - 'supports' => array( - '__experimentalBorder' => $experimental_border_config, - 'border' => $stable_border_config, - ), - ); - - $actual = gutenberg_stabilize_experimental_block_supports( $experimental_first_args ); - $expected = array( - 'supports' => array( - 'border' => array( - 'color' => true, - 'radius' => true, - 'style' => false, - 'width' => true, - 'skipSerialization' => true, - '__experimentalSkipSerialization' => true, - 'defaultControls' => array( - 'color' => false, - 'radius' => false, - 'style' => false, - 'width' => false, - ), - - ), - ), - ); - $this->assertSame( $expected, $actual, 'Merged stabilized border block support config does not match when experimental keys are first.' ); - - $stable_first_args = array( - 'supports' => array( - 'border' => $stable_border_config, - '__experimentalBorder' => $experimental_border_config, - ), - ); - - $actual = gutenberg_stabilize_experimental_block_supports( $stable_first_args ); - $expected = array( - 'supports' => array( - 'border' => array( - 'color' => true, - 'radius' => true, - 'style' => true, - 'width' => true, - 'skipSerialization' => false, - '__experimentalSkipSerialization' => false, - 'defaultControls' => array( - 'color' => true, - 'radius' => false, - 'style' => true, - 'width' => true, - ), - ), - ), - ); - $this->assertSame( $expected, $actual, 'Merged stabilized border block support config does not match when stable keys are first.' ); - } - - /** - * Tests that boolean border support configurations are handled correctly. - * - * @dataProvider data_boolean_border_supports - * - * @param array $supports The supports configuration to test. - * @param boolean|array $expected_value The expected final border support value. - */ - public function test_should_handle_boolean_border_supports( $supports, $expected_value ) { - $args = array( - 'supports' => $supports, - ); - - $actual = gutenberg_stabilize_experimental_block_supports( $args ); - - $this->assertSame( $expected_value, $actual['supports']['border'] ); - } - - /** - * Data provider for boolean border support tests. - * - * @return array Test parameters. - */ - public function data_boolean_border_supports() { - return array( - 'experimental true only' => array( - array( - '__experimentalBorder' => true, - ), - true, - ), - 'experimental false only' => array( - array( - '__experimentalBorder' => false, - ), - false, - ), - 'experimental true before stable false' => array( - array( - '__experimentalBorder' => true, - 'border' => false, - ), - false, - ), - 'stable true before experimental false' => array( - array( - 'border' => true, - '__experimentalBorder' => false, - ), - false, - ), - 'experimental array before stable boolean' => array( - array( - '__experimentalBorder' => array( - 'color' => true, - 'width' => true, - ), - 'border' => false, - ), - false, - ), - 'stable array before experimental boolean' => array( - array( - 'border' => array( - 'color' => true, - 'width' => true, - ), - '__experimentalBorder' => true, - ), - true, - ), - 'experimental boolean before stable array' => array( - array( - '__experimentalBorder' => true, - 'border' => array( - 'color' => true, - 'width' => true, - ), - ), - array( - 'color' => true, - 'width' => true, - ), - ), - 'stable boolean before experimental array' => array( - array( - 'border' => false, - '__experimentalBorder' => array( - 'color' => true, - 'width' => true, - ), - ), - array( - 'color' => true, - 'width' => true, - ), - ), - ); - } } diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 1804659c11af3c..eafd505db6ec65 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -283,111 +283,6 @@ public function test_should_generate_classname_for_font_family() { $this->assertSame( $expected, $actual ); } - /** - * Tests that stabilized typography supports will also apply to blocks using - * the experimental syntax, for backwards compatibility with existing blocks. - * - * @covers ::gutenberg_apply_typography_support - */ - public function test_should_apply_experimental_typography_supports() { - $this->test_block_name = 'test/experimental-typography-supports'; - register_block_type( - $this->test_block_name, - array( - 'api_version' => 3, - 'attributes' => array( - 'style' => array( - 'type' => 'object', - ), - ), - 'supports' => array( - 'typography' => array( - '__experimentalFontFamily' => true, - '__experimentalFontStyle' => true, - '__experimentalFontWeight' => true, - '__experimentalLetterSpacing' => true, - '__experimentalTextDecoration' => true, - '__experimentalTextTransform' => true, - ), - ), - ) - ); - $registry = WP_Block_Type_Registry::get_instance(); - $block_type = $registry->get_registered( $this->test_block_name ); - $block_atts = array( - 'fontFamily' => 'serif', - 'style' => array( - 'typography' => array( - 'fontStyle' => 'italic', - 'fontWeight' => 'bold', - 'letterSpacing' => '1px', - 'textDecoration' => 'underline', - 'textTransform' => 'uppercase', - ), - ), - ); - - $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); - $expected = array( - 'class' => 'has-serif-font-family', - 'style' => 'font-style:italic;font-weight:bold;text-decoration:underline;text-transform:uppercase;letter-spacing:1px;', - ); - - $this->assertSame( $expected, $actual ); - } - - /** - * Tests that stabilized typography supports are applied correctly. - * - * @covers ::gutenberg_apply_typography_support - */ - public function test_should_apply_stabilized_typography_supports() { - $this->test_block_name = 'test/experimental-typography-supports'; - register_block_type( - $this->test_block_name, - array( - 'api_version' => 3, - 'attributes' => array( - 'style' => array( - 'type' => 'object', - ), - ), - 'supports' => array( - 'typography' => array( - 'fontFamily' => true, - 'fontStyle' => true, - 'fontWeight' => true, - 'letterSpacing' => true, - 'textDecoration' => true, - 'textTransform' => true, - ), - ), - ) - ); - $registry = WP_Block_Type_Registry::get_instance(); - $block_type = $registry->get_registered( $this->test_block_name ); - $block_atts = array( - 'fontFamily' => 'serif', - 'style' => array( - 'typography' => array( - 'fontStyle' => 'italic', - 'fontWeight' => 'bold', - 'letterSpacing' => '1px', - 'textDecoration' => 'underline', - 'textTransform' => 'uppercase', - ), - ), - ); - - $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); - $expected = array( - 'class' => 'has-serif-font-family', - 'style' => 'font-style:italic;font-weight:bold;text-decoration:underline;text-transform:uppercase;letter-spacing:1px;', - ); - - $this->assertSame( $expected, $actual ); - } - /** * Tests generating font size values, including fluid formulae, from fontSizes preset. * From 23c6b88709a40754c81f25472f047ffa2b9eccb1 Mon Sep 17 00:00:00 2001 From: Ramon Date: Tue, 24 Dec 2024 12:03:04 +1100 Subject: [PATCH 28/83] Block supports: show selected item in font family select control (#68254) Co-authored-by: ramonjd Co-authored-by: talldan --- packages/block-editor/src/components/font-family/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 6a723bb24c48ec..b685e3990287fe 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -72,12 +72,14 @@ export default function FontFamilyControl( { ); } + const selectedValue = + options.find( ( option ) => option.key === value ) ?? ''; return ( onChange( selectedItem.key ) } options={ options } className={ clsx( 'block-editor-font-family-control', className, { From 64265ad22899433fbf8814280d11c0dc4be4b0bd Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Tue, 24 Dec 2024 08:27:19 +0530 Subject: [PATCH 29/83] Date Block: Add dropdown menu props to ToolsPanel component (#68018) * Date Block: Add dropdown menu props to ToolsPanel component * Fix Default formate spacing issue * Update DateFormatPicker component style * Fix CSS indentation * Remove unnecessary CSS ---- Co-authored-by: Sukhendu2002 Co-authored-by: talldan Co-authored-by: t-hamano --- packages/block-library/src/post-date/edit.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 6ac39c0f14798d..36de2f7e5d7255 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 } > From 182752e8c85cb228774adadfa701a9552c922c93 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 23 Dec 2024 19:04:06 -0800 Subject: [PATCH 30/83] =?UTF-8?q?Edit=20post:=20fix=20meta=20box=20pane?= =?UTF-8?q?=E2=80=99s=20pointer=20capture=20(#68252)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Unlinked contributors: remcokalf. Co-authored-by: stokesman Co-authored-by: talldan Co-authored-by: hanneslsm Co-authored-by: ellatrix --- packages/edit-post/src/components/layout/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b0a2b3f7d76b81..94db337d34f171 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -318,7 +318,9 @@ function MetaBoxesMain() { // the event to end the drag is captured by the target (resize handle) // whether or not it’s under the pointer. onPointerDown: ( { pointerId, target } ) => { - target.setPointerCapture( pointerId ); + if ( separatorRef.current.parentElement.contains( target ) ) { + target.setPointerCapture( pointerId ); + } }, onResizeStart: ( event, direction, elementRef ) => { if ( isAutoHeight ) { From cdace8181f07bf41b328bbdedc393c55cbd67536 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 24 Dec 2024 12:11:19 +0900 Subject: [PATCH 31/83] Page List block: Don't wrap Edit button with ToolsPanelItem component (#68248) Co-authored-by: t-hamano Co-authored-by: aaronrobertshaw Co-authored-by: talldan --- packages/block-library/src/page-list/edit.js | 30 ++++++++------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index ef927ecceccf2d..8f1409f864f9b9 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -359,24 +359,18 @@ export default function PageListEdit( { ) } { allowConvertToLinks && ( - false } - > -
-

{ convertDescription }

- -
- +
+

{ convertDescription }

+ +
) } From c3ca59b70c9807e78b45d22d0714be777da507fd Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 24 Dec 2024 11:23:00 +0800 Subject: [PATCH 32/83] Allow template part editing in write mode (#67372) * Allow template part editing in write mode * Update unit tests for template parts * Refine block editing mode calculation - allow editing of inner template part content blocks * Update tests for content blocks in template parts * Add content role to site logo block * Consider template parts a section in navigation mode * Allow content blocks to be explicitly disabled even when they have a derived mode First iteration of handling disabled blocks as derived block editing modes * Avoid showing template parts when edting a page in Write Mode * entries().some is not widely available, so switch to Array.from().some * Update test to show explicitly disabled block * Update unit tests * Remove unused argument * Add optimization for disabled blocks calculation * Avoid state updates when setting block editor modes to the same thing as they already are * Update DisableNonPageContentBlocks to not set block editor modes on all blocks at once * Try breaking DisableNonPageContentBlocks into separate useEffect calls ---- Unlinked contributors: xavier-lc. Co-authored-by: talldan Co-authored-by: getdave Co-authored-by: draganescu Co-authored-by: tellthemachines Co-authored-by: youknowriad Co-authored-by: ramonjd Co-authored-by: annezazu Co-authored-by: richtabor Co-authored-by: ntsekouras --- .../src/store/private-selectors.js | 20 +- packages/block-editor/src/store/reducer.js | 131 ++++++- packages/block-editor/src/store/selectors.js | 4 +- .../src/store/test/private-selectors.js | 62 +++- .../block-editor/src/store/test/reducer.js | 338 +++++++++--------- .../block-editor/src/store/test/selectors.js | 23 ++ .../src/post-author-name/block.json | 6 +- .../block-library/src/post-author/block.json | 6 +- .../block-library/src/post-date/block.json | 3 +- .../src/post-featured-image/block.json | 9 +- .../block-library/src/post-title/block.json | 9 +- .../block-library/src/site-logo/block.json | 6 +- .../block-library/src/site-title/block.json | 6 +- packages/blocks/src/api/utils.js | 12 + .../disable-non-page-content-blocks.js | 77 +++- 15 files changed, 482 insertions(+), 230 deletions(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index c46778d889b3e0..72b87a59e8f571 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 edae9c392c37de..fc3803462d8920 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 7f8ddc7a4be31c..31ee6778da8d0d 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 268d463f227d4d..07c133dbacafe3 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( @@ -166,10 +174,18 @@ describe( 'private selectors', () => { ).toBe( true ); } ); - it( 'should return true when top level block is disabled via inheritence and there are no editing modes within it', () => { + it( 'should return true when top level block is disabled via inheritance and there are no editing modes within it', () => { 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 dd1665d6736ada..6706ff2fbb59e2 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 51949bfd468ca8..388d592787b660 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-library/src/post-author-name/block.json b/packages/block-library/src/post-author-name/block.json index 68d2c49bd91056..23211f0bf5bf46 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 d66498c8ee3df9..c7f2f01550a613 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-date/block.json b/packages/block-library/src/post-date/block.json index 470bddae53bdfc..dadc0d2f489fee 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-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 8b431ffc625790..3cd144caa0cf42 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-title/block.json b/packages/block-library/src/post-title/block.json index ecb5053d6cd39e..5587d71b148d0c 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/site-logo/block.json b/packages/block-library/src/site-logo/block.json index 3bdbdc1b809ab1..1f5b3a5525e3ec 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 c75b1bc229beb9..8edf6b945f9ce2 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/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js index 1a215036496559..73c34ab3499d63 100644 --- a/packages/blocks/src/api/utils.js +++ b/packages/blocks/src/api/utils.js @@ -370,9 +370,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/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js index ae4fd1075fc261..ffbf1ac0625463 100644 --- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js +++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js @@ -16,9 +16,13 @@ import usePostContentBlocks from './use-post-content-blocks'; */ export default function DisableNonPageContentBlocks() { const contentOnlyIds = usePostContentBlocks(); - const templateParts = useSelect( ( select ) => { - const { getBlocksByName } = select( blockEditorStore ); - return getBlocksByName( 'core/template-part' ); + const { templateParts, isNavigationMode } = useSelect( ( select ) => { + const { getBlocksByName, isNavigationMode: _isNavigationMode } = + select( blockEditorStore ); + return { + templateParts: getBlocksByName( 'core/template-part' ), + isNavigationMode: _isNavigationMode(), + }; }, [] ); const disabledIds = useSelect( ( select ) => { @@ -32,38 +36,85 @@ export default function DisableNonPageContentBlocks() { const registry = useRegistry(); + // The code here is split into multiple `useEffects` calls. + // This is done to avoid setting/unsetting block editing modes multiple times unnecessarily. + // + // For example, the block editing mode of the root block (clientId: '') only + // needs to be set once, not when `contentOnlyIds` or `disabledIds` change. + // + // It's also unlikely that these different types of blocks are being inserted + // or removed at the same time, so using different effects reflects that. + useEffect( () => { + const { setBlockEditingMode, unsetBlockEditingMode } = + registry.dispatch( blockEditorStore ); + + setBlockEditingMode( '', 'disabled' ); + + return () => { + unsetBlockEditingMode( '' ); + }; + }, [ registry ] ); + useEffect( () => { const { setBlockEditingMode, unsetBlockEditingMode } = registry.dispatch( blockEditorStore ); registry.batch( () => { - setBlockEditingMode( '', 'disabled' ); for ( const clientId of contentOnlyIds ) { setBlockEditingMode( clientId, 'contentOnly' ); } - for ( const clientId of templateParts ) { - setBlockEditingMode( clientId, 'contentOnly' ); - } - for ( const clientId of disabledIds ) { - setBlockEditingMode( clientId, 'disabled' ); - } } ); return () => { registry.batch( () => { - unsetBlockEditingMode( '' ); for ( const clientId of contentOnlyIds ) { unsetBlockEditingMode( clientId ); } + } ); + }; + }, [ contentOnlyIds, registry ] ); + + useEffect( () => { + const { setBlockEditingMode, unsetBlockEditingMode } = + registry.dispatch( blockEditorStore ); + + registry.batch( () => { + if ( ! isNavigationMode ) { for ( const clientId of templateParts ) { - unsetBlockEditingMode( clientId ); + setBlockEditingMode( clientId, 'contentOnly' ); } + } + } ); + + return () => { + registry.batch( () => { + if ( ! isNavigationMode ) { + for ( const clientId of templateParts ) { + unsetBlockEditingMode( clientId ); + } + } + } ); + }; + }, [ templateParts, isNavigationMode, registry ] ); + + useEffect( () => { + const { setBlockEditingMode, unsetBlockEditingMode } = + registry.dispatch( blockEditorStore ); + + registry.batch( () => { + for ( const clientId of disabledIds ) { + setBlockEditingMode( clientId, 'disabled' ); + } + } ); + + return () => { + registry.batch( () => { for ( const clientId of disabledIds ) { unsetBlockEditingMode( clientId ); } } ); }; - }, [ templateParts, contentOnlyIds, disabledIds, registry ] ); + }, [ disabledIds, registry ] ); return null; } From 500883f7204ddb1347d77e0bcfd9e30ff3590d23 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 24 Dec 2024 13:03:32 +0400 Subject: [PATCH 33/83] Button: Update Settings text labels (#68265) Co-authored-by: Mamaduka Co-authored-by: t-hamano --- packages/block-library/src/button/edit.js | 4 ++-- test/e2e/specs/editor/blocks/buttons.spec.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index d00e522f5a5d2a..609aa955851076 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -125,14 +125,14 @@ function WidthPanel( { selectedWidth, setAttributes } ) { dropdownMenuProps={ dropdownMenuProps } > !! selectedWidth } onDeselect={ () => setAttributes( { width: undefined } ) } __nextHasNoMarginBottom > setAttributes( { width: newWidth } ) diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index c7fdc18429e11e..ad19af747238db 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -268,7 +268,7 @@ test.describe( 'Buttons', () => { .getByRole( 'tab', { name: 'Settings' } ) .click(); await page - .getByRole( 'radiogroup', { name: 'Button width' } ) + .getByRole( 'radiogroup', { name: 'Width' } ) .getByRole( 'radio', { name: '25%' } ) .click(); From af0e2778d8db0592c8e2d49e6f4ae94f3a9c9b41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Tue, 24 Dec 2024 10:32:07 +0100 Subject: [PATCH 34/83] Scripts: Use fork of `rtlcss-webpack-plugin` to fix issues with deps (#68201) * Scripts: Use fork of `rtlcss-webpack-plugin` to fix issues with dependencies * Update the changelog entry * Fix path in the moved plugin * Fix path to PhpFilePathsPlugin in webpack config Co-authored-by: gziolo Co-authored-by: manzoorwanijk Co-authored-by: stein2nd --- package-lock.json | 121 +----------------- package.json | 2 +- packages/scripts/CHANGELOG.md | 4 + packages/scripts/config/webpack.config.js | 8 +- packages/scripts/package.json | 2 +- .../php-file-paths-plugin/index.js} | 4 +- .../plugins/rtlcss-webpack-plugin/index.js | 66 ++++++++++ packages/scripts/utils/index.js | 2 - tools/webpack/blocks.js | 2 +- 9 files changed, 85 insertions(+), 126 deletions(-) rename packages/scripts/{utils/php-file-paths-plugin.js => plugins/php-file-paths-plugin/index.js} (92%) create mode 100644 packages/scripts/plugins/rtlcss-webpack-plugin/index.js diff --git a/package-lock.json b/package-lock.json index eb2059e151f539..b3632a1be21090 100644 --- a/package-lock.json +++ b/package-lock.json @@ -143,7 +143,7 @@ "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", - "rtlcss": "4.0.0", + "rtlcss": "4.3.0", "sass": "1.50.1", "sass-loader": "16.0.3", "semver": "7.5.4", @@ -17972,27 +17972,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 +41192,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 +41209,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" }, @@ -52464,7 +52357,7 @@ "react-refresh": "^0.14.0", "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", - "rtlcss-webpack-plugin": "^4.0.7", + "rtlcss": "^4.3.0", "sass": "^1.50.1", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", diff --git a/package.json b/package.json index de73148bd62450..f785a2c6385aca 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "redux": "5.0.1", "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", - "rtlcss": "4.0.0", + "rtlcss": "4.3.0", "sass": "1.50.1", "sass-loader": "16.0.3", "semver": "7.5.4", diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 42afdd02e0d605..b088d1ecb65ab9 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Internal + +- The bundled `rtlcss-webpack-plugin` dependency has been replaced with a modified fork of the plugin to fix issues with the original package ([#68201](https://github.com/WordPress/gutenberg/pull/68201)). + ## 30.7.0 (2024-12-11) ### Internal diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 1829da5cdc15da..c7be796c12c028 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -9,7 +9,6 @@ const browserslist = require( 'browserslist' ); const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' ); const { basename, dirname, relative, resolve, sep } = require( 'path' ); const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' ); -const RtlCssPlugin = require( 'rtlcss-webpack-plugin' ); const TerserPlugin = require( 'terser-webpack-plugin' ); const { realpathSync } = require( 'fs' ); const { sync: glob } = require( 'fast-glob' ); @@ -23,6 +22,8 @@ const postcssPlugins = require( '@wordpress/postcss-plugins-preset' ); /** * Internal dependencies */ +const PhpFilePathsPlugin = require( '../plugins/php-file-paths-plugin' ); +const RtlCssPlugin = require( '../plugins/rtlcss-webpack-plugin' ); const { fromConfigRoot, hasBabelConfig, @@ -35,7 +36,6 @@ const { getBlockJsonModuleFields, getBlockJsonScriptFields, fromProjectRoot, - PhpFilePathsPlugin, } = require( '../utils' ); const isProduction = process.env.NODE_ENV === 'production'; @@ -396,9 +396,7 @@ const scriptConfig = { filename: '[name].css', } ), // RtlCssPlugin to generate RTL CSS files. - new RtlCssPlugin( { - filename: `[name]-rtl.css`, - } ), + new RtlCssPlugin(), // React Fast Refresh. hasReactFastRefresh && new ReactRefreshWebpackPlugin(), // WP_NO_EXTERNALS global variable controls whether scripts' assets get diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 7b0d37a5344b25..168671d4cdf110 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -80,7 +80,7 @@ "react-refresh": "^0.14.0", "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", - "rtlcss-webpack-plugin": "^4.0.7", + "rtlcss": "^4.3.0", "sass": "^1.50.1", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", diff --git a/packages/scripts/utils/php-file-paths-plugin.js b/packages/scripts/plugins/php-file-paths-plugin/index.js similarity index 92% rename from packages/scripts/utils/php-file-paths-plugin.js rename to packages/scripts/plugins/php-file-paths-plugin/index.js index 6f95dae6505a80..df39e1626a8766 100644 --- a/packages/scripts/utils/php-file-paths-plugin.js +++ b/packages/scripts/plugins/php-file-paths-plugin/index.js @@ -6,7 +6,7 @@ const { validate } = require( 'schema-utils' ); /** * Internal dependencies */ -const { getPhpFilePaths } = require( './config' ); +const { getPhpFilePaths } = require( '../../utils' ); const phpFilePathsPluginSchema = { type: 'object', @@ -57,4 +57,4 @@ class PhpFilePathsPlugin { } } -module.exports = { PhpFilePathsPlugin }; +module.exports = PhpFilePathsPlugin; diff --git a/packages/scripts/plugins/rtlcss-webpack-plugin/index.js b/packages/scripts/plugins/rtlcss-webpack-plugin/index.js new file mode 100644 index 00000000000000..c46c01320c763e --- /dev/null +++ b/packages/scripts/plugins/rtlcss-webpack-plugin/index.js @@ -0,0 +1,66 @@ +/** + * Parts of this source were derived and modified from the package + * rtlcss-webpack-plugin, released under the MIT license. + * + * https://github.com/wix-incubator/rtlcss-webpack-plugin + * + * Copyright (c) 2018 Wix.com + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +/** + * External dependencies + */ +const path = require( 'node:path' ); +const rtlcss = require( 'rtlcss' ); +const webpack = require( 'webpack' ); + +const cssOnly = ( filename ) => path.extname( filename ) === '.css'; + +class RtlCssPlugin { + processAssets = ( compilation, callback ) => { + const chunks = Array.from( compilation.chunks ); + + // Explore each chunk (build output): + chunks.forEach( ( chunk ) => { + // Explore each asset filename generated by the chunk: + const files = Array.from( chunk.files ); + + files.filter( cssOnly ).forEach( ( filename ) => { + // Get the asset source for each file generated by the chunk: + const src = compilation.assets[ filename ].source(); + const dst = rtlcss.process( src ); + const dstFileName = compilation.getPath( '[name]-rtl.css', { + chunk, + cssFileName: filename, + } ); + + compilation.assets[ dstFileName ] = + new webpack.sources.RawSource( dst ); + chunk.files.add( dstFileName ); + } ); + } ); + + callback(); + }; + + apply( compiler ) { + compiler.hooks.compilation.tap( 'RtlCssPlugin', ( compilation ) => { + compilation.hooks.processAssets.tapAsync( + { + name: 'TPAStylePlugin.pluginName', + stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE, + }, + ( chunks, callback ) => + this.processAssets( compilation, callback ) + ); + } ); + } +} + +module.exports = RtlCssPlugin; diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js index cb7e592f83d554..dc4008b16197d6 100644 --- a/packages/scripts/utils/index.js +++ b/packages/scripts/utils/index.js @@ -29,7 +29,6 @@ const { getBlockJsonModuleFields, getBlockJsonScriptFields, } = require( './block-json' ); -const { PhpFilePathsPlugin } = require( './php-file-paths-plugin' ); module.exports = { fromProjectRoot, @@ -56,6 +55,5 @@ module.exports = { hasPostCSSConfig, hasPrettierConfig, hasProjectFile, - PhpFilePathsPlugin, spawnScript, }; diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index c05318d5b060f3..0bf72c58ba5688 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -8,7 +8,7 @@ const { realpathSync } = require( 'fs' ); /** * WordPress dependencies */ -const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' ); +const PhpFilePathsPlugin = require( '@wordpress/scripts/plugins/php-file-paths-plugin' ); /** * Internal dependencies From 58a72aff9cc12567a805eaf06356e726db710bd4 Mon Sep 17 00:00:00 2001 From: Shah Shalin <56588503+SH4LIN@users.noreply.github.com> Date: Tue, 24 Dec 2024 16:29:25 +0530 Subject: [PATCH 35/83] Media & Text: Correctly reset the 'useFeaturedImage' attribute (#68247) Co-authored-by: SH4LIN Co-authored-by: Mamaduka --- packages/block-library/src/media-text/edit.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index a946a499b26f21..57f51f004d8b69 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,6 +129,7 @@ function attributesFromMedia( { mediaLink: media.link || undefined, href: newHref, focalPoint: undefined, + useFeaturedImage: false, } ); }; } From 854a9bcc5c2640f0135cdcaf254a3dc314434d83 Mon Sep 17 00:00:00 2001 From: louwie17 Date: Tue, 24 Dec 2024 09:09:17 -0400 Subject: [PATCH 36/83] DataViews: add unit tests (#68205) Co-authored-by: louwie17 Co-authored-by: oandregal --- packages/dataviews/src/test/dataviews.tsx | 380 ++++++++++++++++++++++ 1 file changed, 380 insertions(+) create mode 100644 packages/dataviews/src/test/dataviews.tsx diff --git a/packages/dataviews/src/test/dataviews.tsx b/packages/dataviews/src/test/dataviews.tsx new file mode 100644 index 00000000000000..fb55bf8064622f --- /dev/null +++ b/packages/dataviews/src/test/dataviews.tsx @@ -0,0 +1,380 @@ +/** + * External dependencies + */ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +/** + * WordPress dependencies + */ +import { useMemo, useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import DataViews from '../components/dataviews'; +import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants'; +import type { Action, View } from '../types'; +import { filterSortAndPaginate } from '../filter-and-sort-data-view'; + +type Data = { + id: number; + title: string; + author?: number; + order?: number; +}; + +const DEFAULT_VIEW = { + type: 'table' as const, + search: '', + page: 1, + perPage: 10, + layout: {}, + filters: [], +}; + +const defaultLayouts = { + [ LAYOUT_TABLE ]: {}, + [ LAYOUT_GRID ]: {}, + [ LAYOUT_LIST ]: {}, +}; + +const fields = [ + { + id: 'title', + label: 'Title', + type: 'text' as const, + }, + { + id: 'order', + label: 'Order', + type: 'integer' as const, + }, + { + id: 'author', + label: 'Author', + type: 'integer' as const, + elements: [ + { value: 1, label: 'Jane' }, + { value: 2, label: 'John' }, + ], + }, + { + label: 'Image', + id: 'image', + render: ( { item }: { item: Data } ) => { + return ( + + + + ); + }, + enableSorting: false, + }, +]; + +const actions: Action< Data >[] = [ + { + id: 'delete', + label: 'Delete', + isDestructive: true, + supportsBulk: true, + RenderModal: () =>
Modal Content
, + }, +]; + +const data: Data[] = [ + { + id: 1, + title: 'Hello World', + author: 1, + order: 1, + }, + { + id: 2, + title: 'Homepage', + author: 2, + order: 1, + }, + { + id: 3, + title: 'Posts', + author: 2, + order: 1, + }, +]; + +function DataViewWrapper( { + view: additionalView, + ...props +}: Partial< Parameters< typeof DataViews< Data > >[ 0 ] > ) { + const [ view, setView ] = useState< View >( { + ...DEFAULT_VIEW, + fields: [ 'title', 'order', 'author' ], + ...additionalView, + } ); + + const { data: shownData, paginationInfo } = useMemo( () => { + return filterSortAndPaginate( data, view, props.fields || fields ); + }, [ view, props.fields ] ); + + const dataViewProps = { + getItemId: ( item: Data ) => item.id.toString(), + paginationInfo, + data: shownData, + view, + fields, + onChangeView: setView, + actions: [], + defaultLayouts, + ...props, + }; + + return ; +} + +// jest.useFakeTimers(); + +describe( 'DataViews component', () => { + it( 'should show "No results" if data is empty', () => { + render( ); + expect( screen.getByText( 'No results' ) ).toBeInTheDocument(); + } ); + + it( 'should filter results by "search" text, if field has enableGlobalSearch set to true', async () => { + const fieldsWithSearch = [ + { + ...fields[ 0 ], + enableGlobalSearch: true, + }, + fields[ 1 ], + ]; + render( + + ); + // Row count includes header. + expect( screen.getAllByRole( 'row' ).length ).toEqual( 2 ); + expect( screen.getByText( 'Hello World' ) ).toBeInTheDocument(); + } ); + + it( 'should display matched element label if field contains elements list', () => { + render( + + ); + expect( screen.getByText( 'Tim' ) ).toBeInTheDocument(); + } ); + + it( 'should render custom render function if defined in field definition', () => { + render( + { + return item.title?.toUpperCase(); + }, + }, + ] } + /> + ); + expect( screen.getByText( 'TEST TITLE' ) ).toBeInTheDocument(); + } ); + + describe( 'in table view', () => { + it( 'should display columns for each field', () => { + render( ); + const displayedColumnFields = fields.filter( ( field ) => + [ 'title', 'order', 'author' ].includes( field.id ) + ); + for ( const field of displayedColumnFields ) { + expect( + screen.getByRole( 'button', { name: field.label } ) + ).toBeInTheDocument(); + } + } ); + + it( 'should display the passed in data', () => { + render( ); + for ( const item of data ) { + expect( + screen.getAllByText( item.title )[ 0 ] + ).toBeInTheDocument(); + } + } ); + + it( 'should display title column if defined using titleField', () => { + render( + + ); + for ( const item of data ) { + expect( + screen.getAllByText( item.title )[ 0 ] + ).toBeInTheDocument(); + } + } ); + + it( 'should render actions column if actions are supported and passed in', () => { + render( ); + expect( screen.getByText( 'Actions' ) ).toBeInTheDocument(); + } ); + + it( 'should trigger the onClickItem callback if isItemClickable returns true and title field is clicked', async () => { + const onClickItemCallback = jest.fn(); + + render( + true } + onClickItem={ onClickItemCallback } + /> + ); + const titleField = screen.getByText( data[ 0 ].title ); + const user = userEvent.setup(); + await user.click( titleField ); + expect( onClickItemCallback ).toHaveBeenCalledWith( data[ 0 ] ); + } ); + } ); + + describe( 'in grid view', () => { + it( 'should display the passed in data', () => { + render( + + ); + for ( const item of data ) { + expect( + screen.getAllByText( item.title )[ 0 ] + ).toBeInTheDocument(); + } + } ); + + it( 'should render mediaField if defined', () => { + render( + + ); + for ( const item of data ) { + expect( + screen.getByTestId( 'image-field-' + item.id ) + ).toBeInTheDocument(); + } + } ); + + it( 'should render actions dropdown if actions are supported and passed in for each grid item', () => { + render( + + ); + expect( + screen.getAllByRole( 'button', { name: 'Actions' } ).length + ).toEqual( 3 ); + } ); + + it( 'should trigger the onClickItem callback if isItemClickable returns true and a media field is clicked', async () => { + const mediaClickItemCallback = jest.fn(); + + render( + true } + onClickItem={ mediaClickItemCallback } + /> + ); + const imageField = screen.getByTestId( + 'image-field-' + data[ 0 ].id + ); + const user = userEvent.setup(); + await user.click( imageField ); + expect( mediaClickItemCallback ).toHaveBeenCalledWith( data[ 0 ] ); + } ); + } ); + + describe( 'in list view', () => { + it( 'should display the passed in data', () => { + render( + + ); + for ( const item of data ) { + expect( + screen.getAllByText( item.title )[ 0 ] + ).toBeInTheDocument(); + } + } ); + + it( 'should render actions dropdown if actions are supported and passed in for each list item', () => { + render( + + ); + expect( + screen.getAllByRole( 'button', { name: 'Actions' } ).length + ).toEqual( 3 ); + } ); + } ); +} ); From 2ae525f45bb6e0aed696ef736aaee27a38471d5e Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 24 Dec 2024 14:09:58 +0100 Subject: [PATCH 37/83] Pages QuickEdit: add E2E tests (#68151) Co-authored-by: gigitux Co-authored-by: oandregal --- test/e2e/specs/site-editor/page-list.spec.js | 376 ++++++++++++++++++- 1 file changed, 368 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/site-editor/page-list.spec.js b/test/e2e/specs/site-editor/page-list.spec.js index fa9cb86cd1d62e..120ded6a2b6d06 100644 --- a/test/e2e/specs/site-editor/page-list.spec.js +++ b/test/e2e/specs/site-editor/page-list.spec.js @@ -2,19 +2,27 @@ * WordPress dependencies */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); +/** + * External dependencies + */ +const path = require( 'path' ); + +const createPages = async ( requestUtils ) => { + await requestUtils.createPage( { + title: 'Privacy Policy', + status: 'publish', + } ); + await requestUtils.createPage( { + title: 'Sample Page', + status: 'publish', + } ); +}; test.describe( 'Page List', () => { test.beforeAll( async ( { requestUtils } ) => { // Activate a theme with permissions to access the site editor. await requestUtils.activateTheme( 'emptytheme' ); - await requestUtils.createPage( { - title: 'Privacy Policy', - status: 'publish', - } ); - await requestUtils.createPage( { - title: 'Sample Page', - status: 'publish', - } ); + await createPages( requestUtils ); } ); test.afterAll( async ( { requestUtils } ) => { @@ -53,4 +61,356 @@ test.describe( 'Page List', () => { page.getByRole( 'searchbox', { name: 'Search' } ) ).toHaveValue( 'Privacy' ); } ); + + test.describe( 'Quick Edit Mode', () => { + const fields = { + featuredImage: { + performEdit: async ( page ) => { + const placeholder = page.getByRole( 'button', { + name: 'Choose an image…', + } ); + await placeholder.click(); + const mediaLibrary = page.getByRole( 'dialog' ); + const TEST_IMAGE_FILE_PATH = path.resolve( + __dirname, + '../../assets/10x10_e2e_test_image_z9T8jK.png' + ); + + const fileChooserPromise = + page.waitForEvent( 'filechooser' ); + await mediaLibrary.getByText( 'Select files' ).click(); + const fileChooser = await fileChooserPromise; + await fileChooser.setFiles( TEST_IMAGE_FILE_PATH ); + await mediaLibrary + .locator( '.media-frame-toolbar' ) + .waitFor( { + state: 'hidden', + } ); + + await mediaLibrary + .getByRole( 'button', { name: 'Select', exact: true } ) + .click(); + }, + assertInitialState: async ( page ) => { + const el = page.getByText( 'Choose an image…' ); + const placeholder = page.getByRole( 'button', { + name: 'Choose an image…', + } ); + await expect( el ).toBeVisible(); + await expect( placeholder ).toBeVisible(); + }, + assertEditedState: async ( page ) => { + const placeholder = page.getByRole( 'button', { + name: 'Choose an image…', + } ); + await expect( placeholder ).toBeHidden(); + const img = page.locator( + '.fields-controls__featured-image-image' + ); + await expect( img ).toBeVisible(); + }, + }, + statusVisibility: { + performEdit: async ( page ) => { + const statusAndVisibility = page.getByLabel( + 'Status & Visibility' + ); + await statusAndVisibility.click(); + const options = [ + 'Published', + 'Draft', + 'Pending Review', + 'Private', + ]; + + for ( const option of options ) { + await page + .getByRole( 'radio', { name: option } ) + .click(); + await expect( statusAndVisibility ).toContainText( + option + ); + + if ( option !== 'Private' ) { + await page + .getByRole( 'checkbox', { + name: 'Password protected', + } ) + .check(); + } + } + }, + assertInitialState: async ( page ) => { + const statusAndVisibility = page.getByLabel( + 'Status & Visibility' + ); + await expect( statusAndVisibility ).toContainText( + 'Published' + ); + }, + assertEditedState: async ( page ) => { + const statusAndVisibility = page.getByLabel( + 'Status & Visibility' + ); + await expect( statusAndVisibility ).toContainText( + 'Private' + ); + }, + }, + author: { + assertInitialState: async ( page ) => { + const author = page.getByLabel( 'Author' ); + await expect( author ).toContainText( 'admin' ); + }, + performEdit: async ( page ) => { + const author = page.getByLabel( 'Author' ); + await author.click(); + const selectElement = page.locator( + 'select:has(option[value="1"])' + ); + await selectElement.selectOption( { value: '1' } ); + }, + assertEditedState: async () => {}, + }, + date: { + assertInitialState: async ( page ) => { + const dateEl = page.getByLabel( 'Edit Date' ); + const date = new Date(); + const yy = String( date.getFullYear() ); + + await expect( dateEl ).toContainText( yy ); + }, + performEdit: async ( page ) => { + const dateEl = page.getByLabel( 'Edit Date' ); + await dateEl.click(); + const date = new Date(); + const yy = Number( date.getFullYear() ); + const yyEl = page.locator( + `input[type="number"][value="${ yy }"]` + ); + + await yyEl.focus(); + await page.keyboard.press( 'ArrowUp' ); + }, + assertEditedState: async ( page ) => { + const date = new Date(); + const yy = Number( date.getFullYear() ); + const dateEl = page.getByLabel( 'Edit Date' ); + await expect( dateEl ).toContainText( String( yy + 1 ) ); + }, + }, + slug: { + assertInitialState: async ( page ) => { + const slug = page.getByLabel( 'Edit Slug' ); + await expect( slug ).toContainText( 'privacy-policy' ); + }, + performEdit: async ( page ) => { + const slug = page.getByLabel( 'Edit Slug' ); + await slug.click(); + await expect( + page.getByRole( 'link', { + name: 'http://localhost:8889/?', + } ) + ).toBeVisible(); + }, + assertEditedState: async () => {}, + }, + parent: { + assertInitialState: async ( page ) => { + const parent = page.getByLabel( 'Edit Parent' ); + await expect( parent ).toContainText( 'None' ); + }, + performEdit: async ( page ) => { + const parent = page.getByLabel( 'Edit Parent' ); + await parent.click(); + await page + .getByLabel( 'Parent', { exact: true } ) + .fill( 'Sample' ); + + await page + .getByRole( 'option', { name: 'Sample Page' } ) + .click(); + }, + assertEditedState: async ( page ) => { + const parent = page.getByLabel( 'Edit Parent' ); + await expect( parent ).toContainText( 'Sample Page' ); + }, + }, + // TODO: Wrap up this test once https://github.com/WordPress/gutenberg/issues/68173 is fixed + // template: { + // assertInitialState: async ( page ) => { + // const template = page.getByRole( 'button', { + // name: 'Single Entries', + // } ); + // await expect( template ).toContainText( 'Single Entries' ); + // }, + // edit: async ( page ) => { + // const template = page.getByRole( 'button', { + // name: 'Single Entries', + // } ); + // await template.click(); + // await page + // .getByRole( 'menuitem', { name: 'Swap template' } ) + // .click(); + // }, + // assertEditedState: async ( page ) => { + // + // }, + // }, + discussion: { + assertInitialState: async ( page ) => { + const discussion = page.getByLabel( 'Edit Discussion' ); + await expect( discussion ).toContainText( 'Closed' ); + }, + performEdit: async ( page ) => { + const discussion = page.getByLabel( 'Edit Discussion' ); + await discussion.click(); + await page + .getByLabel( 'Open', { + exact: true, + } ) + .check(); + }, + assertEditedState: async ( page ) => { + const discussion = page.getByLabel( 'Edit Discussion' ); + await expect( discussion ).toContainText( 'Open' ); + }, + }, + }; + + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.setGutenbergExperiments( [ + 'gutenberg-quick-edit-dataviews', + ] ); + } ); + + test.beforeEach( async ( { admin, page } ) => { + await admin.visitSiteEditor(); + await page.getByRole( 'button', { name: 'Pages' } ).click(); + await page.getByRole( 'button', { name: 'Layout' } ).click(); + await page.getByRole( 'menuitemradio', { name: 'Table' } ).click(); + const privacyPolicyCheckbox = page.getByRole( 'checkbox', { + name: 'Select Item: Privacy Policy', + } ); + + await privacyPolicyCheckbox.check(); + + await page.getByRole( 'button', { name: 'Details' } ).click(); + } ); + + Object.entries( fields ).forEach( + ( [ + key, + { performEdit, assertInitialState, assertEditedState }, + ] ) => { + // Asserts are done in the individual functions + // eslint-disable-next-line playwright/expect-expect + test( `should initialize, edit, and update ${ key } field correctly`, async ( { + page, + } ) => { + await assertInitialState( page ); + await performEdit( page ); + await assertEditedState( page ); + } ); + } + ); + + test( 'should save multiple field changes and update Data Views UI', async ( { + page, + requestUtils, + } ) => { + const selectedItem = page.locator( '.is-selected' ); + const imagePlaceholder = selectedItem.locator( + '.fields-controls__featured-image-placeholder' + ); + const status = selectedItem.getByRole( 'cell', { + name: 'Published', + } ); + await expect( status ).toBeVisible(); + + const { featuredImage, statusVisibility } = fields; + await statusVisibility.performEdit( page ); + await featuredImage.performEdit( page ); + // Ensure that no dropdown is open + await page.getByRole( 'button', { name: 'Close' } ).click(); + const saveButton = page.getByLabel( 'Review 1 change…' ); + await saveButton.click(); + await page.getByRole( 'button', { name: 'Save' } ).click(); + const updatedStatus = selectedItem.getByRole( 'cell', { + name: 'Private', + } ); + await expect( imagePlaceholder ).toBeHidden(); + await expect( updatedStatus ).toBeVisible(); + + // Reset the page to its original state + await requestUtils.deleteAllPages(); + await createPages( requestUtils ); + } ); + + // TODO: Wrap up this test once https://github.com/WordPress/gutenberg/pull/67584 is merged + // test( 'should update pages according to the changes', async ( { + // page, + // } ) => { + // const samplePage = page.getByRole( 'checkbox', { + // name: 'Select Item: Sample Page', + // } ); + + // await samplePage.check(); + + // const table = page.getByRole( 'table' ); + + // const selectedItems = table.locator( '.is-selected', { + // strict: false, + // } ); + + // expect( await selectedItems.all() ).toHaveLength( 2 ); + + // const imagePlaceholders = selectedItems.locator( + // '.fields-controls__featured-image-placeholder', + // { strict: false } + // ); + + // for ( const imagePlaceholder of await imagePlaceholders.all() ) { + // await expect( imagePlaceholder ).toBeVisible(); + // } + + // const statuses = selectedItems.getByRole( 'cell', { + // name: 'Public', + // } ); + + // for ( const status of await statuses.all() ) { + // await expect( status ).toBeVisible(); + // } + + // const { featuredImage, statusVisibility } = fields; + // await statusVisibility.edit( page ); + // await featuredImage.edit( page ); + // // Ensure that no dropdown is open + // await page.getByRole( 'button', { name: 'Close' } ).click(); + // const saveButton = page.getByLabel( 'Review 1 change…' ); + // await saveButton.click(); + // await page.getByRole( 'button', { name: 'Save' } ).click(); + // const updatedStatus = selectedItems.getByRole( + // 'cell', + // { + // name: 'Private', + // }, + // { + // strict: false, + // } + // ); + + // for ( const imagePlaceholder of await imagePlaceholders.all() ) { + // await expect( imagePlaceholder ).toBeHidden(); + // } + + // for ( const status of await updatedStatus.all() ) { + // await expect( status ).toBeVisible(); + // } + // } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.setGutenbergExperiments( [] ); + } ); + } ); } ); From 75ef79ec8dc0ecefe4c3b180ca69d39a5445d02e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 24 Dec 2024 15:56:34 +0100 Subject: [PATCH 38/83] DataViews: use `action.disabled` to disable action buttons (#68275) Co-authored-by: oandregal Co-authored-by: youknowriad --- .../dataviews/src/components/dataviews-item-actions/index.tsx | 4 +++- packages/dataviews/src/dataviews-layouts/list/index.tsx | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index 0031663ea10e78..70df04e4333e6f 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx @@ -75,6 +75,8 @@ function ButtonTrigger< Item >( { - ) } - /> - - { !! poster && ( - - ) } - - - + +
{ /* diff --git a/packages/block-library/src/video/poster-image.js b/packages/block-library/src/video/poster-image.js new file mode 100644 index 00000000000000..cde95f974d8e69 --- /dev/null +++ b/packages/block-library/src/video/poster-image.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + Button, + BaseControl, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { useRef } from '@wordpress/element'; + +function PosterImage( { poster, setAttributes, instanceId } ) { + const posterImageButton = useRef(); + const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ]; + + const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; + + function onSelectPoster( image ) { + setAttributes( { poster: image.url } ); + } + + function onRemovePoster() { + setAttributes( { poster: undefined } ); + + // Move focus back to the Media Upload button. + posterImageButton.current.focus(); + } + + return ( + !! poster } + onDeselect={ () => { + setAttributes( { poster: '' } ); + } } + > + +
+ + { __( 'Poster image' ) } + + ( + + ) } + /> + + { !! poster && ( + + ) } +
+ + + ); +} + +export default PosterImage; From 5c7f039bf6804449ec09723f37179d76355c14d7 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 27 Dec 2024 13:26:46 +0400 Subject: [PATCH 60/83] Media & Text: Optimize block editor store subscriptions (#68290) * Media & Text: Optimize block editor store subscriptions * Colocate media details store selectors * Set default value Co-authored-by: Mamaduka --- packages/block-library/src/media-text/edit.js | 66 ++++++++++++------- 1 file changed, 43 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index cebb2f8d52ae1b..820c7927303114 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -134,6 +134,32 @@ function attributesFromMedia( { }; } +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, @@ -154,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', @@ -182,6 +208,20 @@ function MediaTextEdit( { [ featuredImage, useFeaturedImage ] ); + const { image } = useSelect( + ( select ) => { + return { + image: + mediaId && isSelected + ? select( coreStore ).getMedia( mediaId, { + context: 'view', + } ) + : null, + }; + }, + [ isSelected, mediaId ] + ); + const featuredImageURL = useFeaturedImage ? featuredImageMedia?.source_url : ''; @@ -206,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; @@ -269,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 ); @@ -418,9 +438,9 @@ function MediaTextEdit( { ) } { mediaType === 'image' && ! useFeaturedImage && ( - ) } From a34eaca990facbfe1f981f39a9667432ccc6163f Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Fri, 27 Dec 2024 17:20:14 +0530 Subject: [PATCH 61/83] Table Block: Fix margin/padding to include caption in spacing (#68281) * Table Block: Apply margin styles to figure wrapper instead of table element * Table Block: Use Block Selectors API for margin styles * Migrate table block to use standardized selectors Co-authored-by: Infinite-Null Co-authored-by: t-hamano Co-authored-by: yogeshbhutkar Co-authored-by: andersnoren --- packages/block-library/src/table/block.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json index 11dd5b5f323e3b..2f0ea753f6f8de 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", From af49fcb8a20d10b27e2619c1e910ea03d9bae078 Mon Sep 17 00:00:00 2001 From: Himanshu Pathak Date: Fri, 27 Dec 2024 17:29:02 +0530 Subject: [PATCH 62/83] Storybook: Add stories for the ContrastChecker component (#68120) * Storybook: Add stories for the contrast-checker component * Storybook: Add default color values for initial component visibility Co-authored-by: himanshupathak95 Co-authored-by: t-hamano --- .../contrast-checker/stories/index.story.js | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 packages/block-editor/src/components/contrast-checker/stories/index.story.js diff --git a/packages/block-editor/src/components/contrast-checker/stories/index.story.js b/packages/block-editor/src/components/contrast-checker/stories/index.story.js new file mode 100644 index 00000000000000..4518ab2ba7cd67 --- /dev/null +++ b/packages/block-editor/src/components/contrast-checker/stories/index.story.js @@ -0,0 +1,117 @@ +/** + * Internal dependencies + */ +import ContrastChecker from '../'; + +const meta = { + title: 'BlockEditor/ContrastChecker', + component: ContrastChecker, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'Determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color.', + }, + }, + }, + argTypes: { + backgroundColor: { + control: 'color', + description: + 'The background color to check the contrast of text against.', + table: { + type: { + summary: 'string', + }, + }, + }, + fallbackBackgroundColor: { + control: 'color', + description: + 'A fallback background color value, in case `backgroundColor` is not available.', + table: { + type: { + summary: 'string', + }, + }, + }, + textColor: { + control: 'color', + description: + 'The text color to check the contrast of the background against.', + table: { + type: { + summary: 'string', + }, + }, + }, + fallbackTextColor: { + control: 'color', + description: + 'A fallback text color value, in case `textColor` is not available.', + table: { + type: { + summary: 'string', + }, + }, + }, + fontSize: { + control: 'number', + description: + 'The font-size (as a `px` value) of the text to check the contrast against.', + table: { + type: { + summary: 'number', + }, + }, + }, + isLargeText: { + control: 'boolean', + description: + 'Whether the text is large (approximately `24px` or higher).', + table: { + type: { + summary: 'boolean', + }, + }, + }, + linkColor: { + control: 'color', + description: 'The link color to check the contrast against.', + table: { + type: { + summary: 'string', + }, + }, + }, + fallbackLinkColor: { + control: 'color', + description: 'Fallback link color if linkColor is not available.', + table: { + type: { + summary: 'string', + }, + }, + }, + enableAlphaChecker: { + control: 'boolean', + description: 'Whether to enable checking for transparent colors.', + table: { + type: { + summary: 'boolean', + }, + defaultValue: { summary: false }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + args: { + backgroundColor: '#ffffff', + textColor: '#ffffff', + }, +}; From 80e79916a27f6142bb4d1b035875a57b4b74da0f Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 27 Dec 2024 04:05:36 -0800 Subject: [PATCH 63/83] Remove jsconfig.json to improve VS Code performance (#68347) --- jsconfig.json | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 jsconfig.json diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 204c9955c3cff1..00000000000000 --- a/jsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@wordpress/*": [ "./*", "./packages/*/src" ] - } - }, - "exclude": [ - "build", - "build-module", - "node_modules", - "packages/e2e-tests/plugins", - "vendor" - ] -} From f1fadbb036f1e702e3a28072444fd0de28a5dc02 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 27 Dec 2024 04:42:30 -0800 Subject: [PATCH 64/83] Fix tsconfig for test/ directory (#68346) * Add @types/node for test/ directory files * Update tsconfig for e2e and performance test directories * Add test/e2e and test/performance to root tsconfig references * Expect TS error * Remove declaration files * Clean up tsconfig * Use @types/node v 20 * Use a hack instead of ts-expect-error --- package-lock.json | 153 +++++++++--------- package.json | 1 + test/e2e/playwright.config.ts | 2 +- .../e2e/specs/interactivity/fixtures/index.ts | 4 +- test/e2e/tsconfig.json | 8 +- test/performance/playwright.config.ts | 2 +- test/performance/tsconfig.json | 8 +- tsconfig.json | 4 +- 8 files changed, 94 insertions(+), 88 deletions(-) diff --git a/package-lock.json b/package-lock.json index b3632a1be21090..057ccb17acc0b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,7 @@ "@types/estree": "1.0.5", "@types/istanbul-lib-report": "3.0.0", "@types/mime": "2.0.3", + "@types/node": "20.17.10", "@types/npm-package-arg": "6.1.1", "@types/prettier": "2.4.4", "@types/qs": "6.9.7", @@ -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", @@ -45301,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", @@ -46455,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", @@ -46625,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", @@ -46728,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", @@ -46985,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", diff --git a/package.json b/package.json index f785a2c6385aca..21b15a5fcc9ced 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@types/estree": "1.0.5", "@types/istanbul-lib-report": "3.0.0", "@types/mime": "2.0.3", + "@types/node": "20.17.10", "@types/npm-package-arg": "6.1.1", "@types/prettier": "2.4.4", "@types/qs": "6.9.7", diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts index f5410f2230372b..bb93f342f9bf8c 100644 --- a/test/e2e/playwright.config.ts +++ b/test/e2e/playwright.config.ts @@ -8,7 +8,7 @@ import { defineConfig, devices } from '@playwright/test'; /** * WordPress dependencies */ -const baseConfig = require( '@wordpress/scripts/config/playwright.config' ); +import baseConfig from '@wordpress/scripts/config/playwright.config.js'; const config = defineConfig( { ...baseConfig, diff --git a/test/e2e/specs/interactivity/fixtures/index.ts b/test/e2e/specs/interactivity/fixtures/index.ts index 607221ffb1ec43..08a72d20ef5ff7 100644 --- a/test/e2e/specs/interactivity/fixtures/index.ts +++ b/test/e2e/specs/interactivity/fixtures/index.ts @@ -18,8 +18,8 @@ export const test = base.extend< Fixtures >( { async ( { requestUtils }, use ) => { await use( new InteractivityUtils( { requestUtils } ) ); }, - // @ts-ignore: The required type is 'test', but can be 'worker' too. See + // This is a hack, 'worker' is a valid value but the type is wrong. // https://playwright.dev/docs/test-fixtures#worker-scoped-fixtures - { scope: 'worker' }, + { scope: 'worker' as 'test' }, ], } ); diff --git a/test/e2e/tsconfig.json b/test/e2e/tsconfig.json index 28d349fc19bef7..080d514f6f3634 100644 --- a/test/e2e/tsconfig.json +++ b/test/e2e/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/performance/playwright.config.ts b/test/performance/playwright.config.ts index fafca3a589122f..75e87c4d2d0f00 100644 --- a/test/performance/playwright.config.ts +++ b/test/performance/playwright.config.ts @@ -8,7 +8,7 @@ import { defineConfig } from '@playwright/test'; /** * WordPress dependencies */ -const baseConfig = require( '@wordpress/scripts/config/playwright.config' ); +import baseConfig from '@wordpress/scripts/config/playwright.config.js'; process.env.ASSETS_PATH = path.join( __dirname, 'assets' ); diff --git a/test/performance/tsconfig.json b/test/performance/tsconfig.json index 28d349fc19bef7..080d514f6f3634 100644 --- a/test/performance/tsconfig.json +++ b/test/performance/tsconfig.json @@ -2,11 +2,11 @@ "$schema": "https://json.schemastore.org/tsconfig.json", "extends": "../../tsconfig.base.json", "compilerOptions": { + "checkJs": false, "noEmit": true, - "emitDeclarationOnly": false, - "allowJs": true, - "checkJs": false + "rootDir": ".", + "types": [ "node" ] }, - "include": [ "**/*" ], + "include": [ "." ], "exclude": [] } diff --git a/tsconfig.json b/tsconfig.json index 93d0bd976dd005..55759b5015bfd2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -59,7 +59,9 @@ { "path": "packages/url" }, { "path": "packages/vips" }, { "path": "packages/warning" }, - { "path": "packages/wordcount" } + { "path": "packages/wordcount" }, + { "path": "test/e2e" }, + { "path": "test/performance" } ], "files": [] } From 1ba8152f09f6ffc30699145705ada748cf5e917e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 27 Dec 2024 22:33:37 +0900 Subject: [PATCH 65/83] DocumentTools: Use standard ToolbarButton for inserter (#68332) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- packages/editor/src/components/document-tools/index.js | 9 +++------ packages/editor/src/components/document-tools/style.scss | 6 ------ 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js index a98def685e93a6..71a8b1b094a135 100644 --- a/packages/editor/src/components/document-tools/index.js +++ b/packages/editor/src/components/document-tools/index.js @@ -10,7 +10,7 @@ import { useViewportMatch } from '@wordpress/compose'; import { useSelect, useDispatch } from '@wordpress/data'; import { __, _x } from '@wordpress/i18n'; import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor'; -import { Button, ToolbarItem } from '@wordpress/components'; +import { ToolbarButton, ToolbarItem } from '@wordpress/components'; import { listView, plus } from '@wordpress/icons'; import { useCallback } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; @@ -118,9 +118,8 @@ function DocumentTools( { className, disableBlockTools = false } ) { >
{ ! isDistractionFree && ( - { ! isDistractionFree && ( - ) } diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss index a1abfd5abd7aef..dfafff2126d66d 100644 --- a/packages/editor/src/components/document-tools/style.scss +++ b/packages/editor/src/components/document-tools/style.scss @@ -74,14 +74,8 @@ } .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon { - min-width: $button-size-compact; - width: $button-size-compact; - height: $button-size-compact; - padding: 0; - .show-icon-labels & { width: auto; - height: $button-size-compact; padding: 0 $grid-unit-10; } } From 011e7af71d2dfa01b6be2c2fa228e48a4f0e8490 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Fri, 27 Dec 2024 23:58:28 +0900 Subject: [PATCH 66/83] Block Editor Storybook: Restructure the directory and add badges to private components (#68352) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- .../dimensions-tool/stories/aspect-ratio-tool.story.js | 3 ++- .../src/components/dimensions-tool/stories/index.story.js | 3 ++- .../src/components/dimensions-tool/stories/scale-tool.story.js | 3 ++- .../dimensions-tool/stories/width-height-tool.story.js | 3 ++- .../src/components/resolution-tool/stories/index.story.js | 3 ++- .../components/text-alignment-control/stories/index.story.js | 1 + 6 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js index b853d780052942..aeb8a5f957425f 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js @@ -13,8 +13,9 @@ import { import AspectRatioTool from '../aspect-ratio-tool'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool', + title: 'BlockEditor/DimensionsTool/AspectRatioTool', component: AspectRatioTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js index ebf08fba0c686b..0ccfba2b9e97a6 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js @@ -13,8 +13,9 @@ import { import DimensionsTool from '..'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool', + title: 'BlockEditor/DimensionsTool/DimensionsTool', component: DimensionsTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js index b485bf68a892d9..ea0a3ec194beed 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js @@ -13,8 +13,9 @@ import { import ScaleTool from '../scale-tool'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool', + title: 'BlockEditor/DimensionsTool/ScaleTool', component: ScaleTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js index eed3cbc02f466e..86b3b4b22be60d 100644 --- a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js +++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js @@ -13,8 +13,9 @@ import { import WidthHeightTool from '../width-height-tool'; export default { - title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool', + title: 'BlockEditor/DimensionsTool/WidthHeightTool', component: WidthHeightTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js index 75db0f90a568bc..531618b38224f9 100644 --- a/packages/block-editor/src/components/resolution-tool/stories/index.story.js +++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.js @@ -13,8 +13,9 @@ import { import ResolutionTool from '..'; export default { - title: 'BlockEditor (Private APIs)/ResolutionControl', + title: 'BlockEditor/ResolutionControl', component: ResolutionTool, + tags: [ 'status-private' ], argTypes: { panelId: { control: false }, onChange: { action: 'changed' }, diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js index fd97f9b60e6a90..076535ab330d69 100644 --- a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js +++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js @@ -11,6 +11,7 @@ import TextAlignmentControl from '../'; const meta = { title: 'BlockEditor/TextAlignmentControl', component: TextAlignmentControl, + tags: [ 'status-private' ], parameters: { docs: { canvas: { sourceState: 'shown' }, From f95f5eed50392754d25d1de83d119e5868bd590d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 27 Dec 2024 21:04:40 +0400 Subject: [PATCH 67/83] Block Editor: Fix ESLint warnings for the 'useInnerBlockTemplateSync' hook (#68355) Co-authored-by: Mamaduka Co-authored-by: up1512001 --- .../use-inner-block-template-sync.js | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js index fd801779372aac..505785c87914d7 100644 --- a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js +++ b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js @@ -7,7 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6'; * WordPress dependencies */ import { useRef, useLayoutEffect } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useRegistry } from '@wordpress/data'; import { synchronizeBlocksWithTemplate } from '@wordpress/blocks'; /** @@ -42,14 +42,7 @@ export default function useInnerBlockTemplateSync( ) { // Instead of adding a useSelect mapping here, please add to the useSelect // mapping in InnerBlocks! Every subscription impacts performance. - - const { - getBlocks, - getSelectedBlocksInitialCaretPosition, - isBlockSelected, - } = useSelect( blockEditorStore ); - const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = - useDispatch( blockEditorStore ); + const registry = useRegistry(); // Maintain a reference to the previous value so we can do a deep equality check. const existingTemplateRef = useRef( null ); @@ -57,6 +50,14 @@ export default function useInnerBlockTemplateSync( useLayoutEffect( () => { let isCancelled = false; + const { + getBlocks, + getSelectedBlocksInitialCaretPosition, + isBlockSelected, + } = registry.select( blockEditorStore ); + const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = + registry.dispatch( blockEditorStore ); + // There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate // The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization), // we need to schedule this one in a microtask as well. @@ -110,5 +111,11 @@ export default function useInnerBlockTemplateSync( return () => { isCancelled = true; }; - }, [ template, templateLock, clientId ] ); + }, [ + template, + templateLock, + clientId, + registry, + templateInsertUpdatesSelection, + ] ); } From 962a5890e1e27e54a89e2fe5767ce18dcd58d1a9 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 28 Dec 2024 02:22:57 +0900 Subject: [PATCH 68/83] Components: Warn private API in auto-generated readmes (#68317) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- .../get-tags-from-storybook.mjs | 30 +++++++++++++++++++ bin/api-docs/gen-components-docs/index.mjs | 9 ++++++ .../gen-components-docs/markdown/index.mjs | 11 ++++++- packages/components/src/badge/README.md | 3 ++ .../src/badge/stories/index.story.tsx | 4 +-- 5 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs diff --git a/bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs b/bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs new file mode 100644 index 00000000000000..84d7beaf1e4076 --- /dev/null +++ b/bin/api-docs/gen-components-docs/get-tags-from-storybook.mjs @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import fs from 'node:fs/promises'; +import babel from '@babel/core'; + +/** + * Returns `meta.tags` from a Storybook file. + * + * @param {string} filePath + * @return {Promise} Array of tags. + */ +export async function getTagsFromStorybook( filePath ) { + const fileContent = await fs.readFile( filePath, 'utf8' ); + const parsedFile = babel.parse( fileContent, { + filename: filePath, + } ); + + const meta = parsedFile.program.body.find( + ( node ) => + node.type === 'VariableDeclaration' && + node.declarations[ 0 ].id.name === 'meta' + ); + + return ( + meta.declarations[ 0 ].init.properties + .find( ( node ) => node.key.name === 'tags' ) + ?.value.elements.map( ( node ) => node.value ) ?? [] + ); +} diff --git a/bin/api-docs/gen-components-docs/index.mjs b/bin/api-docs/gen-components-docs/index.mjs index c7109dc4982c36..30888acf851cab 100644 --- a/bin/api-docs/gen-components-docs/index.mjs +++ b/bin/api-docs/gen-components-docs/index.mjs @@ -11,6 +11,7 @@ import path from 'path'; */ import { generateMarkdownDocs } from './markdown/index.mjs'; import { getDescriptionsForSubcomponents } from './get-subcomponent-descriptions.mjs'; +import { getTagsFromStorybook } from './get-tags-from-storybook.mjs'; const MANIFEST_GLOB = 'packages/components/src/**/docs-manifest.json'; @@ -113,9 +114,17 @@ await Promise.all( } ) ?? [] ); + const tags = await getTagsFromStorybook( + path.resolve( + path.dirname( manifestPath ), + 'stories/index.story.tsx' + ) + ); + const docs = generateMarkdownDocs( { typeDocs, subcomponentTypeDocs, + tags, } ); const outputFile = path.resolve( path.dirname( manifestPath ), diff --git a/bin/api-docs/gen-components-docs/markdown/index.mjs b/bin/api-docs/gen-components-docs/markdown/index.mjs index b66aedaa144e7f..28e20dc3de12e0 100644 --- a/bin/api-docs/gen-components-docs/markdown/index.mjs +++ b/bin/api-docs/gen-components-docs/markdown/index.mjs @@ -18,10 +18,19 @@ 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.

`, }, diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 10767b2505039d..892f6e2eb741c7 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -2,6 +2,9 @@ +🔒 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 diff --git a/packages/components/src/badge/stories/index.story.tsx b/packages/components/src/badge/stories/index.story.tsx index 7f827d3bfabf5a..bbe0bef2a79472 100644 --- a/packages/components/src/badge/stories/index.story.tsx +++ b/packages/components/src/badge/stories/index.story.tsx @@ -8,12 +8,12 @@ import type { Meta, StoryObj } from '@storybook/react'; */ import Badge from '..'; -const meta = { +const meta: Meta< typeof Badge > = { component: Badge, title: 'Components/Containers/Badge', id: 'components-badge', tags: [ 'status-private' ], -} satisfies Meta< typeof Badge >; +}; export default meta; From 9ae31d376e4496034793c84e0450ddfbc4a46c50 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 28 Dec 2024 02:38:26 +0900 Subject: [PATCH 69/83] Badge: Fix up extra newline in readme (#68359) --- packages/components/src/badge/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/badge/README.md b/packages/components/src/badge/README.md index 892f6e2eb741c7..2100939684a856 100644 --- a/packages/components/src/badge/README.md +++ b/packages/components/src/badge/README.md @@ -4,7 +4,6 @@ 🔒 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 From b1f23ea21695f4c3f312a2322762da3ae18ed15a Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 27 Dec 2024 18:44:31 +0000 Subject: [PATCH 70/83] Fix: Editing "Page" is broken for low capability users. (#68110) Co-authored-by: jorgefilipecosta Co-authored-by: Mamaduka Co-authored-by: youknowriad Co-authored-by: vipul0425 Co-authored-by: Marc-pi --- packages/core-data/src/private-selectors.ts | 26 +++++++++++++++++-- .../editor/src/components/provider/index.js | 7 +++-- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts index 0d4a28ad174a19..fb0401509694ef 100644 --- a/packages/core-data/src/private-selectors.ts +++ b/packages/core-data/src/private-selectors.ts @@ -6,7 +6,12 @@ import { createSelector, createRegistrySelector } from '@wordpress/data'; /** * Internal dependencies */ -import { getDefaultTemplateId, getEntityRecord, type State } from './selectors'; +import { + canUser, + getDefaultTemplateId, + getEntityRecord, + type State, +} from './selectors'; import { STORE_NAME } from './name'; import { unlock } from './lock-unlock'; @@ -134,6 +139,13 @@ interface SiteData { export const getHomePage = createRegistrySelector( ( select ) => createSelector( () => { + const canReadSiteData = select( STORE_NAME ).canUser( 'read', { + kind: 'root', + name: 'site', + } ); + if ( ! canReadSiteData ) { + return null; + } const siteData = select( STORE_NAME ).getEntityRecord( 'root', 'site' @@ -156,7 +168,10 @@ export const getHomePage = createRegistrySelector( ( select ) => return { postType: 'wp_template', postId: frontPageTemplateId }; }, ( state ) => [ - getEntityRecord( state, 'root', 'site' ), + canUser( state, 'read', { + kind: 'root', + name: 'site', + } ) && getEntityRecord( state, 'root', 'site' ), getDefaultTemplateId( state, { slug: 'front-page', } ), @@ -165,6 +180,13 @@ export const getHomePage = createRegistrySelector( ( select ) => ); export const getPostsPageId = createRegistrySelector( ( select ) => () => { + const canReadSiteData = select( STORE_NAME ).canUser( 'read', { + kind: 'root', + name: 'site', + } ); + if ( ! canReadSiteData ) { + return null; + } const siteData = select( STORE_NAME ).getEntityRecord( 'root', 'site' ) as | SiteData | undefined; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index abdab284cfd138..1259eae623de93 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -163,6 +163,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( BlockEditorProviderComponent = ExperimentalBlockEditorProvider, __unstableTemplate: template, } ) => { + const hasTemplate = !! template; const { editorSettings, selection, @@ -195,7 +196,9 @@ export const ExperimentalEditorProvider = withRegistryProvider( isReady: __unstableIsEditorReady(), mode: getRenderingMode(), defaultMode: - postTypeObject?.default_rendering_mode ?? 'post-only', + hasTemplate && postTypeObject?.default_rendering_mode + ? postTypeObject?.default_rendering_mode + : 'post-only', selection: getEditorSelection(), postTypeEntities: post.type === 'wp_template' @@ -203,7 +206,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( : null, }; }, - [ post.type ] + [ post.type, hasTemplate ] ); const shouldRenderTemplate = !! template && mode !== 'post-only'; From 2ae1f243dde8f3eb0f298425954e14876d951425 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 27 Dec 2024 23:49:34 +0400 Subject: [PATCH 71/83] Editor: Remove HTML from the post title in the document bar (#68358) Co-authored-by: Mamaduka Co-authored-by: creativecoder --- packages/editor/src/components/document-bar/index.js | 3 ++- packages/editor/src/components/post-card-panel/index.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f5ca65dfe18ed7..544b5024d88a89 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -22,6 +22,7 @@ import { store as commandsStore } from '@wordpress/commands'; import { useRef, useEffect } from '@wordpress/element'; import { useReducedMotion } from '@wordpress/compose'; import { decodeEntities } from '@wordpress/html-entities'; +import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; /** * Internal dependencies @@ -200,7 +201,7 @@ export default function DocumentBar( props ) { { title - ? decodeEntities( title ) + ? stripHTML( title ) : __( 'No title' ) } { pageTypeBadge && ( diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 78f9522ba5f444..895545cb007f00 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -12,7 +12,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { decodeEntities } from '@wordpress/html-entities'; +import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; /** * Internal dependencies @@ -94,7 +94,7 @@ export default function PostCardPanel( { labels?.name ); } else if ( postTitle ) { - title = decodeEntities( postTitle ); + title = stripHTML( postTitle ); } return ( From cecc2814d0d3c6e04b393789960019760af747e2 Mon Sep 17 00:00:00 2001 From: Shail Mehta Date: Sat, 28 Dec 2024 09:20:09 +0530 Subject: [PATCH 72/83] Updated Small Typo in documentation (#68357) -------- Co-authored-by: shail-mehta Co-authored-by: t-hamano --- docs/getting-started/faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 8ac489e3c154a2..d9120cc58197e9 100644 --- a/docs/getting-started/faq.md +++ b/docs/getting-started/faq.md @@ -8,7 +8,7 @@ What follows is a set of questions that have come up from the last few years of “Gutenberg” is the name of the project to create a new editor experience for WordPress — contributors have been working on it since January 2017 and it’s one of the most significant changes to WordPress in years. It’s built on the idea of using “blocks” to write and design posts and pages. This will serve as the foundation for future improvements to WordPress, including blocks as a way not just to design posts and pages, but also entire sites. The overall goal is to simplify the first-time user experience of WordPress — for those who are writing, editing, publishing, and designing web pages. The editing experience is intended to give users a better visual representation of what their post or page will look like when they hit publish. Originally, this was the kickoff goal: -> The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. +> The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. Key takeaways include the following points: From b4304f8bf6bd9b890b4108adcc326cd586a3ab4e Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Sat, 28 Dec 2024 17:49:58 +0900 Subject: [PATCH 73/83] theme.json schema: Fix block list (#68343) Co-authored-by: t-hamano Co-authored-by: Mamaduka --- schemas/json/theme.json | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index a1f51ace920259..4eec377e3a94b9 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -922,6 +922,9 @@ "core/file": { "$ref": "#/definitions/settingsPropertiesComplete" }, + "core/footnotes": { + "$ref": "#/definitions/settingsPropertiesComplete" + }, "core/freeform": { "$ref": "#/definitions/settingsPropertiesComplete" }, @@ -1030,9 +1033,6 @@ "core/post-terms": { "$ref": "#/definitions/settingsPropertiesComplete" }, - "core/post-time-to-read": { - "$ref": "#/definitions/settingsPropertiesComplete" - }, "core/post-title": { "$ref": "#/definitions/settingsPropertiesComplete" }, @@ -1063,6 +1063,9 @@ "core/query-title": { "$ref": "#/definitions/settingsPropertiesComplete" }, + "core/query-total": { + "$ref": "#/definitions/settingsPropertiesComplete" + }, "core/quote": { "$ref": "#/definitions/settingsPropertiesComplete" }, @@ -1102,9 +1105,6 @@ "core/table": { "$ref": "#/definitions/settingsPropertiesComplete" }, - "core/table-of-contents": { - "$ref": "#/definitions/settingsPropertiesComplete" - }, "core/tag-cloud": { "$ref": "#/definitions/settingsPropertiesComplete" }, @@ -1902,6 +1902,9 @@ "core/file": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, + "core/footnotes": { + "$ref": "#/definitions/stylesPropertiesAndElementsComplete" + }, "core/freeform": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, @@ -2010,9 +2013,6 @@ "core/post-terms": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, - "core/post-time-to-read": { - "$ref": "#/definitions/stylesPropertiesAndElementsComplete" - }, "core/post-title": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, @@ -2043,6 +2043,9 @@ "core/query-title": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, + "core/query-total": { + "$ref": "#/definitions/stylesPropertiesAndElementsComplete" + }, "core/quote": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, @@ -2082,9 +2085,6 @@ "core/table": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, - "core/table-of-contents": { - "$ref": "#/definitions/stylesPropertiesAndElementsComplete" - }, "core/tag-cloud": { "$ref": "#/definitions/stylesPropertiesAndElementsComplete" }, @@ -2316,6 +2316,9 @@ "core/file": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, + "core/footnotes": { + "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" + }, "core/freeform": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, @@ -2424,9 +2427,6 @@ "core/post-terms": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, - "core/post-time-to-read": { - "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" - }, "core/post-title": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, @@ -2457,6 +2457,9 @@ "core/query-title": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, + "core/query-total": { + "$ref": "#/definitions/stylesPropertiesAndElementsComplete" + }, "core/quote": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, @@ -2496,9 +2499,6 @@ "core/table": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, - "core/table-of-contents": { - "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" - }, "core/tag-cloud": { "$ref": "#/definitions/stylesVariationBlockPropertiesComplete" }, From d0440b930f9122b52c178db25d652c569424cd85 Mon Sep 17 00:00:00 2001 From: Yogesh Bhutkar Date: Mon, 30 Dec 2024 13:55:59 +0530 Subject: [PATCH 74/83] FontSizePicker: Add `display: contents` rule to custom size select (#68280) Co-authored-by: yogeshbhutkar Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: Mamaduka Co-authored-by: himanshupathak95 Co-authored-by: SainathPoojary --- packages/components/CHANGELOG.md | 1 + packages/components/src/font-size-picker/styles.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7255888604ed12..8853f4c94e689b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ ### 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)). ### Experimental diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index f47ca41b51eb71..b0e33b5aea3a2e 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/packages/components/src/font-size-picker/styles.ts @@ -16,6 +16,7 @@ export const Container = styled.fieldset` border: 0; margin: 0; padding: 0; + display: contents; `; export const Header = styled( HStack )` From d463dbb49d0be2c9aabb76ece7e09d782fde9a46 Mon Sep 17 00:00:00 2001 From: Yogesh Bhutkar Date: Mon, 30 Dec 2024 14:05:16 +0530 Subject: [PATCH 75/83] Read More: Add example preview (#68288) * Read More: Add example preview * Read More: Update example to use localized text * refactor: remove the usage of context Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * fix: replace `_x` with `__` --------- Co-authored-by: yogeshbhutkar Co-authored-by: t-hamano Co-authored-by: ramonjd --- packages/block-library/src/read-more/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/read-more/index.js b/packages/block-library/src/read-more/index.js index 497cd77f429e62..f982f35151b4b8 100644 --- a/packages/block-library/src/read-more/index.js +++ b/packages/block-library/src/read-more/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { link as icon } from '@wordpress/icons'; /** @@ -16,6 +17,11 @@ export { metadata, name }; export const settings = { icon, edit, + example: { + attributes: { + content: __( 'Read more' ), + }, + }, }; export const init = () => initBlock( { name, metadata, settings } ); From 37a06bd005612adb558b3945f81e989114f90950 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Mon, 30 Dec 2024 18:13:06 +0900 Subject: [PATCH 76/83] Upgrade sass to version 1.54.0 (#68380) * Upgrade sass to version 1.54.0 * scripts:update changelog Co-authored-by: t-hamano Co-authored-by: sirreal --- package-lock.json | 10 +++++----- package.json | 2 +- packages/scripts/CHANGELOG.md | 1 + packages/scripts/package.json | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 057ccb17acc0b9..06e8c147a3e0e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -145,7 +145,7 @@ "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", "rtlcss": "4.3.0", - "sass": "1.50.1", + "sass": "1.54.0", "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", @@ -41552,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", @@ -52361,7 +52361,7 @@ "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", "rtlcss": "^4.3.0", - "sass": "^1.50.1", + "sass": "^1.54.0", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", "source-map-loader": "^3.0.0", diff --git a/package.json b/package.json index 21b15a5fcc9ced..8d90f3cbda43fd 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "resize-observer-polyfill": "1.5.1", "rimraf": "5.0.10", "rtlcss": "4.3.0", - "sass": "1.50.1", + "sass": "1.54.0", "sass-loader": "16.0.3", "semver": "7.5.4", "simple-git": "3.24.0", diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index b088d1ecb65ab9..60acec7de6461e 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -5,6 +5,7 @@ ### Internal - The bundled `rtlcss-webpack-plugin` dependency has been replaced with a modified fork of the plugin to fix issues with the original package ([#68201](https://github.com/WordPress/gutenberg/pull/68201)). +- The bundled `sass` dependency has been updated from `^1.50.0` to `^1.54.0` ([#68380](https://github.com/WordPress/gutenberg/pull/68380)). ## 30.7.0 (2024-12-11) diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 168671d4cdf110..e6f9cf39335a78 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -81,7 +81,7 @@ "read-pkg-up": "^7.0.1", "resolve-bin": "^0.4.0", "rtlcss": "^4.3.0", - "sass": "^1.50.1", + "sass": "^1.54.0", "sass-loader": "^16.0.3", "schema-utils": "^4.2.0", "source-map-loader": "^3.0.0", From a28455cc8ed7e652b7f1bec86822674c49a2c088 Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 30 Dec 2024 15:49:32 +0530 Subject: [PATCH 77/83] Storybook: Add BorderRadiusControl story (#67383) * Storybook: Add BorderRadiusControl story * Update BorderRadiusControl story to CSF 3 * Update BorderRadiusControl story to enhance argTypes documentation * Add README for BorderRadiusControl component * Update BorderRadiusControl README with correct prop requirements and defaults * Update BorderRadiusControl README and Story * Remove Unnecessary file * Update README Co-authored-by: Sukhendu2002 Co-authored-by: t-hamano --- .../border-radius-control/README.md | 59 +++++++++++++++++++ .../stories/index.story.js | 58 ++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 packages/block-editor/src/components/border-radius-control/README.md create mode 100644 packages/block-editor/src/components/border-radius-control/stories/index.story.js diff --git a/packages/block-editor/src/components/border-radius-control/README.md b/packages/block-editor/src/components/border-radius-control/README.md new file mode 100644 index 00000000000000..7b048dfdb7e0d2 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/README.md @@ -0,0 +1,59 @@ +# BorderRadiusControl + +`BorderRadiusControl` is a React component that provides a user interface for managing border radius values. It allows users to control the border radius of each corner independently or link them together for uniform values. + +## Usage + +```jsx +/** + * WordPress dependencies + */ +import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor'; +import { useState } from '@wordpress/element'; + +const MyBorderRadiusControl = () => { + const [values, setValues] = useState({ + topLeft: '10px', + topRight: '10px', + bottomLeft: '10px', + bottomRight: '10px', + }); + + return ( + + ); +}; +``` + +## Props + +### values + +An object containing the border radius values for each corner. + +- **Type:** `Object` +- **Required:** No +- **Default:** `undefined` + +The values object has the following schema: + +| Property | Description | Type | +| ----------- | ------------------------------------ | ------ | +| topLeft | Border radius for top left corner | string | +| topRight | Border radius for top right corner | string | +| bottomLeft | Border radius for bottom left corner | string | +| bottomRight | Border radius for bottom right corner| string | + +Each value should be a valid CSS border radius value (e.g., '10px', '1em'). + +### onChange + +Callback function that is called when any border radius value changes. + +- **Type:** `Function` +- **Required:** Yes + +The function receives the updated values object as its argument. \ No newline at end of file diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js new file mode 100644 index 00000000000000..28844a5e5cace1 --- /dev/null +++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BorderRadiusControl from '../'; + +const meta = { + title: 'BlockEditor/BorderRadiusControl', + component: BorderRadiusControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: 'Control to display border radius options.', + }, + }, + }, + argTypes: { + values: { + control: 'object', + description: 'Border radius values.', + table: { + type: { summary: 'object' }, + }, + }, + onChange: { + action: 'onChange', + control: { type: null }, + table: { + type: { summary: 'function' }, + }, + description: 'Callback to handle onChange.', + }, + }, +}; + +export default meta; + +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ values, setValues ] = useState( args.values ); + + return ( + { + setValues( ...changeArgs ); + onChange( ...changeArgs ); + } } + /> + ); + }, +}; From 4b847f9c0f550045c53e9630da398622283cee08 Mon Sep 17 00:00:00 2001 From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com> Date: Mon, 30 Dec 2024 20:12:18 +0530 Subject: [PATCH 78/83] Components: Fixing Text Contrast for Dark Mode (#68349) * fix: Fix darkmode label for text component * fix: darkmode for heading component * Fix snapshot tests * Fix Text test * CHANGELOG --------- Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Co-authored-by: im3dabasia Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 2 ++ .../test/__snapshots__/index.test.js.snap | 8 ++++---- packages/components/src/heading/hook.ts | 2 +- .../src/heading/test/__snapshots__/index.tsx.snap | 8 ++++---- packages/components/src/text/hook.ts | 4 ++-- packages/components/src/text/styles.ts | 2 +- .../components/src/text/test/__snapshots__/index.tsx.snap | 6 +++--- packages/components/src/text/test/index.tsx | 2 +- 8 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8853f4c94e689b..b12121bd3e189f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,8 @@ - `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)). - `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)). +- `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)). +- `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)). ### Deprecations diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap index fd6cc2df3fcde7..b1adfd5d9221ab 100644 --- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap @@ -63,7 +63,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = ` } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -345,7 +345,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = ` } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -637,7 +637,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`] } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`] } .emotion-12 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index d242afe1fdb2f5..132595d69c4f76 100644 --- a/packages/components/src/heading/hook.ts +++ b/packages/components/src/heading/hook.ts @@ -14,7 +14,7 @@ export function useHeading( const { as: asProp, level = 2, - color = COLORS.gray[ 900 ], + color = COLORS.theme.foreground, isBlock = true, weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ], ...otherProps diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap index cf863c4b2bb2ef..675810948404fe 100644 --- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap @@ -2,12 +2,12 @@ exports[`props should render correctly 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; text-wrap: pretty; - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); font-size: calc(1.95 * 13px); font-weight: 600; display: block; @@ -30,7 +30,7 @@ Snapshot Diff: @@ -1,10 +1,10 @@ Array [ Object { - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "display": "block", - "font-size": "calc(1.25 * 13px)", + "font-size": "calc(1.95 * 13px)", @@ -49,7 +49,7 @@ Snapshot Diff: @@ -1,10 +1,10 @@ Array [ Object { - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "display": "block", - "font-size": "calc(1.25 * 13px)", + "font-size": "calc(1.95 * 13px)", diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts index a447b2ce5133be..243b00202460eb 100644 --- a/packages/components/src/text/hook.ts +++ b/packages/components/src/text/hook.ts @@ -105,8 +105,8 @@ export default function useText( getOptimalTextShade( optimizeReadabilityFor ) === 'dark'; sx.optimalTextColor = isOptimalTextColorDark - ? css( { color: COLORS.gray[ 900 ] } ) - : css( { color: COLORS.white } ); + ? css( { color: COLORS.theme.foreground } ) + : css( { color: COLORS.theme.foregroundInverted } ); } return cx( diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts index e777ed4f0941de..7d3b70e2ab2390 100644 --- a/packages/components/src/text/styles.ts +++ b/packages/components/src/text/styles.ts @@ -9,7 +9,7 @@ import { css } from '@emotion/react'; import { COLORS, CONFIG } from '../utils'; export const Text = css` - color: ${ COLORS.gray[ 900 ] }; + color: ${ COLORS.theme.foreground }; line-height: ${ CONFIG.fontLineHeightBase }; margin: 0; text-wrap: balance; /* Fallback for Safari. */ diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap index 1b98c0853ac549..caa876cb24dc78 100644 --- a/packages/components/src/text/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap @@ -6,7 +6,7 @@ Snapshot Diff: + Base styles @@ -3,8 +3,9 @@ - "color": "#1e1e1e", + "color": "var(--wp-components-color-foreground, #1e1e1e)", "font-size": "calc((13 / 13) * 13px)", "font-weight": "normal", "line-height": "1.4", @@ -19,7 +19,7 @@ Snapshot Diff: exports[`Text should render highlighted words with highlightCaseSensitive 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; @@ -52,7 +52,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] = exports[`Text snapshot tests should render correctly 1`] = ` .emotion-0 { - color: #1e1e1e; + color: var(--wp-components-color-foreground, #1e1e1e); line-height: 1.4; margin: 0; text-wrap: balance; diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx index 5fad5582f4d46e..e6f6423b6b572d 100644 --- a/packages/components/src/text/test/index.tsx +++ b/packages/components/src/text/test/index.tsx @@ -25,7 +25,7 @@ describe( 'Text', () => { ); expect( screen.getByRole( 'heading' ) ).toHaveStyle( { - color: COLORS.white, + color: 'rgb( 255, 255, 255 )', } ); } ); From faf357ccfbd61ced3089d0fdf4344a34cafe29fe Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 31 Dec 2024 00:31:54 +0900 Subject: [PATCH 79/83] BoxControl: Fix `aria-valuetext` value (#68362) * BoxControl: Fix `aria-valuetext` value * Update changelog Co-authored-by: t-hamano Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 1 + packages/components/src/box-control/input-control.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b12121bd3e189f..9784a651027950 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -22,6 +22,7 @@ - `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)). - `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the custom size select. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)). +- `BoxControl`: Fix aria-valuetext value ([#68362](https://github.com/WordPress/gutenberg/pull/68362)). ### Experimental diff --git a/packages/components/src/box-control/input-control.tsx b/packages/components/src/box-control/input-control.tsx index 81fbcad42c1d08..27dff1991d8572 100644 --- a/packages/components/src/box-control/input-control.tsx +++ b/packages/components/src/box-control/input-control.tsx @@ -264,7 +264,7 @@ export default function BoxInputControl( { } aria-valuetext={ marks[ presetIndex !== undefined ? presetIndex + 1 : 0 ] - .label + .tooltip } renderTooltipContent={ ( index ) => marks[ ! index ? 0 : index ].tooltip From 8e2d0504d816f06812d7275de704ca38fee5505a Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 30 Dec 2024 23:09:29 +0530 Subject: [PATCH 80/83] Add example attribute for Comments block (#68266) Co-authored-by: Sukhendu2002 --- packages/block-library/src/comments/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/comments/index.js b/packages/block-library/src/comments/index.js index 21db8b986d6e5e..b907bd41e3c6a2 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, From bc28417b3a95c1ab8fb8f5c67a98dbf31a6cf3ec Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 30 Dec 2024 23:32:01 +0400 Subject: [PATCH 81/83] Editor: Remove constants for notices (#68361) Unlinked contributors: aduth. Co-authored-by: Mamaduka Co-authored-by: tyxla Co-authored-by: paaljoachim Co-authored-by: gziolo --- packages/editor/src/store/actions.js | 2 -- packages/editor/src/store/constants.ts | 2 -- packages/editor/src/store/utils/notice-builder.js | 11 +++-------- .../editor/src/store/utils/test/notice-builder.js | 7 +++---- 4 files changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 9d0de08718cd2b..6a628512f62bf7 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -23,7 +23,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { TRASH_POST_NOTICE_ID } from './constants'; import { localAutosaveSet } from './local-autosave'; import { getNotificationArgumentsForSaveSuccess, @@ -347,7 +346,6 @@ export const trashPost = const postType = await registry .resolveSelect( coreStore ) .getPostType( postTypeSlug ); - registry.dispatch( noticesStore ).removeNotice( TRASH_POST_NOTICE_ID ); const { rest_base: restBase, rest_namespace: restNamespace = 'wp/v2' } = postType; dispatch( { type: 'REQUEST_POST_DELETE_START' } ); diff --git a/packages/editor/src/store/constants.ts b/packages/editor/src/store/constants.ts index 73d6a104370c37..2cb0903453466e 100644 --- a/packages/editor/src/store/constants.ts +++ b/packages/editor/src/store/constants.ts @@ -11,8 +11,6 @@ export const EDIT_MERGE_PROPERTIES = new Set( [ 'meta' ] ); */ export const STORE_NAME = 'core/editor'; -export const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID'; -export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID'; export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/; export const ONE_MINUTE_IN_MS = 60 * 1000; export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ]; diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js index 58fc9ca0d747eb..9e1230b2ea88c5 100644 --- a/packages/editor/src/store/utils/notice-builder.js +++ b/packages/editor/src/store/utils/notice-builder.js @@ -3,11 +3,6 @@ */ import { __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../constants'; - /** * Builds the arguments for a success notification dispatch. * @@ -68,7 +63,7 @@ export function getNotificationArgumentsForSaveSuccess( data ) { return [ noticeMessage, { - id: SAVE_POST_NOTICE_ID, + id: 'editor-save', type: 'snackbar', actions, }, @@ -113,7 +108,7 @@ export function getNotificationArgumentsForSaveFail( data ) { return [ noticeMessage, { - id: SAVE_POST_NOTICE_ID, + id: 'editor-save', }, ]; } @@ -131,7 +126,7 @@ export function getNotificationArgumentsForTrashFail( data ) { ? data.error.message : __( 'Trashing failed' ), { - id: TRASH_POST_NOTICE_ID, + id: 'editor-trash-fail', }, ]; } diff --git a/packages/editor/src/store/utils/test/notice-builder.js b/packages/editor/src/store/utils/test/notice-builder.js index e66a96259680f7..d97ec0f9f9483b 100644 --- a/packages/editor/src/store/utils/test/notice-builder.js +++ b/packages/editor/src/store/utils/test/notice-builder.js @@ -6,7 +6,6 @@ import { getNotificationArgumentsForSaveFail, getNotificationArgumentsForTrashFail, } from '../notice-builder'; -import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../../constants'; describe( 'getNotificationArgumentsForSaveSuccess()', () => { const postType = { @@ -27,7 +26,7 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => { }; const post = { ...previousPost }; const defaultExpectedAction = { - id: SAVE_POST_NOTICE_ID, + id: 'editor-save', actions: [], type: 'snackbar', }; @@ -106,7 +105,7 @@ describe( 'getNotificationArgumentsForSaveFail()', () => { const error = { code: '42', message: 'Something went wrong.' }; const post = { status: 'publish' }; const edits = { status: 'publish' }; - const defaultExpectedAction = { id: SAVE_POST_NOTICE_ID }; + const defaultExpectedAction = { id: 'editor-save' }; [ [ 'when error code is `rest_autosave_no_changes`', @@ -190,7 +189,7 @@ describe( 'getNotificationArgumentsForTrashFail()', () => { ].forEach( ( [ description, error, message ] ) => { // eslint-disable-next-line jest/valid-title it( description, () => { - const expectedValue = [ message, { id: TRASH_POST_NOTICE_ID } ]; + const expectedValue = [ message, { id: 'editor-trash-fail' } ]; expect( getNotificationArgumentsForTrashFail( { error } ) ).toEqual( expectedValue ); From 3c716cf655aa3cb3da2b9d6efde7146db0783afc Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 31 Dec 2024 01:48:26 +0200 Subject: [PATCH 82/83] Site Editor: Fix obsolete `getLocationWithParams` usage (#68388) Unlinked contributors: JungleGenius. Co-authored-by: tyxla Co-authored-by: ramonjd Co-authored-by: himanshupathak95 --- .../src/components/add-new-pattern/index.js | 17 ++++++++++------- .../sidebar-dataviews/custom-dataviews-list.js | 11 ++++++----- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index 63452691c1c373..85a8c70f9c3359 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -25,7 +25,7 @@ import { TEMPLATE_PART_POST_TYPE, } from '../../utils/constants'; -const { useHistory } = unlock( routerPrivateApis ); +const { useHistory, useLocation } = unlock( routerPrivateApis ); const { CreatePatternModal, useAddPatternCategory } = unlock( editPatternsPrivateApis ); @@ -33,6 +33,7 @@ const { CreateTemplatePartModal } = unlock( editorPrivateApis ); export default function AddNewPattern() { const history = useHistory(); + const location = useLocation(); const [ showPatternModal, setShowPatternModal ] = useState( false ); const [ showTemplatePartModal, setShowTemplatePartModal ] = useState( false ); @@ -159,13 +160,12 @@ export default function AddNewPattern() { return; } try { - const { - params: { postType, categoryId }, - } = history.getLocationWithParams(); let currentCategoryId; // When we're not handling template parts, we should // add or create the proper pattern category. - if ( postType !== TEMPLATE_PART_POST_TYPE ) { + if ( + location.query.postType !== TEMPLATE_PART_POST_TYPE + ) { /* * categoryMap.values() returns an iterator. * Iterator.prototype.find() is not yet widely supported. @@ -173,7 +173,10 @@ export default function AddNewPattern() { */ const currentCategory = Array.from( categoryMap.values() - ).find( ( term ) => term.name === categoryId ); + ).find( + ( term ) => + term.name === location.query.categoryId + ); if ( currentCategory ) { currentCategoryId = currentCategory.id || @@ -194,7 +197,7 @@ export default function AddNewPattern() { // category. if ( ! currentCategoryId && - categoryId !== 'my-patterns' + location.query.categoryId !== 'my-patterns' ) { history.navigate( `/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }` diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js index 467648e814276d..463ce0003fba26 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js +++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js @@ -27,7 +27,7 @@ import DataViewItem from './dataview-item'; import AddNewItem from './add-new-view'; import { unlock } from '../../lock-unlock'; -const { useHistory } = unlock( routerPrivateApis ); +const { useHistory, useLocation } = unlock( routerPrivateApis ); const EMPTY_ARRAY = []; @@ -85,6 +85,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) { function CustomDataViewItem( { dataviewId, isActive } ) { const history = useHistory(); + const location = useLocation(); const { dataview } = useSelect( ( select ) => { const { getEditedEntityRecord } = select( coreStore ); @@ -145,10 +146,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) { } ); if ( isActive ) { - const { - params: { postType }, - } = history.getLocationWithParams(); - history.replace( { postType } ); + history.replace( { + postType: + location.query.postType, + } ); } onClose(); } } From e5dca5461c0699b4ed902bbea375e40b0d2f803c Mon Sep 17 00:00:00 2001 From: tomoki shimomura Date: Tue, 31 Dec 2024 09:25:10 +0900 Subject: [PATCH 83/83] Button Block: Set proper typography for inner elements (#68023) Fixes #64662. The current typography does not work correctly with the given Core Button block styles. This fix forces inner elements to inherit the styles with the exception of `writingMode` which is set on the block wrapper. Co-authored-by: shimotmk Co-authored-by: ramonjd Co-authored-by: aaronrobertshaw Co-authored-by: talldan --- .../block-editor/src/hooks/index.native.js | 1 + packages/block-library/src/button/block.json | 19 +- .../block-library/src/button/deprecated.js | 189 ++++++++++++++++++ packages/block-library/src/button/edit.js | 21 +- packages/block-library/src/button/save.js | 7 +- ...re__button__deprecated-v10.serialized.html | 2 +- .../blocks/core__button__deprecated-v12.html | 15 ++ .../blocks/core__button__deprecated-v12.json | 59 ++++++ .../core__button__deprecated-v12.parsed.json | 81 ++++++++ ...re__button__deprecated-v12.serialized.html | 15 ++ 10 files changed, 404 insertions(+), 5 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.html create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.json create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index c7f9df868f2bd7..0e4c2aa276fd40 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; export { useCachedTruthy } from './use-cached-truthy'; export { useEditorWrapperStyles } from './use-editor-wrapper-styles'; +export { getTypographyClassesAndStyles } from './use-typography-props'; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 2c1c05baa20dd3..6fcb7aca4c5923 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -85,6 +85,16 @@ } }, "typography": { + "__experimentalSkipSerialization": [ + "fontSize", + "lineHeight", + "fontFamily", + "fontWeight", + "fontStyle", + "textTransform", + "textDecoration", + "letterSpacing" + ], "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, @@ -122,7 +132,6 @@ "width": true } }, - "__experimentalSelector": ".wp-block-button .wp-block-button__link", "interactivity": { "clientNavigation": true } @@ -132,5 +141,11 @@ { "name": "outline", "label": "Outline" } ], "editorStyle": "wp-block-button-editor", - "style": "wp-block-button" + "style": "wp-block-button", + "selectors": { + "root": ".wp-block-button .wp-block-button__link", + "typography": { + "writingMode": ".wp-block-button" + } + } } diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 8ab83e1b09518f..f478c39a0dc326 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -14,6 +14,8 @@ import { __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, + __experimentalGetElementClassName, } from '@wordpress/block-editor'; import { compose } from '@wordpress/compose'; @@ -132,6 +134,192 @@ const blockAttributes = { }, }; +const v12 = { + attributes: { + tagName: { + type: 'string', + enum: [ 'a', 'button' ], + default: 'a', + }, + type: { + type: 'string', + default: 'button', + }, + textAlign: { + type: 'string', + }, + url: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'href', + }, + title: { + type: 'string', + source: 'attribute', + selector: 'a,button', + attribute: 'title', + role: 'content', + }, + text: { + type: 'rich-text', + source: 'rich-text', + selector: 'a,button', + role: 'content', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'target', + role: 'content', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'rel', + role: 'content', + }, + placeholder: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + gradient: { + type: 'string', + }, + width: { + type: 'number', + }, + }, + supports: { + anchor: true, + align: true, + alignWide: false, + color: { + __experimentalSkipSerialization: true, + gradients: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalLetterSpacing: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + }, + }, + reusable: false, + shadow: { + __experimentalSkipSerialization: true, + }, + spacing: { + __experimentalSkipSerialization: true, + padding: [ 'horizontal', 'vertical' ], + __experimentalDefaultControls: { + padding: true, + }, + }, + __experimentalBorder: { + color: true, + radius: true, + style: true, + width: true, + __experimentalSkipSerialization: true, + __experimentalDefaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, + __experimentalSelector: '.wp-block-button__link', + interactivity: { + clientNavigation: true, + }, + }, + save( { attributes, className } ) { + const { + tagName, + type, + textAlign, + fontSize, + linkTarget, + rel, + style, + text, + title, + url, + width, + } = attributes; + + const TagName = tagName || 'a'; + const isButtonTag = 'button' === TagName; + const buttonType = type || 'button'; + const borderProps = getBorderClassesAndStyles( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); + const spacingProps = getSpacingClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); + const buttonClasses = clsx( + 'wp-block-button__link', + colorProps.className, + borderProps.className, + { + [ `has-text-align-${ textAlign }` ]: textAlign, + // For backwards compatibility add style that isn't provided via + // block support. + 'no-border-radius': style?.border?.radius === 0, + }, + __experimentalGetElementClassName( 'button' ) + ); + const buttonStyle = { + ...borderProps.style, + ...colorProps.style, + ...spacingProps.style, + ...shadowProps.style, + }; + + // The use of a `title` attribute here is soft-deprecated, but still applied + // if it had already been assigned, for the sake of backward-compatibility. + // A title will no longer be assigned for new or updated button block links. + + const wrapperClasses = clsx( className, { + [ `has-custom-width wp-block-button__width-${ width }` ]: width, + [ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize, + } ); + + return ( +
+ +
+ ); + }, +}; + const v11 = { attributes: { url: { @@ -399,6 +587,7 @@ const v10 = { }; const deprecated = [ + v12, v11, v10, { diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 609aa955851076..593066d6555b40 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -39,6 +39,8 @@ import { __experimentalGetElementClassName, store as blockEditorStore, useBlockEditingMode, + getTypographyClassesAndStyles as useTypographyProps, + useSettings, } from '@wordpress/block-editor'; import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; @@ -266,6 +268,19 @@ function ButtonEdit( props ) { [ context, isSelected, metadata?.bindings?.url ] ); + const [ fluidTypographySettings, layout ] = useSettings( + 'typography.fluid', + 'layout' + ); + const typographyProps = useTypographyProps( attributes, { + typography: { + fluid: fluidTypographySettings, + }, + layout: { + wideSize: layout?.wideSize, + }, + } ); + return ( <>
-
My button
+
My button
diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.html new file mode 100644 index 00000000000000..b62b6f0020569f --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.html @@ -0,0 +1,15 @@ + +
My button 1
+ + + +
My button 2
+ + + +
My button 3
+ + + +
+ diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.json new file mode 100644 index 00000000000000..2c204623dc252f --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.json @@ -0,0 +1,59 @@ +[ + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 1", + "fontSize": "xx-large" + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 2", + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } + } + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 3", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "button", + "type": "button", + "text": "My button 4", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json new file mode 100644 index 00000000000000..d631bc600e49ac --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json @@ -0,0 +1,81 @@ +[ + { + "blockName": "core/button", + "attrs": { + "fontSize": "xx-large" + }, + "innerBlocks": [], + "innerHTML": "\n
My button 1
\n", + "innerContent": [ + "\n
My button 1
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
My button 2
\n", + "innerContent": [ + "\n
My button 2
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
My button 3
\n", + "innerContent": [ + "\n
My button 3
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "tagName": "button", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html new file mode 100644 index 00000000000000..8de25b59343b3f --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html @@ -0,0 +1,15 @@ + +
My button 1
+ + + +
My button 2
+ + + +
My button 3
+ + + +
+