From 500883f7204ddb1347d77e0bcfd9e30ff3590d23 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 24 Dec 2024 13:03:32 +0400 Subject: [PATCH 01/54] 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 02/54] 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 03/54] 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 04/54] 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 05/54] 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 06/54] 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 28/54] 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 29/54] 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 30/54] 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 31/54] 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 32/54] 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 33/54] 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 34/54] 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 35/54] 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 36/54] 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 37/54] 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 38/54] 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 39/54] 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 40/54] 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 41/54] 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 42/54] 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 43/54] 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 44/54] 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 45/54] 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 46/54] 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 47/54] 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 48/54] 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 49/54] 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 50/54] 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 51/54] 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
+ + + +
+ From ed1dc8b3d2fdfc683d7afb06e3deceac9901a13e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Wed, 1 Jan 2025 10:43:54 +0100 Subject: [PATCH 52/54] Update the copyright license to 2025 (#68440) Co-authored-by: fabiankaegy Co-authored-by: shail-mehta Co-authored-by: Soean --- LICENSE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE.md b/LICENSE.md index 983294723c4806..12a05f0c071a68 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ ## Gutenberg - Copyright 2016-2024 by the contributors + Copyright 2016-2025 by the contributors **License for Contributions (on and after April 15, 2021)** From 50ca1c0fbdba5d55347c859e6e238bf704a35590 Mon Sep 17 00:00:00 2001 From: Dhruvik Patel Date: Thu, 2 Jan 2025 07:07:57 +0530 Subject: [PATCH 53/54] doc: Fixed typo in README of text-transform-control component (#68443) Co-authored-by: Dhruvik Malaviya Unlinked contributors: dhruvikmalaviya@Dhruviks-Mac.local. Co-authored-by: hbhalodia Co-authored-by: t-hamano Co-authored-by: im3dabasia --- .../src/components/text-transform-control/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/text-transform-control/README.md b/packages/block-editor/src/components/text-transform-control/README.md index 3ed8f1da8cd6e9..cd23461d3eb332 100644 --- a/packages/block-editor/src/components/text-transform-control/README.md +++ b/packages/block-editor/src/components/text-transform-control/README.md @@ -2,7 +2,7 @@ The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`. -![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true) +![TextTransformControl Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true) ## Development guidelines From 6eb365e7ee43ad3d92dd2fdfdfb139ac55733098 Mon Sep 17 00:00:00 2001 From: Shail Mehta Date: Thu, 2 Jan 2025 09:01:39 +0530 Subject: [PATCH 54/54] Post Comment Link: Add Border Support (#68450) Co-authored-by: shail-mehta Co-authored-by: ramonjd --- packages/block-library/src/post-comments-link/block.json | 9 ++++++++- packages/block-library/src/post-comments-link/style.scss | 4 ++++ packages/block-library/src/style.scss | 1 + 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/post-comments-link/style.scss diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json index 67831b1d15c5d5..8e23bc7a695070 100644 --- a/packages/block-library/src/post-comments-link/block.json +++ b/packages/block-library/src/post-comments-link/block.json @@ -42,6 +42,13 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true } - } + }, + "style": "wp-block-post-comments-link" } diff --git a/packages/block-library/src/post-comments-link/style.scss b/packages/block-library/src/post-comments-link/style.scss new file mode 100644 index 00000000000000..110179d3ee1df9 --- /dev/null +++ b/packages/block-library/src/post-comments-link/style.scss @@ -0,0 +1,4 @@ +.wp-block-post-comments-link { + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 663626caaac87e..c61049c23151b9 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -37,6 +37,7 @@ @import "./post-author-biography/style.scss"; @import "./post-comments-form/style.scss"; @import "./post-content/style.scss"; +@import "./post-comments-link/style.scss"; @import "./post-date/style.scss"; @import "./post-excerpt/style.scss"; @import "./post-featured-image/style.scss";