From fe5b8a76252591e37ddcf08cf094e746fbfd676f Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Wed, 15 Mar 2023 23:32:11 +0100 Subject: [PATCH 01/17] Fix release perf job + running locally via CLI (#49068) --- bin/plugin/commands/performance.js | 20 ++++++++++++++++---- bin/plugin/lib/utils.js | 1 + 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js index 75ab95a4cc4a1..0d91947da8021 100644 --- a/bin/plugin/commands/performance.js +++ b/bin/plugin/commands/performance.js @@ -3,7 +3,7 @@ */ const fs = require( 'fs' ); const path = require( 'path' ); -const { mapValues, kebabCase } = require( 'lodash' ); +const { mapValues } = require( 'lodash' ); const SimpleGit = require( 'simple-git' ); /** @@ -83,6 +83,17 @@ const config = require( '../config' ); * @property {number=} maxListViewOpen Max time to open list view. */ +/** + * Sanitizes branch name to be used in a path or a filename. + * + * @param {string} branch + * + * @return {string} Sanitized branch name. + */ +function sanitizeBranchName( branch ) { + return branch.replace( /[^a-zA-Z0-9-]/g, '-' ); +} + /** * Computes the average number from an array numbers. * @@ -299,8 +310,8 @@ async function runPerformanceTests( branches, options ) { const branchDirectories = {}; for ( const branch of branches ) { log( ` >> Branch: ${ branch }` ); - const environmentDirectory = - rootDirectory + '/envs/' + kebabCase( branch ); + const sanitizedBranch = sanitizeBranchName( branch ); + const environmentDirectory = rootDirectory + '/envs/' + sanitizedBranch; // @ts-ignore branchDirectories[ branch ] = environmentDirectory; const buildPath = `${ environmentDirectory }/plugin`; @@ -401,7 +412,8 @@ async function runPerformanceTests( branches, options ) { for ( let i = 0; i < TEST_ROUNDS; i++ ) { rawResults[ i ] = {}; for ( const branch of branches ) { - const runKey = `${ branch }_${ testSuite }_run-${ i }`; + const sanitizedBranch = sanitizeBranchName( branch ); + const runKey = `${ sanitizedBranch }_${ testSuite }_run-${ i }`; // @ts-ignore const environmentDirectory = branchDirectories[ branch ]; log( ` >> Branch: ${ branch }, Suite: ${ testSuite }` ); diff --git a/bin/plugin/lib/utils.js b/bin/plugin/lib/utils.js index 4a75437a60694..c50094321710c 100644 --- a/bin/plugin/lib/utils.js +++ b/bin/plugin/lib/utils.js @@ -33,6 +33,7 @@ function runShellScript( script, cwd, env = {} ) { NO_CHECKS: 'true', PATH: process.env.PATH, HOME: process.env.HOME, + USER: process.env.USER, ...env, }, }, From f9950bed9b9c81d00c834e4be787ebd577bf9363 Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Wed, 15 Mar 2023 23:36:51 +0100 Subject: [PATCH 02/17] Install perf testing themes in the correct wp-env context (#49063) --- .github/workflows/performance.yml | 7 ------- bin/plugin/utils/.wp-env.performance.json | 6 +++++- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index ed2dac34ddc93..fa388e76d32f1 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -42,13 +42,6 @@ jobs: run: | npm ci - - name: Install specific versions of the themes used in tests - run: | - npm run wp-env start - npm run wp-env -- run tests-cli "wp theme update twentytwentyone --version=1.7" - npm run wp-env -- run tests-cli "wp theme update twentytwentythree --version=1.0" - npm run wp-env stop - - name: Compare performance with trunk if: github.event_name == 'pull_request' run: ./bin/plugin/cli.js perf $GITHUB_SHA trunk --tests-branch $GITHUB_SHA diff --git a/bin/plugin/utils/.wp-env.performance.json b/bin/plugin/utils/.wp-env.performance.json index 112c2684f64a4..3f80b794ddddd 100644 --- a/bin/plugin/utils/.wp-env.performance.json +++ b/bin/plugin/utils/.wp-env.performance.json @@ -1,7 +1,11 @@ { "core": "WordPress/WordPress", "plugins": [ "./plugin" ], - "themes": [ "../../tests/test/emptytheme" ], + "themes": [ + "../../tests/test/emptytheme", + "https://downloads.wordpress.org/theme/twentytwentyone.1.7.zip", + "https://downloads.wordpress.org/theme/twentytwentythree.1.0.zip" + ], "env": { "tests": { "mappings": { From cc11957c3021ce084cbdddde3a84a2a4763aba3e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Thu, 16 Mar 2023 10:49:37 +0800 Subject: [PATCH 03/17] Speed up `npm ci` by caching `node_modules` (#45932) * Try custom setup-node composite action for aggressive caching * Add comment about GHA bug * Try without rebuild and ignore-scripts * Include npm version to the cache key * Try reverting the change of graceful-fs * Update step name * Code review * Add some comments --- .github/setup-node/action.yml | 46 +++++++++++++++++++ .github/workflows/build-plugin-zip.yml | 4 +- .github/workflows/bundle-size.yml | 2 +- .github/workflows/create-block.yml | 13 ++---- .github/workflows/end2end-test.yml | 39 +++++----------- .github/workflows/performance.yml | 11 +---- .github/workflows/publish-npm-packages.yml | 2 +- .github/workflows/pull-request-automation.yml | 2 +- .github/workflows/rnmobile-android-runner.yml | 9 +--- .github/workflows/rnmobile-ios-runner.yml | 9 +--- .github/workflows/static-checks.yml | 2 +- .github/workflows/storybook-pages.yml | 10 +--- .github/workflows/unit-test.yml | 37 +++++---------- 13 files changed, 89 insertions(+), 97 deletions(-) create mode 100644 .github/setup-node/action.yml diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml new file mode 100644 index 0000000000000..22cb81618a1ef --- /dev/null +++ b/.github/setup-node/action.yml @@ -0,0 +1,46 @@ +name: 'Setup Node.js and install npm dependencies' +description: 'Configure Node.js and install npm dependencies while managing all aspects of caching.' +inputs: + node-version: + description: 'Optional. The Node.js version to use. When not specified, the version specified in .nvmrc will be used.' + required: false + type: string + +runs: + using: 'composite' + steps: + - name: Use desired version of Node.js + uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + with: + node-version-file: '.nvmrc' + node-version: ${{ inputs.node-version }} + cache: npm + + - name: Get Node.js and npm version + id: node-version + run: | + echo "NODE_VERSION=$(node -v)" >> $GITHUB_OUTPUT + shell: bash + + - name: Cache node_modules + id: cache-node_modules + uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 + with: + path: '**/node_modules' + key: node_modules-${{ runner.os }}-${{ steps.node-version.outputs.NODE_VERSION }}-${{ hashFiles('package-lock.json') }} + + - name: Install npm dependencies + if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }} + run: npm ci + shell: bash + + # On cache hit, we run the post-install script to match the native `npm ci` behavior. + # An example of this is to patch `node_modules` using patch-package. + - name: Post-install + if: ${{ steps.cache-node_modules.outputs.cache-hit == 'true' }} + run: | + # Run the post-install script for the root project. + npm run postinstall + # Run the post-install scripts for workspaces. + npx lerna run postinstall + shell: bash diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index 6e915d0ffddd2..9e30cc1c1cfc6 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.github/workflows/build-plugin-zip.yml @@ -168,7 +168,7 @@ jobs: with: ref: ${{ needs.bump-version.outputs.release_branch || github.ref }} - - name: Use desired version of NodeJS + - name: Use desired version of Node.js uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 with: node-version-file: '.nvmrc' @@ -326,7 +326,7 @@ jobs: git config user.name "Gutenberg Repository Automation" git config user.email gutenberg@wordpress.org - - name: Setup Node (for CLI) + - name: Setup Node.js uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 with: node-version-file: 'main/.nvmrc' diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml index 9ae0116ef1c79..ea1facacdf236 100644 --- a/.github/workflows/bundle-size.yml +++ b/.github/workflows/bundle-size.yml @@ -41,7 +41,7 @@ jobs: with: fetch-depth: 1 - - name: Use desired version of NodeJS + - name: Use desired version of Node.js uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 with: node-version-file: '.nvmrc' diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml index 304052d4297b8..d0eae662c9097 100644 --- a/.github/workflows/create-block.yml +++ b/.github/workflows/create-block.yml @@ -20,20 +20,17 @@ jobs: strategy: fail-fast: false matrix: - node: [14] + node: ['14'] os: [macos-latest, ubuntu-latest, windows-latest] steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node with: node-version: ${{ matrix.node }} - cache: npm - - name: npm install, build, format and lint + - name: Create block shell: bash - run: | - npm ci - bash ./bin/test-create-block.sh + run: bash ./bin/test-create-block.sh diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index 24256e4266a46..9bc1224fa11e7 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -29,16 +29,11 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - - name: Npm install and build - run: | - npm ci - npm run build + - name: Npm build + run: npm run build - name: Install WordPress run: | @@ -78,16 +73,11 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - - name: Npm install and build - run: | - npm ci - npm run build + - name: Npm build + run: npm run build - name: Install Playwright dependencies run: | @@ -137,19 +127,14 @@ jobs: name: flaky-tests-report path: flaky-tests - - name: Use desired version of NodeJS + - name: Setup Node.js and install dependencies if: ${{ steps.download_artifact.outcome == 'success' }} - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm + uses: ./.github/setup-node - - name: Npm install and build + - name: Npm build if: ${{ steps.download_artifact.outcome == 'success' }} # TODO: We don't have to build the entire project, just the action itself. - run: | - npm ci - npm run build:packages + run: npm run build:packages - name: Report flaky tests if: ${{ steps.download_artifact.outcome == 'success' }} diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml index fa388e76d32f1..18f11e55b3de8 100644 --- a/.github/workflows/performance.yml +++ b/.github/workflows/performance.yml @@ -32,15 +32,8 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm - - - name: Npm install - run: | - npm ci + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - name: Compare performance with trunk if: github.event_name == 'pull_request' diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml index 6568d46989fe6..bc6782ae3ed8f 100644 --- a/.github/workflows/publish-npm-packages.yml +++ b/.github/workflows/publish-npm-packages.yml @@ -49,7 +49,7 @@ jobs: git config user.name "Gutenberg Repository Automation" git config user.email gutenberg@wordpress.org - - name: Setup Node (for CLI) + - name: Setup Node.js uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 with: node-version-file: 'main/.nvmrc' diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml index 5d38f7965f7b1..b39a54f084c60 100644 --- a/.github/workflows/pull-request-automation.yml +++ b/.github/workflows/pull-request-automation.yml @@ -19,7 +19,7 @@ jobs: with: ref: trunk - - name: Use desired version of NodeJS + - name: Use desired version of Node.js uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 with: node-version: ${{ matrix.node }} diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 0f1474c824a20..55d29accbcb8f 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -31,13 +31,8 @@ jobs: distribution: 'temurin' java-version: '11' - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm - - - run: npm ci + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - name: Gradle cache uses: gradle/gradle-build-action@6095a76664413da4c8c134ee32e8a8ae900f0f1f # v2.4.0 diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index 933b4184957d1..1a4b1db788371 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -25,13 +25,8 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm - - - run: npm ci + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - name: Prepare build cache key run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml index 00002aaf52f19..8935ef5e39325 100644 --- a/.github/workflows/static-checks.yml +++ b/.github/workflows/static-checks.yml @@ -24,7 +24,7 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS + - name: Use desired version of Node.js uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 with: node-version-file: '.nvmrc' diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml index 616fad4e55b5a..ad49e3274f9ba 100644 --- a/.github/workflows/storybook-pages.yml +++ b/.github/workflows/storybook-pages.yml @@ -16,14 +16,8 @@ jobs: with: ref: trunk - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm - - - name: Install Dependencies - run: npm ci + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - name: Build Storybook run: npm run storybook:build diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index ca9adb75ebca8..a78440bf5ef52 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -33,19 +33,16 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node with: node-version: ${{ matrix.node }} - cache: npm - - name: Npm install and build + - name: Npm build # It's not necessary to run the full build, since Jest can interpret # source files with `babel-jest`. Some packages have their own custom # build tasks, however. These must be run. - run: | - npm ci - npx lerna run build + run: npx lerna run build - name: Running the tests run: npm run test:unit -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache" @@ -79,11 +76,8 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Set up Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node ## # This allows Composer dependencies to be installed using a single step. @@ -116,10 +110,8 @@ jobs: with: custom-cache-suffix: $(/bin/date -u --date='last Mon' "+%F") - - name: Install npm dependencies - run: | - npm ci - npm run build + - name: Npm build + run: npm run build - name: Docker debug information run: | @@ -235,19 +227,14 @@ jobs: steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 - - name: Use desired version of NodeJS - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 - with: - node-version-file: '.nvmrc' - cache: npm + - name: Setup Node.js and install dependencies + uses: ./.github/setup-node - - name: Npm install and build + - name: Npm build # It's not necessary to run the full build, since Jest can interpret # source files with `babel-jest`. Some packages have their own custom # build tasks, however. These must be run. - run: | - npm ci - npx lerna run build + run: npx lerna run build - name: Running the tests run: npm run native test -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache" From ced52228a39ba68fea86c1e3e8d36aa7947685db Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 16 Mar 2023 15:58:45 +1000 Subject: [PATCH 04/17] Media & Text: Switch default alignment to `none` (#48404) --- .../__snapshots__/transforms.native.js.snap | 4 +- .../__snapshots__/transforms.native.js.snap | 2 +- .../block-library/src/media-text/block.json | 2 +- .../src/media-text/deprecated.js | 238 +++++++++++++++++- .../__snapshots__/transforms.native.js.snap | 8 +- .../__snapshots__/transforms.native.js.snap | 2 +- .../fixtures/blocks/core__media-text.html | 2 +- .../fixtures/blocks/core__media-text.json | 2 +- .../blocks/core__media-text.parsed.json | 4 +- .../blocks/core__media-text.serialized.html | 2 +- ..._media-text__deprecated-v5.serialized.html | 2 +- ...ext__deprecated-v6-wide-default-align.html | 12 + ...ext__deprecated-v6-wide-default-align.json | 28 +++ ...precated-v6-wide-default-align.parsed.json | 28 +++ ...ated-v6-wide-default-align.serialized.html | 5 + ...a-text__image-alt-no-align.serialized.html | 2 +- ...t__image-fill-no-focal-point-selected.json | 2 +- ...ll-no-focal-point-selected.serialized.html | 2 +- ..._image-fill-with-focal-point-selected.json | 2 +- ...-with-focal-point-selected.serialized.html | 2 +- ...ore__media-text__is-stacked-on-mobile.json | 4 +- ...text__is-stacked-on-mobile.serialized.html | 2 +- ...re__media-text__vertical-align-bottom.json | 2 +- ...ext__vertical-align-bottom.serialized.html | 2 +- .../blocks/core__media-text__video.json | 4 +- .../core__media-text__video.serialized.html | 2 +- 26 files changed, 336 insertions(+), 31 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html diff --git a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap index 252edf2417223..dc4ba0fbb2b1f 100644 --- a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap +++ b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap @@ -30,7 +30,7 @@ exports[`Cover block transformations with Image to Image block 1`] = ` exports[`Cover block transformations with Image to Media & Text block 1`] = ` " -
+

Cool cover

" @@ -60,7 +60,7 @@ exports[`Cover block transformations with Video to Group block 1`] = ` exports[`Cover block transformations with Video to Media & Text block 1`] = ` " -
+

Cool cover

" diff --git a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap index 61c8de02bd03a..56a5fe3c25912 100644 --- a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap +++ b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap @@ -42,7 +42,7 @@ exports[`Image block transformations to Group block 1`] = ` exports[`Image block transformations to Media & Text block 1`] = ` " -
+

" diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 1c9fc0b6820f1..ded230a2eb100 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -10,7 +10,7 @@ "attributes": { "align": { "type": "string", - "default": "wide" + "default": "none" }, "mediaAlt": { "type": "string", diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js index 95595f8da6424..2d061213dface 100644 --- a/packages/block-library/src/media-text/deprecated.js +++ b/packages/block-library/src/media-text/deprecated.js @@ -13,6 +13,7 @@ import { useInnerBlocksProps, useBlockProps, } from '@wordpress/block-editor'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies @@ -30,6 +31,19 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => { : {}; }; +const v6ImageFillStyles = ( url, focalPoint ) => { + return url + ? { + backgroundImage: `url(${ url })`, + backgroundPosition: focalPoint + ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( + focalPoint.y * 100 + ) }%` + : `50% 50%`, + } + : {}; +}; + const DEFAULT_MEDIA_WIDTH = 50; const noop = () => {}; @@ -49,6 +63,20 @@ const migrateCustomColors = ( attributes ) => { }; }; +// After align attribute's default was updated this function explicitly sets +// the align value for deprecated blocks to the `wide` value which was default +// for their versions of this block. +const migrateDefaultAlign = ( attributes ) => { + if ( attributes.align ) { + return attributes; + } + + return { + ...attributes, + align: 'wide', + }; +}; + const baseAttributes = { align: { type: 'string', @@ -133,6 +161,40 @@ const v4ToV5BlockAttributes = { }, }; +const v6Attributes = { + ...v4ToV5BlockAttributes, + mediaAlt: { + type: 'string', + source: 'attribute', + selector: 'figure img', + attribute: 'alt', + default: '', + __experimentalRole: 'content', + }, + mediaId: { + type: 'number', + __experimentalRole: 'content', + }, + mediaUrl: { + type: 'string', + source: 'attribute', + selector: 'figure video,figure img', + attribute: 'src', + __experimentalRole: 'content', + }, + href: { + type: 'string', + source: 'attribute', + selector: 'figure a', + attribute: 'href', + __experimentalRole: 'content', + }, + mediaType: { + type: 'string', + __experimentalRole: 'content', + }, +}; + const v4ToV5Supports = { anchor: true, align: [ 'wide', 'full' ], @@ -143,6 +205,166 @@ const v4ToV5Supports = { }, }; +const v6Supports = { + ...v4ToV5Supports, + color: { + gradients: true, + link: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, + spacing: { + margin: true, + padding: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalLetterSpacing: true, + __experimentalDefaultControls: { + fontSize: true, + }, + }, +}; + +// Version with wide as the default alignment. +// See: https://github.com/WordPress/gutenberg/pull/48404 +const v6 = { + attributes: v6Attributes, + supports: v6Supports, + save( { attributes } ) { + const { + isStackedOnMobile, + mediaAlt, + mediaPosition, + mediaType, + mediaUrl, + mediaWidth, + mediaId, + verticalAlignment, + imageFill, + focalPoint, + linkClass, + href, + linkTarget, + rel, + } = attributes; + const mediaSizeSlug = + attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; + const newRel = isEmpty( rel ) ? undefined : rel; + + const imageClasses = classnames( { + [ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image', + [ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image', + } ); + + let image = ( + { + ); + + if ( href ) { + image = ( + + { image } + + ); + } + + const mediaTypeRenders = { + image: () => image, + video: () =>