From 9171278788274c9dc85a0c3e11f913424cbda43d Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Tue, 2 Aug 2022 14:59:41 +0200 Subject: [PATCH 001/143] Try: Tab style subpixel fix. (#42892) --- packages/components/src/panel/style.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index 890a72c6add48..500e5e6fd1a79 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -35,9 +35,12 @@ justify-content: space-between; align-items: center; padding: 0 $grid-unit-20; - height: $grid-unit-60; border-bottom: $border-width solid $gray-300; + // This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues. + box-sizing: content-box; + height: $grid-unit-60 - $border-width; + h2 { margin: 0; font-size: inherit; From 22ba73a487c2c6aeae54d584833c7fe06b5c90d8 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 2 Aug 2022 22:07:06 +0900 Subject: [PATCH 002/143] Change shortcut text for redo tooltip on Windows (#42830) * A11y: add Ctrl+Y text for redo tooltip on Windows * Change shortcut text for redo tooltip on Windows --- packages/customize-widgets/src/components/header/index.js | 8 ++++++-- .../edit-navigation/src/components/header/redo-button.js | 8 ++++++-- .../edit-site/src/components/header/undo-redo/redo.js | 8 ++++++-- .../edit-widgets/src/components/header/undo-redo/redo.js | 8 ++++++-- packages/editor/src/components/editor-history/redo.js | 8 ++++++-- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js index b23c75de1d7ed..201831b90cd78 100644 --- a/packages/customize-widgets/src/components/header/index.js +++ b/packages/customize-widgets/src/components/header/index.js @@ -10,7 +10,7 @@ import { createPortal, useState, useEffect } from '@wordpress/element'; import { __, _x, isRTL } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; import { NavigableToolbar } from '@wordpress/block-editor'; -import { displayShortcut } from '@wordpress/keycodes'; +import { displayShortcut, isAppleOS } from '@wordpress/keycodes'; import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons'; /** @@ -31,6 +31,10 @@ function Header( { sidebar.hasRedo(), ] ); + const shortcut = isAppleOS() + ? displayShortcut.primaryShift( 'z' ) + : displayShortcut.primary( 'y' ); + useEffect( () => { return sidebar.subscribeHistory( () => { setUndoRedo( [ sidebar.hasUndo(), sidebar.hasRedo() ] ); @@ -64,7 +68,7 @@ function Header( { icon={ ! isRTL() ? redoIcon : undoIcon } /* translators: button label text should, if possible, be under 16 characters. */ label={ __( 'Redo' ) } - shortcut={ displayShortcut.primaryShift( 'z' ) } + shortcut={ shortcut } // If there are no undo levels we don't want to actually disable this // button, because it will remove focus for keyboard users. // See: https://github.com/WordPress/gutenberg/issues/3486 diff --git a/packages/edit-navigation/src/components/header/redo-button.js b/packages/edit-navigation/src/components/header/redo-button.js index 70521b1d0ecea..c4f4e6df37b91 100644 --- a/packages/edit-navigation/src/components/header/redo-button.js +++ b/packages/edit-navigation/src/components/header/redo-button.js @@ -5,10 +5,14 @@ import { __, isRTL } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; -import { displayShortcut } from '@wordpress/keycodes'; +import { displayShortcut, isAppleOS } from '@wordpress/keycodes'; import { store as coreStore } from '@wordpress/core-data'; export default function RedoButton() { + const shortcut = isAppleOS() + ? displayShortcut.primaryShift( 'z' ) + : displayShortcut.primary( 'y' ); + const hasRedo = useSelect( ( select ) => select( coreStore ).hasRedo(), [] @@ -18,7 +22,7 @@ export default function RedoButton() { select( coreStore ).hasRedo(), [] @@ -21,7 +25,7 @@ function RedoButton( props, ref ) { ref={ ref } icon={ ! isRTL() ? redoIcon : undoIcon } label={ __( 'Redo' ) } - shortcut={ displayShortcut.primaryShift( 'z' ) } + shortcut={ shortcut } // If there are no undo levels we don't want to actually disable this // button, because it will remove focus for keyboard users. // See: https://github.com/WordPress/gutenberg/issues/3486 diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js index 70521b1d0ecea..c4f4e6df37b91 100644 --- a/packages/edit-widgets/src/components/header/undo-redo/redo.js +++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js @@ -5,10 +5,14 @@ import { __, isRTL } from '@wordpress/i18n'; import { ToolbarButton } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons'; -import { displayShortcut } from '@wordpress/keycodes'; +import { displayShortcut, isAppleOS } from '@wordpress/keycodes'; import { store as coreStore } from '@wordpress/core-data'; export default function RedoButton() { + const shortcut = isAppleOS() + ? displayShortcut.primaryShift( 'z' ) + : displayShortcut.primary( 'y' ); + const hasRedo = useSelect( ( select ) => select( coreStore ).hasRedo(), [] @@ -18,7 +22,7 @@ export default function RedoButton() { select( editorStore ).hasEditorRedo(), [] @@ -26,7 +30,7 @@ function EditorHistoryRedo( props, ref ) { icon={ ! isRTL() ? redoIcon : undoIcon } /* translators: button label text should, if possible, be under 16 characters. */ label={ __( 'Redo' ) } - shortcut={ displayShortcut.primaryShift( 'z' ) } + shortcut={ shortcut } // If there are no redo levels we don't want to actually disable this // button, because it will remove focus for keyboard users. // See: https://github.com/WordPress/gutenberg/issues/3486 From e3c8a6cb0f7890f21d688be28fe4ead1b11a1bc0 Mon Sep 17 00:00:00 2001 From: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Tue, 2 Aug 2022 16:10:52 +0300 Subject: [PATCH 003/143] Lodash: Refactor away from `_.isPlainObject()` (#42508) * Lodash: Refactor away from _.isPlainObject() * Revert package-lock.json changes * Dedupe is-plain-obj * Get rid of dev deps --- .eslintrc.js | 1 + package-lock.json | 51 +++++++++++++++++-- packages/blocks/package.json | 1 + packages/blocks/src/store/actions.js | 3 +- packages/components/src/text/hook.js | 8 +-- packages/data/package.json | 1 + .../data/src/plugins/persistence/index.js | 3 +- packages/element/package.json | 1 + packages/element/src/serialize.js | 3 +- .../test/index.test.js | 14 ++--- packages/prettier-config/test/index.js | 14 ++--- packages/redux-routine/package.json | 1 + packages/redux-routine/src/is-action.js | 2 +- test/native/jest.config.js | 2 +- test/unit/jest.config.js | 1 + 15 files changed, 76 insertions(+), 30 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 5f88587b915c2..2b3ed51d5f4b2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -107,6 +107,7 @@ module.exports = { 'isNumber', 'isObject', 'isObjectLike', + 'isPlainObject', 'isString', 'isUndefined', 'keyBy', diff --git a/package-lock.json b/package-lock.json index 8b37b07093057..2a6eda7808148 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16653,6 +16653,7 @@ "@wordpress/shortcode": "file:packages/shortcode", "colord": "^2.7.0", "hpq": "^1.3.0", + "is-plain-obj": "^4.1.0", "lodash": "^4.17.21", "memize": "^1.1.0", "rememo": "^4.0.0", @@ -16889,6 +16890,7 @@ "@wordpress/priority-queue": "file:packages/priority-queue", "@wordpress/redux-routine": "file:packages/redux-routine", "equivalent-key-map": "^0.2.2", + "is-plain-obj": "^4.1.0", "is-promise": "^4.0.0", "lodash": "^4.17.21", "redux": "^4.1.2", @@ -17180,6 +17182,7 @@ "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "@wordpress/escape-html": "file:packages/escape-html", + "is-plain-obj": "^4.1.0", "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2" @@ -17745,6 +17748,7 @@ "version": "file:packages/redux-routine", "requires": { "@babel/runtime": "^7.16.0", + "is-plain-obj": "^4.1.0", "is-promise": "^4.0.0", "lodash": "^4.17.21", "rungen": "^0.3.2" @@ -38668,10 +38672,9 @@ } }, "is-plain-obj": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", - "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=", - "dev": true + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==" }, "is-plain-object": { "version": "2.0.4", @@ -44360,6 +44363,14 @@ "arrify": "^1.0.1", "is-plain-obj": "^1.1.0", "kind-of": "^6.0.3" + }, + "dependencies": { + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true + } } }, "normalize-package-data": { @@ -45703,6 +45714,14 @@ "requires": { "arrify": "^1.0.1", "is-plain-obj": "^1.1.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true + } } }, "minipass": { @@ -54034,6 +54053,14 @@ "dev": true, "requires": { "is-plain-obj": "^1.0.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true + } } }, "source-list-map": { @@ -55846,6 +55873,14 @@ "arrify": "^1.0.1", "is-plain-obj": "^1.1.0", "kind-of": "^6.0.3" + }, + "dependencies": { + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true + } } }, "ms": { @@ -57591,6 +57626,14 @@ "trough": "^1.0.0", "vfile": "^3.0.0", "x-is-string": "^0.1.0" + }, + "dependencies": { + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true + } } }, "union-value": { diff --git a/packages/blocks/package.json b/packages/blocks/package.json index 7cbb0e9673bfa..b756451e81990 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -43,6 +43,7 @@ "@wordpress/shortcode": "file:../shortcode", "colord": "^2.7.0", "hpq": "^1.3.0", + "is-plain-obj": "^4.1.0", "lodash": "^4.17.21", "memize": "^1.1.0", "rememo": "^4.0.0", diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js index 141fd9e79d431..0ef38acfc2e0c 100644 --- a/packages/blocks/src/store/actions.js +++ b/packages/blocks/src/store/actions.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { castArray, isPlainObject, omit, pick, some } from 'lodash'; +import isPlainObject from 'is-plain-obj'; +import { castArray, omit, pick, some } from 'lodash'; /** * WordPress dependencies diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js index c914293c70e5e..7a83bc9c33699 100644 --- a/packages/components/src/text/hook.js +++ b/packages/components/src/text/hook.js @@ -2,7 +2,6 @@ * External dependencies */ import { css } from '@emotion/react'; -import { isPlainObject } from 'lodash'; /** * WordPress dependencies @@ -167,8 +166,11 @@ export default function useText( props ) { */ if ( ! truncate && Array.isArray( children ) ) { content = Children.map( children, ( child ) => { - // @ts-ignore - if ( ! isPlainObject( child ) || ! ( 'props' in child ) ) { + if ( + typeof child !== 'object' || + child === null || + ! ( 'props' in child ) + ) { return child; } diff --git a/packages/data/package.json b/packages/data/package.json index 7f50bbd8383b0..5aeadf1ed6bf6 100644 --- a/packages/data/package.json +++ b/packages/data/package.json @@ -35,6 +35,7 @@ "@wordpress/priority-queue": "file:../priority-queue", "@wordpress/redux-routine": "file:../redux-routine", "equivalent-key-map": "^0.2.2", + "is-plain-obj": "^4.1.0", "is-promise": "^4.0.0", "lodash": "^4.17.21", "redux": "^4.1.2", diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js index 3029b459b3ad9..a9eb1d21bd1e9 100644 --- a/packages/data/src/plugins/persistence/index.js +++ b/packages/data/src/plugins/persistence/index.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { merge, isPlainObject } from 'lodash'; +import isPlainObject from 'is-plain-obj'; +import { merge } from 'lodash'; /** * Internal dependencies diff --git a/packages/element/package.json b/packages/element/package.json index 769dfcfa44c7a..051b396793abb 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -32,6 +32,7 @@ "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "@wordpress/escape-html": "file:../escape-html", + "is-plain-obj": "^4.1.0", "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2" diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js index 9e14a089f8eb4..dd3d26b6c4b8f 100644 --- a/packages/element/src/serialize.js +++ b/packages/element/src/serialize.js @@ -28,7 +28,8 @@ /** * External dependencies */ -import { kebabCase, isPlainObject } from 'lodash'; +import isPlainObject from 'is-plain-obj'; +import { kebabCase } from 'lodash'; /** * WordPress dependencies diff --git a/packages/npm-package-json-lint-config/test/index.test.js b/packages/npm-package-json-lint-config/test/index.test.js index 16dd989d61fd3..15733d7d0198c 100644 --- a/packages/npm-package-json-lint-config/test/index.test.js +++ b/packages/npm-package-json-lint-config/test/index.test.js @@ -1,17 +1,13 @@ +/** + * External dependencies + */ +import isPlainObject from 'is-plain-obj'; + /** * Internal dependencies */ import config from '../'; -const isPlainObject = ( obj ) => { - return ( - typeof obj === 'object' && - obj !== null && - obj.constructor === Object && - Object.prototype.toString.call( obj ) === '[object Object]' - ); -}; - describe( 'npm-package-json-lint config tests', () => { it( 'should be an object', () => { expect( isPlainObject( config ) ).toBeTruthy(); diff --git a/packages/prettier-config/test/index.js b/packages/prettier-config/test/index.js index 991ed5d3bbe5e..13b136107db88 100644 --- a/packages/prettier-config/test/index.js +++ b/packages/prettier-config/test/index.js @@ -1,17 +1,13 @@ +/** + * External dependencies + */ +import isPlainObject from 'is-plain-obj'; + /** * Internal dependencies */ import config from '../lib/'; -const isPlainObject = ( obj ) => { - return ( - typeof obj === 'object' && - obj !== null && - obj.constructor === Object && - Object.prototype.toString.call( obj ) === '[object Object]' - ); -}; - describe( 'prettier config tests', () => { it( 'should be an object', () => { expect( isPlainObject( config ) ).toBeTruthy(); diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json index f99a2f87d8b75..321d66b563649 100644 --- a/packages/redux-routine/package.json +++ b/packages/redux-routine/package.json @@ -30,6 +30,7 @@ "sideEffects": false, "dependencies": { "@babel/runtime": "^7.16.0", + "is-plain-obj": "^4.1.0", "is-promise": "^4.0.0", "lodash": "^4.17.21", "rungen": "^0.3.2" diff --git a/packages/redux-routine/src/is-action.js b/packages/redux-routine/src/is-action.js index bcabab4e07a88..cdd59c8cd63d2 100644 --- a/packages/redux-routine/src/is-action.js +++ b/packages/redux-routine/src/is-action.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { isPlainObject } from 'lodash'; +import isPlainObject from 'is-plain-obj'; /* eslint-disable jsdoc/valid-types */ /** diff --git a/test/native/jest.config.js b/test/native/jest.config.js index a6ccf676882fb..0a7bf84287f42 100644 --- a/test/native/jest.config.js +++ b/test/native/jest.config.js @@ -65,7 +65,7 @@ module.exports = { // See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/257#discussion_r234978268 // There is no overloading in jest so we need to rewrite the config from react-native-jest-preset: // https://github.com/facebook/react-native/blob/HEAD/jest-preset.json#L20 - 'node_modules/(?!(simple-html-tokenizer|(jest-)?react-native|@react-native|react-clone-referenced-element|@react-navigation))', + 'node_modules/(?!(simple-html-tokenizer|is-plain-obj|(jest-)?react-native|@react-native|react-clone-referenced-element|@react-navigation))', ], snapshotSerializers: [ '@emotion/jest/serializer' ], reporters: [ 'default', 'jest-junit' ], diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js index c430aae0ed244..2294974ffea32 100644 --- a/test/unit/jest.config.js +++ b/test/unit/jest.config.js @@ -36,6 +36,7 @@ module.exports = { transform: { '^.+\\.[jt]sx?$': '/test/unit/scripts/babel-transformer.js', }, + transformIgnorePatterns: [ 'node_modules/(?!(is-plain-obj))' ], snapshotSerializers: [ 'enzyme-to-json/serializer', '@emotion/jest/serializer', From 031d50e6c2acfed94b8637c2771313ff37b9bc47 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 2 Aug 2022 14:15:30 +0100 Subject: [PATCH 004/143] Nav block: Move overlay colors to the responsive wrapper (#42875) * Nav block: Move overlay colors to the responsive wrapper * add overlay color and background to the repsonsive wrapper component --- .../src/navigation/edit/index.js | 29 +++---------------- .../src/navigation/edit/responsive-wrapper.js | 27 +++++++++++++++-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 5e03b859e481f..eda2a2b7967df 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -303,27 +303,6 @@ function Navigation( { { __unstableIsDisabled: hasBlockOverlay } ); - const overlayClassnames = classnames( { - 'has-text-color': - !! overlayTextColor.color || !! overlayTextColor?.class, - [ getColorClassName( 'color', overlayTextColor?.slug ) ]: - !! overlayTextColor?.slug, - 'has-background': - !! overlayBackgroundColor.color || overlayBackgroundColor?.class, - [ getColorClassName( - 'background-color', - overlayBackgroundColor?.slug - ) ]: !! overlayBackgroundColor?.slug, - } ); - - const overlayStyles = { - color: ! overlayTextColor?.slug && overlayTextColor?.color, - backgroundColor: - ! overlayBackgroundColor?.slug && - overlayBackgroundColor?.color && - overlayBackgroundColor.color, - }; - // Turn on contrast checker for web only since it's not supported on mobile yet. const enableContrastChecking = Platform.OS === 'web'; @@ -644,8 +623,8 @@ function Navigation( { isOpen={ isResponsiveMenuOpen } isResponsive={ 'never' !== overlayMenu } isHiddenByDefault={ 'always' === overlayMenu } - classNames={ overlayClassnames } - styles={ overlayStyles } + overlayBackgroundColor={ overlayBackgroundColor } + overlayTextColor={ overlayTextColor } > { isEntityAvailable && ( Date: Tue, 2 Aug 2022 16:15:45 +0300 Subject: [PATCH 005/143] Lodash: Refactor away from `_.isMatch()` (#42271) * Lodash: Refactor away from _.isMatch() * Handle nested objects and arrays --- .eslintrc.js | 1 + .../src/utils/block-variation-transforms.js | 19 ++++++++++----- .../utils/test/block-variation-transforms.js | 24 +++++++++++++++++++ 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 2b3ed51d5f4b2..d6e0f02904330 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -103,6 +103,7 @@ module.exports = { 'isBoolean', 'isFinite', 'isFunction', + 'isMatch', 'isNil', 'isNumber', 'isObject', diff --git a/packages/block-editor/src/utils/block-variation-transforms.js b/packages/block-editor/src/utils/block-variation-transforms.js index 19f8e05c82205..7b1dd2068f84a 100644 --- a/packages/block-editor/src/utils/block-variation-transforms.js +++ b/packages/block-editor/src/utils/block-variation-transforms.js @@ -1,10 +1,17 @@ -/** - * External dependencies - */ -import { isMatch } from 'lodash'; - /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ +function matchesAttributes( blockAttributes, variation ) { + return Object.entries( variation ).every( ( [ key, value ] ) => { + if ( + typeof value === 'object' && + typeof blockAttributes[ key ] === 'object' + ) { + return matchesAttributes( blockAttributes[ key ], value ); + } + return blockAttributes[ key ] === value; + } ); +} + /** * Matches the provided block variations with a block's attributes. If no match * or more than one matches are found it returns `undefined`. If a single match is @@ -24,7 +31,7 @@ export const __experimentalGetMatchingVariation = ( if ( ! variations || ! blockAttributes ) return; const matches = variations.filter( ( { attributes } ) => { if ( ! attributes || ! Object.keys( attributes ).length ) return false; - return isMatch( blockAttributes, attributes ); + return matchesAttributes( blockAttributes, attributes ); } ); if ( matches.length !== 1 ) return; return matches[ 0 ]; diff --git a/packages/block-editor/src/utils/test/block-variation-transforms.js b/packages/block-editor/src/utils/test/block-variation-transforms.js index 17c82bdb95132..47844ba030942 100644 --- a/packages/block-editor/src/utils/test/block-variation-transforms.js +++ b/packages/block-editor/src/utils/test/block-variation-transforms.js @@ -40,6 +40,18 @@ describe( 'getMatchingVariation', () => { getMatchingVariation( { level: 1, other: 'prop' }, variations ) ).toBeUndefined(); } ); + it( 'when variation has a nested attribute', () => { + const variations = [ + { name: 'one', attributes: { query: { author: 'somebody' } } }, + { name: 'two', attributes: { query: { author: 'nobody' } } }, + ]; + expect( + getMatchingVariation( + { query: { author: 'foobar' }, other: 'prop' }, + variations + ) + ).toBeUndefined(); + } ); } ); describe( 'should find a match', () => { it( 'when variation has one attribute', () => { @@ -66,5 +78,17 @@ describe( 'getMatchingVariation', () => { ).name ).toEqual( 'one' ); } ); + it( 'when variation has a nested attribute', () => { + const variations = [ + { name: 'one', attributes: { query: { author: 'somebody' } } }, + { name: 'two', attributes: { query: { author: 'nobody' } } }, + ]; + expect( + getMatchingVariation( + { query: { author: 'somebody' }, other: 'prop' }, + variations + ).name + ).toEqual( 'one' ); + } ); } ); } ); From 32aeeaac24949df93c67e03c6fdd8d9e4b2c3d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Tue, 2 Aug 2022 15:19:28 +0200 Subject: [PATCH 006/143] Block library: Round position attribute on media-text focal point save (#33915) --- .../src/media-text/deprecated.js | 1016 +++++++++-------- .../src/media-text/media-container.js | 4 +- .../src/media-text/test/media-container.js | 24 + .../core__media-text__deprecated-v5.html | 12 + .../core__media-text__deprecated-v5.json | 32 + ...ore__media-text__deprecated-v5.parsed.json | 30 + ..._media-text__deprecated-v5.serialized.html | 5 + ..._image-fill-with-focal-point-selected.html | 4 +- ..._image-fill-with-focal-point-selected.json | 4 +- ...fill-with-focal-point-selected.parsed.json | 8 +- ...-with-focal-point-selected.serialized.html | 4 +- ..._media-right-custom-width__deprecated.json | 4 +- 12 files changed, 679 insertions(+), 468 deletions(-) create mode 100644 packages/block-library/src/media-text/test/media-container.js create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v5.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v5.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v5.parsed.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js index b81e1632188d3..f79dd94764146 100644 --- a/packages/block-library/src/media-text/deprecated.js +++ b/packages/block-library/src/media-text/deprecated.js @@ -17,9 +17,19 @@ import { /** * Internal dependencies */ -import { imageFillStyles } from './media-container'; import { DEFAULT_MEDIA_SIZE_SLUG } from './constants'; +const v1ToV5ImageFillStyles = ( url, focalPoint ) => { + return url + ? { + backgroundImage: `url(${ url })`, + backgroundPosition: focalPoint + ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` + : `50% 50%`, + } + : {}; +}; + const DEFAULT_MEDIA_WIDTH = 50; const noop = () => {}; @@ -43,9 +53,6 @@ const baseAttributes = { type: 'string', default: 'wide', }, - backgroundColor: { - type: 'string', - }, mediaAlt: { type: 'string', source: 'attribute', @@ -73,257 +80,464 @@ const baseAttributes = { }, }; -export default [ - // Version with CSS grid - { - attributes: { - align: { - type: 'string', - default: 'wide', - }, - mediaAlt: { - type: 'string', - source: 'attribute', - selector: 'figure img', - attribute: 'alt', - default: '', - }, - mediaPosition: { - type: 'string', - default: 'left', - }, - mediaId: { - type: 'number', - }, - mediaUrl: { - type: 'string', - source: 'attribute', - selector: 'figure video,figure img', - attribute: 'src', - }, - mediaLink: { - type: 'string', - }, - linkDestination: { - type: 'string', - }, - linkTarget: { - type: 'string', - source: 'attribute', - selector: 'figure a', - attribute: 'target', - }, - href: { - type: 'string', - source: 'attribute', - selector: 'figure a', - attribute: 'href', - }, - rel: { - type: 'string', - source: 'attribute', - selector: 'figure a', - attribute: 'rel', - }, - linkClass: { - type: 'string', - source: 'attribute', - selector: 'figure a', - attribute: 'class', - }, - mediaType: { - type: 'string', - }, - mediaWidth: { - type: 'number', - default: 50, - }, - mediaSizeSlug: { - type: 'string', - }, - isStackedOnMobile: { - type: 'boolean', - default: true, - }, - verticalAlignment: { - type: 'string', - }, - imageFill: { - type: 'boolean', - }, - focalPoint: { - type: 'object', - }, - }, - supports: { - anchor: true, - align: [ 'wide', 'full' ], - html: false, - color: { - gradients: true, - link: true, - }, - }, - 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 = ( - { +const v4ToV5BlockAttributes = { + ...baseAttributes, + mediaUrl: { + type: 'string', + source: 'attribute', + selector: 'figure video,figure img', + attribute: 'src', + }, + mediaLink: { + type: 'string', + }, + linkDestination: { + type: 'string', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'figure a', + attribute: 'target', + }, + href: { + type: 'string', + source: 'attribute', + selector: 'figure a', + attribute: 'href', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'figure a', + attribute: 'rel', + }, + linkClass: { + type: 'string', + source: 'attribute', + selector: 'figure a', + attribute: 'class', + }, + mediaSizeSlug: { + type: 'string', + }, + verticalAlignment: { + type: 'string', + }, + imageFill: { + type: 'boolean', + }, + focalPoint: { + type: 'object', + }, +}; + +const v4ToV5Supports = { + anchor: true, + align: [ 'wide', 'full' ], + html: false, + color: { + gradients: true, + link: true, + }, +}; + +const v5 = { + attributes: v4ToV5BlockAttributes, + supports: v4ToV5Supports, + 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 } + ); + } - if ( href ) { - image = ( - - { image } - - ); - } - - const mediaTypeRenders = { - image: () => image, - video: () =>