From de23bb92851806318267a657753d7acaff770d83 Mon Sep 17 00:00:00 2001
From: George Mamadashvili
Date: Mon, 15 Jul 2024 12:15:56 +0400
Subject: [PATCH 01/36] Upgrade Playwright to v1.45 (#61443)
* Upgrade Playwright to v1.44
* Use new accessibility assertions
* Bump to latest
* Bump to v1.45
* Bump to v1.45.1
* Skip failing RichText tests on Firefox
Co-authored-by: Mamaduka
Co-authored-by: swissspidy
Co-authored-by: afercia
Co-authored-by: WunderBart
Co-authored-by: ellatrix
---
package-lock.json | 54 +++++++++----------
package.json | 2 +-
packages/scripts/package.json | 2 +-
.../specs/editor/various/rich-text.spec.js | 4 +-
.../site-editor/navigation-editor.spec.js | 8 ++-
5 files changed, 34 insertions(+), 36 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index fe39c663c3107..1cc4fb4bd8647 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,7 +98,7 @@
"@octokit/rest": "16.26.0",
"@octokit/types": "6.34.0",
"@octokit/webhooks-types": "5.8.0",
- "@playwright/test": "1.43.0",
+ "@playwright/test": "1.45.1",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
"@react-native/babel-preset": "0.73.10",
"@react-native/metro-babel-transformer": "0.73.10",
@@ -6927,18 +6927,18 @@
}
},
"node_modules/@playwright/test": {
- "version": "1.43.0",
- "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz",
- "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==",
+ "version": "1.45.1",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
+ "integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
"dev": true,
"dependencies": {
- "playwright": "1.43.0"
+ "playwright": "1.45.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
- "node": ">=16"
+ "node": ">=18"
}
},
"node_modules/@pmmmwh/react-refresh-webpack-plugin": {
@@ -41994,33 +41994,33 @@
"dev": true
},
"node_modules/playwright": {
- "version": "1.43.0",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz",
- "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==",
+ "version": "1.45.1",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
+ "integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
"dev": true,
"dependencies": {
- "playwright-core": "1.43.0"
+ "playwright-core": "1.45.1"
},
"bin": {
"playwright": "cli.js"
},
"engines": {
- "node": ">=16"
+ "node": ">=18"
},
"optionalDependencies": {
"fsevents": "2.3.2"
}
},
"node_modules/playwright-core": {
- "version": "1.43.0",
- "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz",
- "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==",
+ "version": "1.45.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
+ "integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
"dev": true,
"bin": {
"playwright-core": "cli.js"
},
"engines": {
- "node": ">=16"
+ "node": ">=18"
}
},
"node_modules/please-upgrade-node": {
@@ -55671,7 +55671,7 @@
"npm": ">=8.19.2"
},
"peerDependencies": {
- "@playwright/test": "^1.43.0",
+ "@playwright/test": "^1.45.1",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
@@ -60996,12 +60996,12 @@
}
},
"@playwright/test": {
- "version": "1.43.0",
- "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz",
- "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==",
+ "version": "1.45.1",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.1.tgz",
+ "integrity": "sha512-Wo1bWTzQvGA7LyKGIZc8nFSTFf2TkthGIFBR+QVNilvwouGzFd4PYukZe3rvf5PSqjHi1+1NyKSDZKcQWETzaA==",
"dev": true,
"requires": {
- "playwright": "1.43.0"
+ "playwright": "1.45.1"
}
},
"@pmmmwh/react-refresh-webpack-plugin": {
@@ -88856,19 +88856,19 @@
"dev": true
},
"playwright": {
- "version": "1.43.0",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz",
- "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==",
+ "version": "1.45.1",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.1.tgz",
+ "integrity": "sha512-Hjrgae4kpSQBr98nhCj3IScxVeVUixqj+5oyif8TdIn2opTCPEzqAqNMeK42i3cWDCVu9MI+ZsGWw+gVR4ISBg==",
"dev": true,
"requires": {
"fsevents": "2.3.2",
- "playwright-core": "1.43.0"
+ "playwright-core": "1.45.1"
}
},
"playwright-core": {
- "version": "1.43.0",
- "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz",
- "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==",
+ "version": "1.45.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.1.tgz",
+ "integrity": "sha512-LF4CUUtrUu2TCpDw4mcrAIuYrEjVDfT1cHbJMfwnE2+1b8PZcFzPNgvZCvq2JfQ4aTjRCCHw5EJ2tmr2NSzdPg==",
"dev": true
},
"please-upgrade-node": {
diff --git a/package.json b/package.json
index 2922cc799aee0..2ed3f7c108354 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
"@octokit/rest": "16.26.0",
"@octokit/types": "6.34.0",
"@octokit/webhooks-types": "5.8.0",
- "@playwright/test": "1.43.0",
+ "@playwright/test": "1.45.1",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
"@react-native/babel-preset": "0.73.10",
"@react-native/metro-babel-transformer": "0.73.10",
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index b0a9eb957983c..6d735745977da 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -92,7 +92,7 @@
"webpack-dev-server": "^4.15.1"
},
"peerDependencies": {
- "@playwright/test": "^1.43.0",
+ "@playwright/test": "^1.45.1",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
diff --git a/test/e2e/specs/editor/various/rich-text.spec.js b/test/e2e/specs/editor/various/rich-text.spec.js
index aa56639281b49..29b4fb3d58901 100644
--- a/test/e2e/specs/editor/various/rich-text.spec.js
+++ b/test/e2e/specs/editor/various/rich-text.spec.js
@@ -119,7 +119,7 @@ test.describe( 'RichText (@firefox, @webkit)', () => {
expect( count ).toBe( 1 );
} );
- test( 'should return focus when pressing formatting button', async ( {
+ test( 'should return focus when pressing formatting button (-firefox)', async ( {
page,
editor,
} ) => {
@@ -415,7 +415,7 @@ test.describe( 'RichText (@firefox, @webkit)', () => {
] );
} );
- test( 'should update internal selection after fresh focus', async ( {
+ test( 'should update internal selection after fresh focus (-firefox)', async ( {
page,
editor,
pageUtils,
diff --git a/test/e2e/specs/site-editor/navigation-editor.spec.js b/test/e2e/specs/site-editor/navigation-editor.spec.js
index 2813ceb13748a..64a80e814d629 100644
--- a/test/e2e/specs/site-editor/navigation-editor.spec.js
+++ b/test/e2e/specs/site-editor/navigation-editor.spec.js
@@ -62,11 +62,9 @@ test.describe( 'Editing Navigation Menus', () => {
await expect( navBlockNode ).toBeVisible();
// The Navigation block description should contain the locked state information.
- const navBlockNodeDescriptionId =
- await navBlockNode.getAttribute( 'aria-describedby' );
- await expect(
- listView.locator( `id=${ navBlockNodeDescriptionId }` )
- ).toHaveText( /This block is locked./ );
+ await expect( navBlockNode ).toHaveAccessibleDescription(
+ /This block is locked./
+ );
// The block should have no options menu.
await expect(
From 653759abf19b996da2c830024841691125505175 Mon Sep 17 00:00:00 2001
From: Carolina Nymark
Date: Mon, 15 Jul 2024 10:33:30 +0200
Subject: [PATCH 02/36] Gallery: Add border block support (#63428)
Add border block support to the gallery block,
Co-authored-by: carolinan
Co-authored-by: aaronrobertshaw
Co-authored-by: andrewserong
Co-authored-by: paaljoachim
Co-authored-by: jasmussen
---
packages/block-library/src/gallery/block.json | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
index e9018704bf6bf..6a2129ec1e056 100644
--- a/packages/block-library/src/gallery/block.json
+++ b/packages/block-library/src/gallery/block.json
@@ -112,6 +112,16 @@
"supports": {
"anchor": true,
"align": true,
+ "__experimentalBorder": {
+ "radius": true,
+ "color": true,
+ "width": true,
+ "style": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true
+ }
+ },
"html": false,
"units": [ "px", "em", "rem", "vh", "vw" ],
"spacing": {
From 469f37959f9cff3b62d843bf04c052a468b0f3f1 Mon Sep 17 00:00:00 2001
From: Carolina Nymark
Date: Mon, 15 Jul 2024 11:48:33 +0200
Subject: [PATCH 03/36] Show visual label for Categories block in dropdown mode
(#56364)
Categories: Add an option for making the label for the select element visible, and make the label editable.
Unlinked contributors: tofumatt.
Co-authored-by: carolinan
Co-authored-by: afercia
Co-authored-by: jasmussen
---
docs/reference-guides/core-blocks.md | 2 +-
.../block-library/src/categories/block.json | 8 +++++
packages/block-library/src/categories/edit.js | 36 ++++++++++++++++---
.../block-library/src/categories/editor.scss | 4 +++
.../block-library/src/categories/index.php | 5 ++-
.../block-library/src/categories/style.scss | 4 +++
.../fixtures/blocks/core__categories.json | 3 +-
7 files changed, 55 insertions(+), 7 deletions(-)
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 67cebe47fc41b..492aae535f42c 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -79,7 +79,7 @@ Display a list of all categories. ([Source](https://github.com/WordPress/gutenbe
- **Name:** core/categories
- **Category:** widgets
- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** displayAsDropdown, showEmpty, showHierarchy, showOnlyTopLevel, showPostCounts
+- **Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts
## Code
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
index 820ac8945f50f..7f74befa3b681 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -26,6 +26,14 @@
"showEmpty": {
"type": "boolean",
"default": false
+ },
+ "label": {
+ "type": "string",
+ "__experimentalRole": "content"
+ },
+ "showLabel": {
+ "type": "boolean",
+ "default": true
}
},
"supports": {
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 0c4df48d7c3dc..48d505eeb75ae 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -14,7 +14,11 @@ import {
VisuallyHidden,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+ InspectorControls,
+ useBlockProps,
+ RichText,
+} from '@wordpress/block-editor';
import { decodeEntities } from '@wordpress/html-entities';
import { __ } from '@wordpress/i18n';
import { pin } from '@wordpress/icons';
@@ -27,6 +31,8 @@ export default function CategoriesEdit( {
showPostCounts,
showOnlyTopLevel,
showEmpty,
+ label,
+ showLabel,
},
setAttributes,
className,
@@ -92,9 +98,22 @@ export default function CategoriesEdit( {
const categoriesList = getCategoriesList( parentId );
return (
<>
-
- { __( 'Categories' ) }
-
+ { showLabel ? (
+
+ setAttributes( { label: html } )
+ }
+ />
+ ) : (
+
+ { label ? label : __( 'Categories' ) }
+
+ ) }
-
+
);
};
diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
index 37cea02b0f0f9..5f581e898c953 100644
--- a/packages/editor/src/components/post-taxonomies/flat-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
@@ -5,6 +5,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
import { useEffect, useMemo, useState } from '@wordpress/element';
import { FormTokenField, withFilters } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
import { store as coreStore } from '@wordpress/core-data';
import { useDebounce } from '@wordpress/compose';
import { speak } from '@wordpress/a11y';
@@ -55,16 +56,28 @@ const termNamesToIds = ( names, terms ) => {
/**
* Renders a flat term selector component.
*
- * @param {Object} props The component props.
- * @param {string} props.slug The slug of the taxonomy.
+ * @param {Object} props The component props.
+ * @param {string} props.slug The slug of the taxonomy.
+ * @param {boolean} props.__nextHasNoMarginBottom Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
*
* @return {JSX.Element} The rendered flat term selector component.
*/
-export function FlatTermSelector( { slug } ) {
+export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
const [ values, setValues ] = useState( [] );
const [ search, setSearch ] = useState( '' );
const debouncedSearch = useDebounce( setSearch, 500 );
+ if ( ! __nextHasNoMarginBottom ) {
+ deprecated(
+ 'Bottom margin styles for wp.editor.PostTaxonomiesFlatTermSelector',
+ {
+ since: '6.7',
+ version: '7.0',
+ hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+ }
+ );
+ }
+
const {
terms,
termIds,
@@ -290,6 +303,7 @@ export function FlatTermSelector( { slug } ) {
removed: termRemovedLabel,
remove: removeTermLabel,
} }
+ __nextHasNoMarginBottom={ __nextHasNoMarginBottom }
/>
>
diff --git a/packages/editor/src/components/post-taxonomies/index.js b/packages/editor/src/components/post-taxonomies/index.js
index d96027a918c18..dc2345fd6197f 100644
--- a/packages/editor/src/components/post-taxonomies/index.js
+++ b/packages/editor/src/components/post-taxonomies/index.js
@@ -32,10 +32,17 @@ export function PostTaxonomies( { taxonomyWrapper = identity } ) {
const TaxonomyComponent = taxonomy.hierarchical
? HierarchicalTermSelector
: FlatTermSelector;
+ const taxonomyComponentProps = {
+ slug: taxonomy.slug,
+ ...( taxonomy.hierarchical
+ ? {}
+ : { __nextHasNoMarginBottom: true } ),
+ };
+
return (
{ taxonomyWrapper(
- ,
+ ,
taxonomy
) }
diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index c15be5678a446..f45273516f53b 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -33,7 +33,7 @@
}
}
- p:not(.components-base-control__help) {
+ p:not(.components-base-control__help, .components-form-token-field__help) {
margin-top: 0;
}
From 29a3e3c63ed115dbb55f1c235974be1a7c768c4b Mon Sep 17 00:00:00 2001
From: Nik Tsekouras
Date: Mon, 15 Jul 2024 18:43:01 +0300
Subject: [PATCH 13/36] Query Loop: Fix 'block' scoped variations to get the
`query` defaults (#63477)
Co-authored-by: ntsekouras
Co-authored-by: youknowriad
---
.../src/query/edit/query-placeholder.js | 22 +------------------
.../specs/editor/various/is-typing.spec.js | 3 +++
2 files changed, 4 insertions(+), 21 deletions(-)
diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index 1b81a2893ec4f..eec982c9750cf 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -25,7 +25,6 @@ export default function QueryPlaceholder( {
clientId,
name,
openPatternSelectionModal,
- setAttributes,
} ) {
const [ isStartingBlank, setIsStartingBlank ] = useState( false );
const blockProps = useBlockProps();
@@ -64,7 +63,6 @@ export default function QueryPlaceholder( {
@@ -101,13 +99,7 @@ export default function QueryPlaceholder( {
);
}
-function QueryVariationPicker( {
- clientId,
- attributes,
- setAttributes,
- icon,
- label,
-} ) {
+function QueryVariationPicker( { clientId, attributes, icon, label } ) {
const scopeVariations = useScopedBlockVariations( attributes );
const { replaceInnerBlocks } = useDispatch( blockEditorStore );
const blockProps = useBlockProps();
@@ -118,18 +110,6 @@ function QueryVariationPicker( {
label={ label }
variations={ scopeVariations }
onSelect={ ( variation ) => {
- if ( variation.attributes ) {
- setAttributes( {
- ...variation.attributes,
- query: {
- ...variation.attributes.query,
- postType:
- attributes.query.postType ||
- variation.attributes.query.postType,
- },
- namespace: attributes.namespace,
- } );
- }
if ( variation.innerBlocks ) {
replaceInnerBlocks(
clientId,
diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js
index 8063f688409c4..e2c65f01928e0 100644
--- a/test/e2e/specs/editor/various/is-typing.spec.js
+++ b/test/e2e/specs/editor/various/is-typing.spec.js
@@ -53,6 +53,9 @@ test.describe( 'isTyping', () => {
.getByRole( 'button', { name: 'Title & Date' } )
.click();
+ await editor.openDocumentSettingsSidebar();
+ await page.getByLabel( 'Inherit query from template' ).click();
+
// Moving the mouse shows the toolbar.
await editor.showBlockToolbar();
// Open the dropdown.
From 0b8e0b54240708a7b62318107593dbe43999a2df Mon Sep 17 00:00:00 2001
From: Lena Morita
Date: Tue, 16 Jul 2024 03:34:24 +0900
Subject: [PATCH 14/36] FontSizePicker: Fix docs for default `units` (#63577)
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla
---
packages/components/src/font-size-picker/README.md | 2 +-
packages/components/src/font-size-picker/types.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 2a342d3de9114..790468acc6c1f 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -92,7 +92,7 @@ Size of the control.
Available units for custom font size selection.
- Required: No
-- Default: `[ 'px', 'em', 'rem' ]`
+- Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]`
### `value`: `number | string`
diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index 0072c47df6f05..39016849fd9f9 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -29,7 +29,7 @@ export type FontSizePickerProps = {
/**
* Available units for custom font size selection.
*
- * @default `[ 'px', 'em', 'rem' ]`
+ * @default [ 'px', 'em', 'rem', 'vw', 'vh' ]
*/
units?: string[];
/**
From afb24fc8d84fa8561cd181eb7e1b1cd39ab7c5b6 Mon Sep 17 00:00:00 2001
From: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Date: Mon, 15 Jul 2024 22:33:52 +0100
Subject: [PATCH 15/36] Font Appearance Control: Refactor font appearance
fallbacks (#63215)
* Refactor font appearance fallbacks
* Create new findNearestStyleAndWeight function
* Add tests for findNearestStyleAndWeight
* Refactor findNearestStyleAndWeight
* Add a test for normal/100
* Add comments
* Tidy up comments
* Fix test description
* Update test descriptions
* Update deps and wrap setFontAppearance and resetFontAppearance in useCallback
* Add e2e test for appearance control dropdown menu
* Add periods to end of comments
* Use better test data for font appearance e2e default test
* Add findNearestFontStyle function with tests
* Limit the dependency array to just fontFamily
* Add normal font style test
* Add invalid font style test
* Try toHaveText instead of toContainText
* Try using TT4 for e2e test rather than TT3
* Use combobox role rather than button in e2e test
* Set nearestFontStyle to an empty string by default
* Refactor findNearestFontStyle
* Do not activate a theme in font appearance e2e test
* Run findNearestStyleAndWeight only when fontFamily has changed
* Only trigger appearance onChange if values are different
Co-authored-by: mikachan
Co-authored-by: talldan
Co-authored-by: creativecoder
Co-authored-by: noisysocks
Co-authored-by: t-hamano
Co-authored-by: Mamaduka
---
.../global-styles/test/typography-utils.js | 325 ++++++++++++++++++
.../global-styles/typography-panel.js | 80 ++---
.../global-styles/typography-utils.js | 110 +++++-
.../various/font-appearance-control.spec.js | 90 +++++
4 files changed, 554 insertions(+), 51 deletions(-)
create mode 100644 test/e2e/specs/editor/various/font-appearance-control.spec.js
diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js
index 115de8cdf2563..41a7d6b5e37b8 100644
--- a/packages/block-editor/src/components/global-styles/test/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js
@@ -6,6 +6,8 @@ import {
getFluidTypographyOptionsFromSettings,
getMergedFontFamiliesAndFontFamilyFaces,
findNearestFontWeight,
+ findNearestFontStyle,
+ findNearestStyleAndWeight,
} from '../typography-utils';
describe( 'typography utils', () => {
@@ -951,6 +953,329 @@ describe( 'typography utils', () => {
);
} );
+ describe( 'findNearestFontStyle', () => {
+ [
+ {
+ message:
+ 'should return empty string when newFontStyleValue is `undefined`',
+ availableFontStyles: undefined,
+ newFontStyleValue: undefined,
+ expected: '',
+ },
+ {
+ message:
+ 'should return newFontStyleValue value when availableFontStyles is empty',
+ availableFontStyles: [],
+ newFontStyleValue: 'italic',
+ expected: 'italic',
+ },
+ {
+ message:
+ 'should return empty string if there is no new font style available',
+ availableFontStyles: [ { name: 'Normal', value: 'normal' } ],
+ newFontStyleValue: 'italic',
+ expected: '',
+ },
+ {
+ message:
+ 'should return empty string if the new font style is invalid',
+ availableFontStyles: [
+ { name: 'Regular', value: 'normal' },
+ { name: 'Italic', value: 'italic' },
+ ],
+ newFontStyleValue: 'not-valid',
+ expected: '',
+ },
+ {
+ message: 'should return italic if oblique is not available',
+ availableFontStyles: [
+ { name: 'Regular', value: 'normal' },
+ { name: 'Italic', value: 'italic' },
+ ],
+ newFontStyleValue: 'oblique',
+ expected: 'italic',
+ },
+ {
+ message: 'should return normal if normal is available',
+ availableFontStyles: [
+ { name: 'Regular', value: 'normal' },
+ { name: 'Italic', value: 'italic' },
+ ],
+ newFontStyleValue: 'normal',
+ expected: 'normal',
+ },
+ ].forEach(
+ ( {
+ message,
+ availableFontStyles,
+ newFontStyleValue,
+ expected,
+ } ) => {
+ it( `${ message }`, () => {
+ expect(
+ findNearestFontStyle(
+ availableFontStyles,
+ newFontStyleValue
+ )
+ ).toEqual( expected );
+ } );
+ }
+ );
+ } );
+
+ describe( 'findNearestStyleAndWeight', () => {
+ [
+ {
+ message: 'should return empty object when all values are empty',
+ fontFamilyFaces: [],
+ fontStyle: undefined,
+ fontWeight: undefined,
+ expected: {},
+ },
+ {
+ message:
+ 'should return original fontStyle and fontWeight when fontFamilyFaces is empty',
+ fontFamilyFaces: [],
+ fontStyle: 'italic',
+ fontWeight: '700',
+ expected: {
+ nearestFontStyle: 'italic',
+ nearestFontWeight: '700',
+ },
+ },
+ {
+ message:
+ 'should return undefined values if both fontStyle and fontWeight are not available',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'ABeeZee',
+ fontStyle: 'italic',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+ ],
+ },
+ ],
+ fontStyle: undefined,
+ fontWeight: undefined,
+ expected: {
+ nearestFontStyle: undefined,
+ nearestFontWeight: undefined,
+ },
+ },
+ {
+ message:
+ 'should return nearest fontStyle and fontWeight for normal/400',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'italic',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '700',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+ ],
+ },
+ ],
+ fontStyle: 'normal',
+ fontWeight: '400',
+ expected: {
+ nearestFontStyle: 'normal',
+ nearestFontWeight: '400',
+ },
+ },
+ {
+ message:
+ 'should return nearest fontStyle and fontWeight for normal/100',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'italic',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '700',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+ ],
+ },
+ ],
+ fontStyle: 'normal',
+ fontWeight: '100',
+ expected: {
+ nearestFontStyle: 'normal',
+ nearestFontWeight: '400',
+ },
+ },
+ {
+ message:
+ 'should return nearest fontStyle and fontWeight for italic/900',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'italic',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '700',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+ ],
+ },
+ ],
+ fontStyle: 'italic',
+ fontWeight: '900',
+ expected: {
+ nearestFontStyle: 'italic',
+ nearestFontWeight: '700',
+ },
+ },
+ {
+ message:
+ 'should return nearest fontStyle and fontWeight for oblique/600',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'italic',
+ fontWeight: '700',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+ ],
+ },
+ ],
+ fontStyle: 'oblique',
+ fontWeight: '600',
+ expected: {
+ nearestFontStyle: 'italic',
+ nearestFontWeight: '700',
+ },
+ },
+ {
+ message:
+ 'should return nearest fontStyle and fontWeight for 300 font weight and empty font style',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'italic',
+ fontWeight: '700',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+ ],
+ },
+ ],
+ fontStyle: undefined,
+ fontWeight: '300',
+ expected: {
+ nearestFontStyle: 'normal',
+ nearestFontWeight: '400',
+ },
+ },
+ {
+ message:
+ 'should return nearest fontStyle and fontWeight for oblique font style and empty font weight',
+ fontFamilyFaces: [
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+ ],
+ },
+ {
+ fontFamily: 'IBM Plex Mono',
+ fontStyle: 'italic',
+ fontWeight: '700',
+ src: [
+ 'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+ ],
+ },
+ ],
+ fontStyle: 'oblique',
+ fontWeight: undefined,
+ expected: {
+ nearestFontStyle: 'italic',
+ nearestFontWeight: '400',
+ },
+ },
+ ].forEach(
+ ( {
+ message,
+ fontFamilyFaces,
+ fontStyle,
+ fontWeight,
+ expected,
+ } ) => {
+ it( `${ message }`, () => {
+ expect(
+ findNearestStyleAndWeight(
+ fontFamilyFaces,
+ fontStyle,
+ fontWeight
+ )
+ ).toEqual( expected );
+ } );
+ }
+ );
+ } );
+
describe( 'typography utils', () => {
[
{
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index c497ea4683391..f6a389a5bc96d 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -25,9 +25,8 @@ import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
import {
getMergedFontFamiliesAndFontFamilyFaces,
- findNearestFontWeight,
+ findNearestStyleAndWeight,
} from './typography-utils';
-import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
const MIN_TEXT_COLUMNS = 1;
const MAX_TEXT_COLUMNS = 6;
@@ -236,57 +235,50 @@ export default function TypographyPanel( {
const hasFontWeights = settings?.typography?.fontWeight;
const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
- const setFontAppearance = ( {
- fontStyle: newFontStyle,
- fontWeight: newFontWeight,
- } ) => {
- onChange( {
- ...value,
- typography: {
- ...value?.typography,
- fontStyle: newFontStyle || undefined,
- fontWeight: newFontWeight || undefined,
- },
- } );
- };
+ const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
+ fontFamilyFaces,
+ fontStyle,
+ fontWeight
+ );
+ const setFontAppearance = useCallback(
+ ( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
+ // Only update the font style and weight if they have changed.
+ if ( newFontStyle !== fontStyle || newFontWeight !== fontWeight ) {
+ onChange( {
+ ...value,
+ typography: {
+ ...value?.typography,
+ fontStyle: newFontStyle || undefined,
+ fontWeight: newFontWeight || undefined,
+ },
+ } );
+ }
+ },
+ [ fontStyle, fontWeight, onChange, value ]
+ );
const hasFontAppearance = () =>
!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;
- const resetFontAppearance = () => {
+ const resetFontAppearance = useCallback( () => {
setFontAppearance( {} );
- };
+ }, [ setFontAppearance ] );
- // Check if previous font style and weight values are available in the new font family
+ // Check if previous font style and weight values are available in the new font family.
useEffect( () => {
- const { fontStyles, fontWeights, isSystemFont } =
- getFontStylesAndWeights( fontFamilyFaces );
- const hasFontStyle = fontStyles?.some(
- ( { value: fs } ) => fs === fontStyle
- );
- const hasFontWeight = fontWeights?.some(
- ( { value: fw } ) => fw === fontWeight
- );
-
- // Try to set nearest available font weight
- if ( ! hasFontWeight && fontWeight ) {
+ if ( nearestFontStyle && nearestFontWeight ) {
setFontAppearance( {
- fontStyle,
- fontWeight: findNearestFontWeight( fontWeights, fontWeight ),
+ fontStyle: nearestFontStyle,
+ fontWeight: nearestFontWeight,
} );
- }
-
- // Set the same weight and style values if the font family is a system font or if both are the same
- if ( isSystemFont || ( hasFontStyle && hasFontWeight ) ) {
- setFontAppearance( {
- fontStyle,
- fontWeight,
- } );
- }
-
- // Reset font appearance if the font family does not have the selected font style
- if ( ! hasFontStyle ) {
+ } else {
+ // Reset font appearance if there are no available styles or weights.
resetFontAppearance();
}
- }, [ fontFamily ] );
+ }, [
+ nearestFontStyle,
+ nearestFontWeight,
+ resetFontAppearance,
+ setFontAppearance,
+ ] );
// Line Height
const hasLineHeightEnabled = useHasLineHeightControl( settings );
diff --git a/packages/block-editor/src/components/global-styles/typography-utils.js b/packages/block-editor/src/components/global-styles/typography-utils.js
index 0d4c1b29b8b66..59ff04bf21ebc 100644
--- a/packages/block-editor/src/components/global-styles/typography-utils.js
+++ b/packages/block-editor/src/components/global-styles/typography-utils.js
@@ -11,6 +11,7 @@ import {
getComputedFluidTypographyValue,
getTypographyValueAndUnit,
} from '../font-sizes/fluid-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
/**
* @typedef {Object} FluidPreset
@@ -127,9 +128,9 @@ export function getFluidTypographyOptionsFromSettings( settings ) {
* Returns an object of merged font families and the font faces from the selected font family
* based on the theme.json settings object and the currently selected font family.
*
- * @param {Object} settings Theme.json settings
- * @param {string} selectedFontFamily Decoded font family string
- * @return {Object} Merged font families and font faces from the selected font family
+ * @param {Object} settings Theme.json settings.
+ * @param {string} selectedFontFamily Decoded font family string.
+ * @return {Object} Merged font families and font faces from the selected font family.
*/
export function getMergedFontFamiliesAndFontFamilyFaces(
settings,
@@ -153,11 +154,10 @@ export function getMergedFontFamiliesAndFontFamilyFaces(
* Returns the nearest font weight value from the available font weight list based on the new font weight.
* The nearest font weight is the one with the smallest difference from the new font weight.
*
- * @param {Array} availableFontWeights Array of available font weights
- * @param {string} newFontWeightValue New font weight value
- * @return {string} Nearest font weight
+ * @param {Array} availableFontWeights Array of available font weights.
+ * @param {string} newFontWeightValue New font weight value.
+ * @return {string} Nearest font weight.
*/
-
export function findNearestFontWeight(
availableFontWeights,
newFontWeightValue
@@ -185,3 +185,99 @@ export function findNearestFontWeight(
return nearestFontWeight;
}
+
+/**
+ * Returns the nearest font style based on the new font style.
+ * Defaults to an empty string if the new font style is not valid or available.
+ *
+ * @param {Array} availableFontStyles Array of available font weights.
+ * @param {string} newFontStyleValue New font style value.
+ * @return {string} Nearest font style or an empty string.
+ */
+export function findNearestFontStyle( availableFontStyles, newFontStyleValue ) {
+ if ( typeof newFontStyleValue !== 'string' || ! newFontStyleValue ) {
+ return '';
+ }
+
+ const validStyles = [ 'normal', 'italic', 'oblique' ];
+ if ( ! validStyles.includes( newFontStyleValue ) ) {
+ return '';
+ }
+
+ if (
+ ! availableFontStyles ||
+ availableFontStyles.length === 0 ||
+ availableFontStyles.find(
+ ( style ) => style.value === newFontStyleValue
+ )
+ ) {
+ return newFontStyleValue;
+ }
+
+ if (
+ newFontStyleValue === 'oblique' &&
+ ! availableFontStyles.find( ( style ) => style.value === 'oblique' )
+ ) {
+ return 'italic';
+ }
+
+ return '';
+}
+
+/**
+ * Returns the nearest font style and weight based on the available font family faces and the new font style and weight.
+ *
+ * @param {Array} fontFamilyFaces Array of available font family faces.
+ * @param {string} fontStyle New font style. Defaults to previous value.
+ * @param {string} fontWeight New font weight. Defaults to previous value.
+ * @return {Object} Nearest font style and font weight.
+ */
+export function findNearestStyleAndWeight(
+ fontFamilyFaces,
+ fontStyle,
+ fontWeight
+) {
+ let nearestFontStyle = fontStyle;
+ let nearestFontWeight = fontWeight;
+
+ const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
+ getFontStylesAndWeights( fontFamilyFaces );
+
+ // Check if the new font style and weight are available in the font family faces.
+ const hasFontStyle = fontStyles?.some(
+ ( { value: fs } ) => fs === fontStyle
+ );
+ const hasFontWeight = fontWeights?.some(
+ ( { value: fw } ) => fw === fontWeight
+ );
+
+ if ( ! hasFontStyle ) {
+ /*
+ * Default to italic if oblique is not available.
+ * Or find the nearest font style based on the nearest font weight.
+ */
+ nearestFontStyle = fontStyle
+ ? findNearestFontStyle( fontStyles, fontStyle )
+ : combinedStyleAndWeightOptions?.find(
+ ( option ) =>
+ option.style.fontWeight ===
+ findNearestFontWeight( fontWeights, fontWeight )
+ )?.style?.fontStyle;
+ }
+
+ if ( ! hasFontWeight ) {
+ /*
+ * Find the nearest font weight based on available weights.
+ * Or find the nearest font weight based on the nearest font style.
+ */
+ nearestFontWeight = fontWeight
+ ? findNearestFontWeight( fontWeights, fontWeight )
+ : combinedStyleAndWeightOptions?.find(
+ ( option ) =>
+ option.style.fontStyle ===
+ ( nearestFontStyle || fontStyle )
+ )?.style?.fontWeight;
+ }
+
+ return { nearestFontStyle, nearestFontWeight };
+}
diff --git a/test/e2e/specs/editor/various/font-appearance-control.spec.js b/test/e2e/specs/editor/various/font-appearance-control.spec.js
new file mode 100644
index 0000000000000..4b148b6dd8587
--- /dev/null
+++ b/test/e2e/specs/editor/various/font-appearance-control.spec.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Appearance Control dropdown menu', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test( 'should apply available font weight and styles from active font family', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'Regular',
+ style: {
+ typography: { fontWeight: '400', fontStyle: 'normal' },
+ },
+ },
+ } );
+ await page
+ .getByRole( 'button', { name: 'Typography options' } )
+ .click();
+ await expect(
+ page.getByRole( 'combobox', { name: 'Appearance' } )
+ ).toHaveText( 'Regular' );
+
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'Extra Light Italic',
+ style: {
+ typography: { fontWeight: '200', fontStyle: 'italic' },
+ },
+ },
+ } );
+ await page
+ .getByRole( 'button', { name: 'Typography options' } )
+ .click();
+ await expect(
+ page.getByRole( 'combobox', { name: 'Appearance' } )
+ ).toHaveText( 'Extra Light Italic' );
+
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'Bold Italic',
+ style: {
+ typography: { fontWeight: '700', fontStyle: 'italic' },
+ },
+ },
+ } );
+ await page
+ .getByRole( 'button', { name: 'Typography options' } )
+ .click();
+ await expect(
+ page.getByRole( 'combobox', { name: 'Appearance' } )
+ ).toHaveText( 'Bold Italic' );
+ } );
+
+ test( 'should apply Default appearance if weight and style are invalid', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'Default',
+ style: {
+ typography: {
+ fontWeight: '',
+ fontStyle: 'invalid-style',
+ },
+ },
+ },
+ } );
+ await page
+ .getByRole( 'button', { name: 'Typography options' } )
+ .click();
+ await page
+ .getByRole( 'menuitemcheckbox', { name: 'Show Appearance' } )
+ .click();
+ await expect(
+ page.getByRole( 'combobox', { name: 'Appearance' } )
+ ).toHaveText( 'Default' );
+ } );
+} );
From 81d0e66b82a2d0192bef3dfc4a63e725e2f30abb Mon Sep 17 00:00:00 2001
From: Ben Dwyer
Date: Mon, 15 Jul 2024 23:19:22 +0100
Subject: [PATCH 16/36] Style variations: Don't display the default if its the
only variation (#63555)
Co-authored-by: scruffian
Co-authored-by: jeryj
Co-authored-by: bgardner
---
.../components/global-styles/style-variations-container.js | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
index aba86183ebb60..18fc6f6ad9056 100644
--- a/packages/edit-site/src/components/global-styles/style-variations-container.js
+++ b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -110,6 +110,10 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
];
}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
+ if ( ! fullStyleVariations || fullStyleVariations?.length < 1 ) {
+ return null;
+ }
+
return (
Date: Tue, 16 Jul 2024 10:21:17 +1000
Subject: [PATCH 17/36] Quote: Add spacing supports (#63545)
Co-authored-by: aaronrobertshaw
Co-authored-by: fabiankaegy
---
docs/reference-guides/core-blocks.md | 2 +-
packages/block-library/src/quote/block.json | 4 +++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 492aae535f42c..e796b29ff662f 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -783,7 +783,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
- **Name:** core/quote
- **Category:** text
-- **Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** citation, textAlign, value
## Read More
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index 7ca81b364b3ef..385825a86168a 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -70,7 +70,9 @@
"allowEditing": false
},
"spacing": {
- "blockGap": true
+ "blockGap": true,
+ "padding": true,
+ "margin": true
},
"interactivity": {
"clientNavigation": true
From 71ee76e8b222165dd179081a061d410705638a17 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:21:58 +1000
Subject: [PATCH 18/36] Heading: Add border support (#63539)
Co-authored-by: aaronrobertshaw
Co-authored-by: carolinan
---
packages/block-library/src/heading/block.json | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 39e985038c323..0bbe19b01098e 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -30,6 +30,18 @@
"anchor": true,
"className": true,
"splitting": true,
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ },
"color": {
"gradients": true,
"link": true,
From 2d74bd64645fd667a7e5329df68983b2c59db2d3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:46:26 +1000
Subject: [PATCH 19/36] Background Image: Make panel appear in a consistent
location (#63551)
Co-authored-by: aaronrobertshaw
Co-authored-by: andrewserong
Co-authored-by: Mamaduka
Co-authored-by: jasmussen
Co-authored-by: jameskoster
---
.../src/components/block-inspector/index.js | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index e01cd09575269..9daf29f8043bb 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -132,6 +132,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
+
{
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
+
{
label={ borderPanelLabel }
/>
-
From 8aad1dc460825710fa6a9e136d0ffb393648b5b8 Mon Sep 17 00:00:00 2001
From: Ramon
Date: Tue, 16 Jul 2024 12:21:51 +1000
Subject: [PATCH 20/36] Background: add background attachment to top level
styles (#61382)
Co-authored-by: ramonjd
Co-authored-by: aaronrobertshaw
Co-authored-by: jameskoster
---
backport-changelog/6.7/6991.md | 3 ++
.../theme-json-reference/theme-json-living.md | 1 +
lib/block-supports/background.php | 12 +++----
lib/class-wp-theme-json-gutenberg.php | 10 +++---
.../global-styles/background-panel.js | 22 ++++++++++++-
.../components/global-styles/screen-block.js | 7 ++--
.../style-engine/class-wp-style-engine.php | 14 +++++---
.../src/styles/background/index.ts | 13 ++++++++
packages/style-engine/src/test/index.js | 6 ++++
phpunit/block-supports/background-test.php | 11 ++++---
phpunit/class-wp-theme-json-test.php | 33 ++++++++++---------
phpunit/style-engine/style-engine-test.php | 20 ++++++-----
schemas/json/theme.json | 11 +++++++
13 files changed, 115 insertions(+), 48 deletions(-)
create mode 100644 backport-changelog/6.7/6991.md
diff --git a/backport-changelog/6.7/6991.md b/backport-changelog/6.7/6991.md
new file mode 100644
index 0000000000000..4d5f1f85ec768
--- /dev/null
+++ b/backport-changelog/6.7/6991.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6991
+
+* https://github.com/WordPress/gutenberg/pull/61382
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index cf9ea9bc39113..d3f0b111d994d 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -216,6 +216,7 @@ Background styles.
| backgroundPosition | string, object | |
| backgroundRepeat | string, object | |
| backgroundSize | string, object | |
+| backgroundAttachment | string, object | |
---
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
index 57b8d75f03d35..811608127f47e 100644
--- a/lib/block-supports/background.php
+++ b/lib/block-supports/background.php
@@ -52,12 +52,12 @@ function gutenberg_render_background_support( $block_content, $block ) {
return $block_content;
}
- $background_styles = array();
- $background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
- $background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
- $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
- $background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
-
+ $background_styles = array();
+ $background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
+ $background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
+ $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
+ $background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
+ $background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null;
if ( ! empty( $background_styles['backgroundImage'] ) ) {
$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
// If the background size is set to `contain` and no position is set, set the position to `center`.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 049b1c3e9124a..df46c3399a2a7 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -234,6 +234,7 @@ class WP_Theme_JSON_Gutenberg {
'background-position' => array( 'background', 'backgroundPosition' ),
'background-repeat' => array( 'background', 'backgroundRepeat' ),
'background-size' => array( 'background', 'backgroundSize' ),
+ 'background-attachment' => array( 'background', 'backgroundAttachment' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
@@ -503,10 +504,11 @@ class WP_Theme_JSON_Gutenberg {
*/
const VALID_STYLES = array(
'background' => array(
- 'backgroundImage' => null,
- 'backgroundPosition' => null,
- 'backgroundRepeat' => null,
- 'backgroundSize' => null,
+ 'backgroundImage' => null,
+ 'backgroundAttachment' => null,
+ 'backgroundPosition' => null,
+ 'backgroundRepeat' => null,
+ 'backgroundSize' => null,
),
'border' => array(
'color' => null,
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 18ecc26b002d0..25ff5887eb5e6 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -451,6 +451,9 @@ function BackgroundSizeControls( {
const positionValue =
style?.background?.backgroundPosition ||
inheritedValue?.background?.backgroundPosition;
+ const attachmentValue =
+ style?.background?.backgroundAttachment ||
+ inheritedValue?.background?.backgroundAttachment;
/*
* An `undefined` value is replaced with any supplied
@@ -546,8 +549,17 @@ function BackgroundSizeControls( {
)
);
+ const toggleScrollWithPage = () =>
+ onChange(
+ setImmutably(
+ style,
+ [ 'background', 'backgroundAttachment' ],
+ attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+ )
+ );
+
return (
-
+
+
) }
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 272c12705bf88..02186fecdcea2 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -42,31 +42,37 @@ final class WP_Style_Engine {
*/
const BLOCK_STYLE_DEFINITIONS_METADATA = array(
'background' => array(
- 'backgroundImage' => array(
+ 'backgroundImage' => array(
'property_keys' => array(
'default' => 'background-image',
),
'value_func' => array( self::class, 'get_url_or_value_css_declaration' ),
'path' => array( 'background', 'backgroundImage' ),
),
- 'backgroundPosition' => array(
+ 'backgroundPosition' => array(
'property_keys' => array(
'default' => 'background-position',
),
'path' => array( 'background', 'backgroundPosition' ),
),
- 'backgroundRepeat' => array(
+ 'backgroundRepeat' => array(
'property_keys' => array(
'default' => 'background-repeat',
),
'path' => array( 'background', 'backgroundRepeat' ),
),
- 'backgroundSize' => array(
+ 'backgroundSize' => array(
'property_keys' => array(
'default' => 'background-size',
),
'path' => array( 'background', 'backgroundSize' ),
),
+ 'backgroundAttachment' => array(
+ 'property_keys' => array(
+ 'default' => 'background-attachment',
+ ),
+ 'path' => array( 'background', 'backgroundAttachment' ),
+ ),
),
'color' => array(
'text' => array(
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
index 6e79636cfda12..211b97343d89c 100644
--- a/packages/style-engine/src/styles/background/index.ts
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -74,9 +74,22 @@ const backgroundSize = {
},
};
+const backgroundAttachment = {
+ name: 'backgroundAttachment',
+ generate: ( style: Style, options: StyleOptions ) => {
+ return generateRule(
+ style,
+ options,
+ [ 'background', 'backgroundAttachment' ],
+ 'backgroundAttachment'
+ );
+ },
+};
+
export default [
backgroundImage,
backgroundPosition,
backgroundRepeat,
backgroundSize,
+ backgroundAttachment,
];
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index fbccc8c48bc92..f7960e19187a2 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -231,6 +231,7 @@ describe( 'getCSSRules', () => {
backgroundPosition: '50% 50%',
backgroundRepeat: 'no-repeat',
backgroundSize: '300px',
+ backgroundAttachment: 'fixed',
},
color: {
text: '#dddddd',
@@ -399,6 +400,11 @@ describe( 'getCSSRules', () => {
key: 'backgroundSize',
value: '300px',
},
+ {
+ selector: '.some-selector',
+ key: 'backgroundAttachment',
+ value: 'fixed',
+ },
] );
} );
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
index 165a65204793d..33e72e9b07010 100644
--- a/phpunit/block-supports/background-test.php
+++ b/phpunit/block-supports/background-test.php
@@ -149,21 +149,22 @@ public function data_background_block_support() {
'expected_wrapper' => 'Content
',
'wrapper' => 'Content
',
),
- 'background image style with contain, position, and repeat is applied' => array(
+ 'background image style with contain, position, attachment, and repeat is applied' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
'block_name' => 'test/background-rules-are-output',
'background_settings' => array(
'backgroundImage' => true,
),
'background_style' => array(
- 'backgroundImage' => array(
+ 'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
'source' => 'file',
),
- 'backgroundRepeat' => 'no-repeat',
- 'backgroundSize' => 'contain',
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundSize' => 'contain',
+ 'backgroundAttachment' => 'fixed',
),
- 'expected_wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
'wrapper' => 'Content
',
),
'background image style is appended if a style attribute already exists' => array(
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 06892aab2e45a..d76517091f44f 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -4765,12 +4765,13 @@ public function test_get_top_level_background_image_styles() {
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'background' => array(
- 'backgroundImage' => array(
+ 'backgroundImage' => array(
'url' => 'http://example.org/image.png',
),
- 'backgroundSize' => 'contain',
- 'backgroundRepeat' => 'no-repeat',
- 'backgroundPosition' => 'center center',
+ 'backgroundSize' => 'contain',
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundPosition' => 'center center',
+ 'backgroundAttachment' => 'fixed',
),
),
)
@@ -4781,7 +4782,7 @@ public function test_get_top_level_background_image_styles() {
'selector' => 'body',
);
- $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+ $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
$this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' );
$theme_json = new WP_Theme_JSON_Gutenberg(
@@ -4789,16 +4790,17 @@ public function test_get_top_level_background_image_styles() {
'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
'styles' => array(
'background' => array(
- 'backgroundImage' => "url('http://example.org/image.png')",
- 'backgroundSize' => 'contain',
- 'backgroundRepeat' => 'no-repeat',
- 'backgroundPosition' => 'center center',
+ 'backgroundImage' => "url('http://example.org/image.png')",
+ 'backgroundSize' => 'contain',
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundPosition' => 'center center',
+ 'backgroundAttachment' => 'fixed',
),
),
)
);
- $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
+ $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
$this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background image as string type do not match expectations' );
}
@@ -4810,10 +4812,11 @@ public function test_get_block_background_image_styles() {
'blocks' => array(
'core/group' => array(
'background' => array(
- 'backgroundImage' => "url('http://example.org/group.png')",
- 'backgroundSize' => 'cover',
- 'backgroundRepeat' => 'no-repeat',
- 'backgroundPosition' => 'center center',
+ 'backgroundImage' => "url('http://example.org/group.png')",
+ 'backgroundSize' => 'cover',
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundPosition' => 'center center',
+ 'backgroundAttachment' => 'fixed',
),
),
'core/quote' => array(
@@ -4852,7 +4855,7 @@ public function test_get_block_background_image_styles() {
),
);
- $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
+ $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
$this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
}
diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
index 63e5b3c1c7f7f..fdf5ccebabef9 100644
--- a/phpunit/style-engine/style-engine-test.php
+++ b/phpunit/style-engine/style-engine-test.php
@@ -506,22 +506,24 @@ public function data_wp_style_engine_get_styles() {
'inline_background_image_url_with_background_size' => array(
'block_styles' => array(
'background' => array(
- 'backgroundImage' => array(
+ 'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
),
- 'backgroundPosition' => 'center',
- 'backgroundRepeat' => 'no-repeat',
- 'backgroundSize' => 'cover',
+ 'backgroundPosition' => 'center',
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundSize' => 'cover',
+ 'backgroundAttachment' => 'fixed',
),
),
'options' => array(),
'expected_output' => array(
- 'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
+ 'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;",
'declarations' => array(
- 'background-image' => "url('https://example.com/image.jpg')",
- 'background-position' => 'center',
- 'background-repeat' => 'no-repeat',
- 'background-size' => 'cover',
+ 'background-image' => "url('https://example.com/image.jpg')",
+ 'background-position' => 'center',
+ 'background-repeat' => 'no-repeat',
+ 'background-size' => 'cover',
+ 'background-attachment' => 'fixed',
),
),
),
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index f1666253e3de3..607228d65b80e 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1220,6 +1220,17 @@
"$ref": "#/definitions/refComplete"
}
]
+ },
+ "backgroundAttachment": {
+ "description": "Sets the `background-attachment` CSS property.",
+ "oneOf": [
+ {
+ "type": "string"
+ },
+ {
+ "$ref": "#/definitions/refComplete"
+ }
+ ]
}
},
"additionalProperties": false
From 9751a16b3c380f1f50f02bf896b7c2e4862dabec Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 16 Jul 2024 13:01:18 +1000
Subject: [PATCH 21/36] Fix dropzone for background image block support
(#63588)
Co-authored-by: andrewserong
Co-authored-by: aaronrobertshaw
Co-authored-by: jasmussen
---
.../block-editor/src/components/global-styles/style.scss | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index f57bc79074153..bbd1964b81cea 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -103,8 +103,13 @@
.block-editor-global-styles-background-panel__image-tools-panel-item {
border: 1px solid $gray-300;
border-radius: 2px;
+
// Full width. ToolsPanel lays out children in a grid.
grid-column: 1 / -1;
+
+ // Ensure the dropzone is positioned to the size of the item.
+ position: relative;
+
// Since there is no option to skip rendering the drag'n'drop icon in drop
// zone, we hide it for now.
.components-drop-zone__content-icon {
From 79b907e87359d659a333e4b7a80ccd2c91d04288 Mon Sep 17 00:00:00 2001
From: Rich Tabor
Date: Mon, 15 Jul 2024 23:06:24 -0400
Subject: [PATCH 22/36] Layout: Fix invalid css for nested fullwidth layouts
with zero padding applied (#63436)
* apply a default unit when set to zero (frontend)
* apply a default unit when set to zero (editor)
* use 0 as a string
* Fix linting issue
* Add backport changelog entry
---------
Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Co-authored-by: richtabor
Co-authored-by: andrewserong
Co-authored-by: fabiankaegy
---
backport-changelog/6.6/7036.md | 3 +++
lib/block-supports/layout.php | 12 ++++++++++--
packages/block-editor/src/layouts/constrained.js | 12 ++++++++++--
3 files changed, 23 insertions(+), 4 deletions(-)
create mode 100644 backport-changelog/6.6/7036.md
diff --git a/backport-changelog/6.6/7036.md b/backport-changelog/6.6/7036.md
new file mode 100644
index 0000000000000..afc4d16bf011b
--- /dev/null
+++ b/backport-changelog/6.6/7036.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7036
+
+* https://github.com/WordPress/gutenberg/pull/63436
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index ac1f0c57ae9fc..350d158cd6e24 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -306,14 +306,22 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
* They're added separately because padding might only be set on one side.
*/
if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
- $padding_right = $block_spacing_values['declarations']['padding-right'];
+ $padding_right = $block_spacing_values['declarations']['padding-right'];
+ // Add unit if 0.
+ if ( '0' === $padding_right ) {
+ $padding_right = '0px';
+ }
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
);
}
if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
- $padding_left = $block_spacing_values['declarations']['padding-left'];
+ $padding_left = $block_spacing_values['declarations']['padding-left'];
+ // Add unit if 0.
+ if ( '0' === $padding_left ) {
+ $padding_left = '0px';
+ }
$layout_styles[] = array(
'selector' => "$selector > .alignfull",
'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 03d2c642d02bd..2e671e8e53975 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -234,15 +234,23 @@ export default {
const paddingValues = getCSSRules( style );
paddingValues.forEach( ( rule ) => {
if ( rule.key === 'paddingRight' ) {
+ // Add unit if 0, to avoid calc(0 * -1) which is invalid.
+ const paddingRightValue =
+ rule.value === '0' ? '0px' : rule.value;
+
output += `
${ appendSelectors( selector, '> .alignfull' ) } {
- margin-right: calc(${ rule.value } * -1);
+ margin-right: calc(${ paddingRightValue } * -1);
}
`;
} else if ( rule.key === 'paddingLeft' ) {
+ // Add unit if 0, to avoid calc(0 * -1) which is invalid.
+ const paddingLeftValue =
+ rule.value === '0' ? '0px' : rule.value;
+
output += `
${ appendSelectors( selector, '> .alignfull' ) } {
- margin-left: calc(${ rule.value } * -1);
+ margin-left: calc(${ paddingLeftValue } * -1);
}
`;
}
From 7bc7875f8430691dd75d5486c10be88df9fd598a Mon Sep 17 00:00:00 2001
From: George Mamadashvili
Date: Tue, 16 Jul 2024 07:16:54 +0400
Subject: [PATCH 23/36] Layout: Don't remount the block when rendering grid
tools (#63557)
Co-authored-by: Mamaduka
Co-authored-by: noisysocks
---
packages/block-editor/src/hooks/grid-visualizer.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js
index ffad5edd9842c..44102208c4d1d 100644
--- a/packages/block-editor/src/hooks/grid-visualizer.js
+++ b/packages/block-editor/src/hooks/grid-visualizer.js
@@ -39,7 +39,7 @@ function GridTools( { clientId, layout } ) {
const addGridVisualizerToBlockEdit = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
if ( props.attributes.layout?.type !== 'grid' ) {
- return ;
+ return ;
}
return (
@@ -48,7 +48,7 @@ const addGridVisualizerToBlockEdit = createHigherOrderComponent(
clientId={ props.clientId }
layout={ props.attributes.layout }
/>
-
+
>
);
},
From 7cc2ecffa998cd417ff010dbf422630a06d31999 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation
Date: Tue, 16 Jul 2024 05:04:28 +0000
Subject: [PATCH 24/36] Bump plugin version to 18.8.0-rc.3
---
gutenberg.php | 2 +-
package-lock.json | 4 ++--
package.json | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/gutenberg.php b/gutenberg.php
index 11aa7cb68da85..81fcb7a24e886 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
* Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
* Requires at least: 6.4
* Requires PHP: 7.2
- * Version: 18.8.0-rc.2
+ * Version: 18.8.0-rc.3
* Author: Gutenberg Team
* Text Domain: gutenberg
*
diff --git a/package-lock.json b/package-lock.json
index 1cc4fb4bd8647..a2ccc632899f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "gutenberg",
- "version": "18.8.0-rc.2",
+ "version": "18.8.0-rc.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "gutenberg",
- "version": "18.8.0-rc.2",
+ "version": "18.8.0-rc.3",
"hasInstallScript": true,
"license": "GPL-2.0-or-later",
"dependencies": {
diff --git a/package.json b/package.json
index 2ed3f7c108354..2af7e6c13774a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "gutenberg",
- "version": "18.8.0-rc.2",
+ "version": "18.8.0-rc.3",
"private": true,
"description": "A new WordPress editor experience.",
"author": "The WordPress Contributors",
From 2772494d5437d7301a8c45c704f1e9bcf769b758 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation
Date: Tue, 16 Jul 2024 05:12:06 +0000
Subject: [PATCH 25/36] Update Changelog for 18.8.0-rc.3
---
changelog.txt | 23 +++++++++++++++++++++++
1 file changed, 23 insertions(+)
diff --git a/changelog.txt b/changelog.txt
index 370057893699c..0ac0a89f5a239 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,28 @@
== Changelog ==
+= 18.8.0-rc.3 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Layout
+- Fix invalid css for nested fullwidth layouts with zero padding applied. ([63436](https://github.com/WordPress/gutenberg/pull/63436))
+
+#### Typography
+- Font Appearance Control: Refactor font appearance fallbacks. ([63215](https://github.com/WordPress/gutenberg/pull/63215))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@mikachan @richtabor
+
+
= 18.8.0-rc.2 =
From 4dbb870cef4799ea726bed812604115a87b51c58 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:14:57 +1000
Subject: [PATCH 26/36] Quote: Add border support (#63544)
Co-authored-by: aaronrobertshaw
Co-authored-by: andrewserong
---
packages/block-library/src/quote/block.json | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index 385825a86168a..c695c938923ae 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -36,6 +36,18 @@
"backgroundImage": true
}
},
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ },
"dimensions": {
"minHeight": true,
"__experimentalDefaultControls": {
From ac29b27152162e765fb2e40c1ad43c810e35d9e9 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras
Date: Tue, 16 Jul 2024 09:17:12 +0300
Subject: [PATCH 27/36] Data Views: Do not render bulk actions Dropdown if no
actions are available (#63575)
Co-authored-by: ntsekouras
Co-authored-by: Mamaduka
---
packages/dataviews/src/bulk-actions.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/dataviews/src/bulk-actions.tsx b/packages/dataviews/src/bulk-actions.tsx
index 3530b0b849c90..2e3cc495e48b7 100644
--- a/packages/dataviews/src/bulk-actions.tsx
+++ b/packages/dataviews/src/bulk-actions.tsx
@@ -160,7 +160,9 @@ function ActionsMenuGroup< Item >( {
);
} );
}, [ actions, selectedItems ] );
-
+ if ( ! elligibleActions.length ) {
+ return null;
+ }
return (
<>
From b346c8e08584c8a5e528931c5f0387ca1c671634 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:22:19 +0900
Subject: [PATCH 28/36] Global Styles: Disable "Reset styles" button when there
are no changes (#63562)
Co-authored-by: t-hamano
Co-authored-by: andrewserong
---
packages/block-editor/src/components/global-styles/hooks.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index 44a3d5e23e40c..a1a4fc1a0a6ae 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -85,7 +85,11 @@ const VALID_SETTINGS = [
];
export const useGlobalStylesReset = () => {
- const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+ const { user, setUserConfig } = useContext( GlobalStylesContext );
+ const config = {
+ settings: user.settings,
+ styles: user.styles,
+ };
const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
return [
canReset,
From b453bd9999a9313cf5a1472d7176e39a0d3c5cc4 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:32:31 +1000
Subject: [PATCH 29/36] Media Text: Add border support (#63542)
Co-authored-by: aaronrobertshaw
Co-authored-by: andrewserong
---
packages/block-library/src/media-text/block.json | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index 0f3519acb5d53..42384c0c4478e 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -103,6 +103,18 @@
"anchor": true,
"align": [ "wide", "full" ],
"html": false,
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ },
"color": {
"gradients": true,
"heading": true,
From e8cba7ccfa7515895cccba08d399c11486063f8a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 16 Jul 2024 16:47:12 +1000
Subject: [PATCH 30/36] Buttons: Add border, color, and padding block supports
(#63538)
Co-authored-by: aaronrobertshaw
Co-authored-by: carolinan
---
docs/reference-guides/core-blocks.md | 2 +-
packages/block-library/src/buttons/block.json | 20 +++++++++++++++++++
2 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index e796b29ff662f..08a299bc17b71 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -61,7 +61,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
- **Name:** core/buttons
- **Category:** design
- **Allowed Blocks:** core/button
-- **Supports:** align (full, wide), anchor, interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
## Calendar
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index 015290a4c7cc5..220f6ef8fd1e2 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -13,8 +13,16 @@
"align": [ "wide", "full" ],
"html": false,
"__experimentalExposeControlsToChildren": true,
+ "color": {
+ "gradients": true,
+ "text": false,
+ "__experimentalDefaultControls": {
+ "background": true
+ }
+ },
"spacing": {
"blockGap": true,
+ "padding": true,
"margin": [ "top", "bottom" ],
"__experimentalDefaultControls": {
"blockGap": true
@@ -33,6 +41,18 @@
"fontSize": true
}
},
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ }
+ },
"layout": {
"allowSwitching": false,
"allowInheriting": false,
From 42e7777eb46e753a16be739aeec87aa61b89b4da Mon Sep 17 00:00:00 2001
From: Pascal Birchler
Date: Tue, 16 Jul 2024 09:29:04 +0200
Subject: [PATCH 31/36] Fix broken license check script (#61868)
Co-authored-by: swissspidy
Co-authored-by: gziolo
---
package.json | 2 +-
packages/scripts/scripts/check-licenses.js | 31 +++++++++++++++-------
2 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/package.json b/package.json
index 2af7e6c13774a..02de8255d1836 100644
--- a/package.json
+++ b/package.json
@@ -303,7 +303,7 @@
"lint:pkg-json": "wp-scripts lint-pkg-json . 'packages/*/package.json'",
"native": "npm run --prefix packages/react-native-editor",
"other:changelog": "node ./bin/plugin/cli.js changelog",
- "other:check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
+ "other:check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios,@ampproject/remapping,human-signals,fb-watchman,bser,walker,chrome-launcher,lighthouse-logger,chromium-edge-launcher\" \"wp-scripts check-licenses --dev --ignore=jackspeak,path-scurry,package-json-from-dist\"",
"preother:check-local-changes": "npm run docs:build",
"other:check-local-changes": "node ./bin/check-local-changes.js",
"other:cherry-pick": "node ./bin/cherry-pick.mjs",
diff --git a/packages/scripts/scripts/check-licenses.js b/packages/scripts/scripts/check-licenses.js
index 5e0dd37239612..6401fd83e3482 100644
--- a/packages/scripts/scripts/check-licenses.js
+++ b/packages/scripts/scripts/check-licenses.js
@@ -179,8 +179,8 @@ const child = spawn.sync(
'--json',
'--long',
'--all',
- ...( prod ? [ '--prod' ] : [] ),
- ...( dev ? [ '--dev' ] : [] ),
+ ...( prod ? [ '--omit=dev' ] : [] ),
+ ...( dev ? [ '--include=dev' ] : [] ),
],
/*
* Set the max buffer to ~157MB, since the output size for
@@ -198,10 +198,14 @@ function traverseDepTree( deps ) {
const dep = deps[ key ];
if ( ignored.includes( dep.name ) ) {
- return;
+ continue;
+ }
+
+ if ( Object.keys( dep ).length === 0 ) {
+ continue;
}
- if ( ! dep.hasOwnProperty( 'path' ) ) {
+ if ( ! dep.hasOwnProperty( 'path' ) && ! dep.missing ) {
if ( dep.hasOwnProperty( 'peerMissing' ) ) {
process.stdout.write(
`${ WARNING } Unable to locate path for missing peer dep ${ dep.name }@${ dep.version }. `
@@ -213,17 +217,15 @@ function traverseDepTree( deps ) {
);
}
} else if ( dep.missing ) {
- process.stdout.write(
- `${ WARNING } missing dep ${ dep.name }@${ dep.version }. `
- );
+ for ( const problem of dep.problems ) {
+ process.stdout.write( `${ WARNING } ${ problem }.\n` );
+ }
} else {
checkDepLicense( dep.path );
}
if ( dep.hasOwnProperty( 'dependencies' ) ) {
traverseDepTree( dep.dependencies );
- } else {
- return;
}
}
}
@@ -272,6 +274,8 @@ function detectTypeFromLicenseText( licenseText ) {
);
}
+const reportedPackages = new Set();
+
function checkDepLicense( path ) {
if ( ! path ) {
return;
@@ -333,7 +337,7 @@ function checkDepLicense( path ) {
}
let detectedLicenseTypes = [ detectedLicenseType ];
- if ( detectedLicenseType.includes( ' AND ' ) ) {
+ if ( detectedLicenseType && detectedLicenseType.includes( ' AND ' ) ) {
detectedLicenseTypes = detectedLicenseType
.replace( /^\(*/g, '' )
.replace( /\)*$/, '' )
@@ -345,6 +349,13 @@ function checkDepLicense( path ) {
return;
}
+ // Do not report same package twice.
+ if ( reportedPackages.has( packageInfo.name ) ) {
+ return;
+ }
+
+ reportedPackages.add( packageInfo.name );
+
process.exitCode = 1;
process.stdout.write(
`${ ERROR } Module ${ packageInfo.name } has an incompatible license '${ licenseType }'.\n`
From c5626bde4e3b98a5ce975bf777bd4a7ace83a579 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras
Date: Tue, 16 Jul 2024 10:50:46 +0300
Subject: [PATCH 32/36] DataViews: Update pagination icons (#63594)
Co-authored-by: ntsekouras
Co-authored-by: jasmussen
---
packages/dataviews/src/pagination.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/dataviews/src/pagination.tsx b/packages/dataviews/src/pagination.tsx
index 497ae80505bd7..99688e076e53b 100644
--- a/packages/dataviews/src/pagination.tsx
+++ b/packages/dataviews/src/pagination.tsx
@@ -8,7 +8,7 @@ import {
} from '@wordpress/components';
import { createInterpolateElement, memo } from '@wordpress/element';
import { sprintf, __, _x } from '@wordpress/i18n';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
/**
* Internal dependencies
@@ -92,7 +92,7 @@ const Pagination = memo( function Pagination( {
disabled={ currentPage === 1 }
accessibleWhenDisabled
label={ __( 'Previous page' ) }
- icon={ chevronLeft }
+ icon={ previous }
showTooltip
size="compact"
tooltipPosition="top"
@@ -104,7 +104,7 @@ const Pagination = memo( function Pagination( {
disabled={ currentPage >= totalPages }
accessibleWhenDisabled
label={ __( 'Next page' ) }
- icon={ chevronRight }
+ icon={ next }
showTooltip
size="compact"
tooltipPosition="top"
From 52723a8da9f008b9e863c3897ee2051641662fd5 Mon Sep 17 00:00:00 2001
From: "Joen A." <1204802+jasmussen@users.noreply.github.com>
Date: Tue, 16 Jul 2024 10:01:16 +0200
Subject: [PATCH 33/36] Disallow scrolling the block preview. (#63558)
---
packages/edit-site/src/components/global-styles/style.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 399e692e250d6..48a12081e9817 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -112,9 +112,9 @@
.edit-site-global-styles__block-preview-panel {
position: relative;
width: 100%;
- overflow: auto;
border: $gray-200 $border-width solid;
border-radius: $radius-block-ui;
+ overflow: hidden;
}
.edit-site-global-styles__shadow-preview-panel {
From fab9fbcbe7922eac1d19b72f5170e20c3a572a55 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 16 Jul 2024 17:24:21 +0900
Subject: [PATCH 34/36] Block Switcher Preview: Adjust the position and enable
pattern preview in mobile viewport (#63512)
Unlinked contributors: albanyacademy.
Co-authored-by: t-hamano
Co-authored-by: ntsekouras
Co-authored-by: ndiego
Co-authored-by: talldan
Co-authored-by: annezazu
Co-authored-by: richtabor
---
.../pattern-transformations-menu.js | 32 +++++++++--------
.../block-switcher/preview-block-popover.js | 34 +++++++++++--------
.../src/components/block-switcher/style.scss | 25 +++++---------
3 files changed, 45 insertions(+), 46 deletions(-)
diff --git a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
index 792f6d0bb2012..46fd83c92d91f 100644
--- a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
@@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
import { chevronRight } from '@wordpress/icons';
import {
@@ -34,6 +34,7 @@ function PatternTransformationsMenu( {
} ) {
const [ showTransforms, setShowTransforms ] = useState( false );
const patterns = useTransformedPatterns( statePatterns, blocks );
+
if ( ! patterns.length ) {
return null;
}
@@ -60,21 +61,22 @@ function PatternTransformationsMenu( {
}
function PreviewPatternsPopover( { patterns, onSelect } ) {
+ const isMobile = useViewportMatch( 'medium', '<' );
+
return (
-
-
+
);
}
diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
index 78e29f4ad09fb..f978ed43af1da 100644
--- a/packages/block-editor/src/components/block-switcher/preview-block-popover.js
+++ b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -3,6 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
/**
* Internal dependencies
@@ -10,22 +11,27 @@ import { Popover } from '@wordpress/components';
import BlockPreview from '../block-preview';
export default function PreviewBlockPopover( { blocks } ) {
+ const isMobile = useViewportMatch( 'medium', '<' );
+
+ if ( isMobile ) {
+ return null;
+ }
+
return (
-
-
-
-
-
- { __( 'Preview' ) }
-
-
+
+
+
+
+ { __( 'Preview' ) }
-
-
+
+
+
);
}
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index 5eaba08bf94ae..afcb576bd8db4 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -84,27 +84,18 @@
min-width: 300px;
}
-.block-editor-block-switcher__popover__preview__parent {
- .block-editor-block-switcher__popover__preview__container {
- position: absolute;
- top: -$grid-unit-15;
- left: calc(100% + #{$grid-unit-20});
- }
+.block-editor-block-switcher__popover-preview-container {
+ left: 0;
+ position: absolute;
+ top: -$border-width;
+ width: 100%;
+ bottom: 0;
+ pointer-events: none;
}
-.block-editor-block-switcher__preview__popover {
- display: none;
+.block-editor-block-switcher__popover-preview {
overflow: hidden;
- // Position correctly. Needs specificity.
- &.components-popover {
- margin-top: $grid-unit-15 - $border-width;
- }
-
- @include break-medium() {
- display: block;
- }
-
.components-popover__content {
width: 300px;
border: $border-width solid $gray-900;
From 1fa4384553b6a59f0b3da936b953aaea4990e1ee Mon Sep 17 00:00:00 2001
From: Maggie
Date: Tue, 16 Jul 2024 11:26:56 +0200
Subject: [PATCH 35/36] fix height calculation on block preview (#63596)
---
.../src/components/global-styles/block-preview-panel.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index 82f429e0e2c04..6b1b980377c9c 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -35,6 +35,12 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
const viewportWidth = blockExample?.viewportWidth ?? 500;
// Same as height of InserterPreviewPanel.
const previewHeight = 144;
+ const sidebarWidth = 235;
+ const scale = sidebarWidth / viewportWidth;
+ const minHeight =
+ scale !== 0 && scale < 1 && previewHeight
+ ? previewHeight / scale
+ : previewHeight;
if ( ! blockExample ) {
return null;
@@ -57,7 +63,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
css: `
body{
padding: 24px;
- min-height:100%;
+ min-height:${ Math.round( minHeight ) }px;
display:flex;
align-items:center;
}
From e64a6660ecb92cda6b157b7ac54df83e967bb45d Mon Sep 17 00:00:00 2001
From: George Mamadashvili
Date: Tue, 16 Jul 2024 13:43:08 +0400
Subject: [PATCH 36/36] Use static 'key' when filtering BlockEdit components
(#63590)
Co-authored-by: Mamaduka
Co-authored-by: tyxla
---
packages/customize-widgets/src/filters/move-to-sidebar.js | 2 +-
packages/customize-widgets/src/filters/wide-widget-display.js | 2 +-
.../edit-site/src/hooks/push-changes-to-global-styles/index.js | 2 +-
packages/edit-widgets/src/filters/move-to-widget-area.js | 2 +-
packages/editor/src/hooks/pattern-overrides.js | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/customize-widgets/src/filters/move-to-sidebar.js b/packages/customize-widgets/src/filters/move-to-sidebar.js
index 7677a5e1726cf..4562afb3817c6 100644
--- a/packages/customize-widgets/src/filters/move-to-sidebar.js
+++ b/packages/customize-widgets/src/filters/move-to-sidebar.js
@@ -83,7 +83,7 @@ const withMoveToSidebarToolbarItem = createHigherOrderComponent(
return (
<>
-
+
{ hasMultipleSidebars && canInsertBlockInSidebar && (
widget.id_base === idBase
)?.is_wide ?? false;
- return ;
+ return ;
},
'withWideWidgetDisplay'
);
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
index 60f56e7e9072e..a4aa81e88393a 100644
--- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -375,7 +375,7 @@ function PushChangesToGlobalStyles( props ) {
const withPushChangesToGlobalStyles = createHigherOrderComponent(
( BlockEdit ) => ( props ) => (
<>
-
+
{ props.isSelected && }
>
)
diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js
index c39315505232e..61a8b4cd7187f 100644
--- a/packages/edit-widgets/src/filters/move-to-widget-area.js
+++ b/packages/edit-widgets/src/filters/move-to-widget-area.js
@@ -48,7 +48,7 @@ const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent(
return (
<>
-
+
{ isMoveToWidgetAreaVisible && (
-
+
{ props.isSelected && isSupportedBlock && (
) }