From 661821873610e81ff0eadf4307fc6b8b1849390c Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 12 Feb 2024 16:19:21 -0600 Subject: [PATCH 1/7] Revert fix/block-settings-origins --- packages/block-editor/src/store/get-block-settings.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js index 598754a3497184..d1d317863fe287 100644 --- a/packages/block-editor/src/store/get-block-settings.js +++ b/packages/block-editor/src/store/get-block-settings.js @@ -100,16 +100,8 @@ const removeCustomPrefixes = ( path ) => { * @return {Array} Array of merged items */ export function mergeOrigins( value ) { - let result = mergeCache.get( value ); - if ( ! result ) { - result = [ 'default', 'theme', 'custom' ].flatMap( - ( key ) => value[ key ] ?? [] - ); - mergeCache.set( value, result ); - } - return result; + return value.custom ?? value.theme ?? value.default; } -const mergeCache = new WeakMap(); /** * For settings like `color.palette`, which have a value that is an object From 3634ebcc42dfc215657d23085dfb654d44a917c8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 13 Feb 2024 12:07:49 +0100 Subject: [PATCH 2/7] Fix shadow presets and font families --- .../components/global-styles/border-panel.js | 9 +++--- .../global-styles/typography-panel.js | 24 ++++++++++------ .../src/store/get-block-settings.js | 28 +------------------ 3 files changed, 21 insertions(+), 40 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 0dee6040c87052..29b7b89514e1de 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n'; import BorderRadiusControl from '../border-radius-control'; import { useColorsPerOrigin } from './hooks'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; -import { mergeOrigins } from '../../store/get-block-settings'; import { setImmutably } from '../../utils/object'; import { getBorderPanelLabel } from '../../hooks/border'; import { ShadowPopover } from './shadow-panel-components'; @@ -154,10 +153,10 @@ export default function BorderPanel( { // Shadow const shadow = decodeValue( inheritedValue?.shadow ); - const shadowPresets = settings?.shadow?.presets; - const mergedShadowPresets = shadowPresets - ? mergeOrigins( shadowPresets ) - : []; + const shadowPresets = settings?.shadow?.presets ?? {}; + const mergedShadowPresets = [ 'default', 'theme', 'custom' ].flatMap( + ( key ) => shadowPresets?.[ key ] ?? [] + ); const setShadow = ( newValue ) => { const slug = mergedShadowPresets?.find( ( { shadow: shadowName } ) => shadowName === newValue 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 e689d84c83c981..f79bb0a71ccc44 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -8,12 +8,11 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { mergeOrigins, hasMergedOrigins } from '../../store/get-block-settings'; import FontFamilyControl from '../font-family'; import FontAppearanceControl from '../font-appearance-control'; import LineHeightControl from '../line-height-control'; @@ -53,13 +52,16 @@ export function useHasTypographyPanel( settings ) { function useHasFontSizeControl( settings ) { return ( - hasMergedOrigins( settings?.typography?.fontSizes ) || - settings?.typography?.customFontSize + [ 'default', 'theme', 'custom' ].some( + ( key ) => settings?.typography?.fontSizes?.[ key ]?.length + ) || settings?.typography?.customFontSize ); } function useHasFontFamilyControl( settings ) { - return hasMergedOrigins( settings?.typography?.fontFamilies ); + return [ 'default', 'theme', 'custom' ].some( + ( key ) => settings?.typography?.fontFamilies?.[ key ]?.length + ); } function useHasLineHeightControl( settings ) { @@ -101,8 +103,10 @@ function useHasTextColumnsControl( settings ) { } function getUniqueFontSizesBySlug( settings ) { - const fontSizes = settings?.typography?.fontSizes; - const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : []; + const fontSizes = settings?.typography?.fontSizes ?? {}; + const mergedFontSizes = [ 'default', 'theme', 'custom' ].flatMap( + ( key ) => fontSizes?.[ key ] ?? [] + ); const uniqueSizes = []; for ( const currentSize of mergedFontSizes ) { if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) { @@ -163,7 +167,11 @@ export default function TypographyPanel( { // Font Family const hasFontFamilyEnabled = useHasFontFamilyControl( settings ); const fontFamilies = settings?.typography?.fontFamilies; - const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : []; + const mergedFontFamilies = useMemo( () => { + return [ 'default', 'theme', 'custom' ].flatMap( + ( key ) => fontFamilies[ key ] ?? [] + ); + }, [ fontFamilies ] ); const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily ); const setFontFamily = ( newValue ) => { const slug = mergedFontFamilies?.find( diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js index d1d317863fe287..95a600fd55c705 100644 --- a/packages/block-editor/src/store/get-block-settings.js +++ b/packages/block-editor/src/store/get-block-settings.js @@ -91,32 +91,6 @@ const removeCustomPrefixes = ( path ) => { return prefixedFlags[ path ] || path; }; -/** - * For settings like `color.palette`, which have a value that is an object - * with `default`, `theme`, `custom`, with field values that are arrays of - * items, merge these three arrays into one and return it. The calculation - * is memoized so that identical input values produce identical output. - * @param {Object} value Object to merge - * @return {Array} Array of merged items - */ -export function mergeOrigins( value ) { - return value.custom ?? value.theme ?? value.default; -} - -/** - * For settings like `color.palette`, which have a value that is an object - * with `default`, `theme`, `custom`, with field values that are arrays of - * items, see if any of the three origins have values. - * - * @param {Object} value Object to check - * @return {boolean} Whether the object has values in any of the three origins - */ -export function hasMergedOrigins( value ) { - return [ 'default', 'theme', 'custom' ].some( - ( key ) => value?.[ key ]?.length - ); -} - export function getBlockSettings( state, clientId, ...paths ) { const blockName = getBlockName( state, clientId ); const candidates = []; @@ -196,7 +170,7 @@ export function getBlockSettings( state, clientId, ...paths ) { // Return if the setting was found in either the block instance or the store. if ( result !== undefined ) { if ( PATHS_WITH_MERGE[ normalizedPath ] ) { - return mergeOrigins( result ); + return result.custom ?? result.theme ?? result.default; } return result; } From f18b8acd896bd288c5bfe7dbb490171ee5dbff1c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 13 Feb 2024 12:37:03 +0100 Subject: [PATCH 3/7] Fix block settings --- packages/block-editor/src/hooks/utils.js | 32 ++++++++++++++++++------ 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 2f7a8f3a81f19d..fbe84514c3e53c 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -176,8 +176,12 @@ export function useBlockSettings( name, parentLayout ) { const [ backgroundImage, backgroundSize, - fontFamilies, - fontSizes, + customFontFamilies, + defaultFontFamilies, + themeFontFamilies, + customFontSizes, + defaultFontSizes, + themeFontSizes, customFontSize, fontStyle, fontWeight, @@ -223,8 +227,12 @@ export function useBlockSettings( name, parentLayout ) { ] = useSettings( 'background.backgroundImage', 'background.backgroundSize', - 'typography.fontFamilies', - 'typography.fontSizes', + 'typography.fontFamilies.custom', + 'typography.fontFamilies.default', + 'typography.fontFamilies.theme', + 'typography.fontSizes.custom', + 'typography.fontSizes.default', + 'typography.fontSizes.theme', 'typography.customFontSize', 'typography.fontStyle', 'typography.fontWeight', @@ -305,10 +313,14 @@ export function useBlockSettings( name, parentLayout ) { }, typography: { fontFamilies: { - custom: fontFamilies, + custom: customFontFamilies, + default: defaultFontFamilies, + theme: themeFontFamilies, }, fontSizes: { - custom: fontSizes, + custom: customFontSizes, + default: defaultFontSizes, + theme: themeFontSizes, }, customFontSize, fontStyle, @@ -346,8 +358,12 @@ export function useBlockSettings( name, parentLayout ) { }, [ backgroundImage, backgroundSize, - fontFamilies, - fontSizes, + customFontFamilies, + defaultFontFamilies, + themeFontFamilies, + customFontSizes, + defaultFontSizes, + themeFontSizes, customFontSize, fontStyle, fontWeight, From 29f96bb8977d3743b60972ab375229002fe200fa Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 13 Feb 2024 23:25:34 +0900 Subject: [PATCH 4/7] Explicitly use overrides and merges --- .../components/global-styles/border-panel.js | 9 ++-- .../global-styles/typography-panel.js | 31 +++++------ .../src/store/get-block-settings.js | 51 +++++++++++++++++-- packages/blocks/src/api/constants.js | 3 +- packages/blocks/src/api/index.js | 2 +- test/emptytheme/theme.json | 49 ++++++++++++++---- 6 files changed, 109 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 29b7b89514e1de..960c19289157a3 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n'; import BorderRadiusControl from '../border-radius-control'; import { useColorsPerOrigin } from './hooks'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; +import { overrideOrigins } from '../../store/get-block-settings'; import { setImmutably } from '../../utils/object'; import { getBorderPanelLabel } from '../../hooks/border'; import { ShadowPopover } from './shadow-panel-components'; @@ -154,11 +155,11 @@ export default function BorderPanel( { // Shadow const shadow = decodeValue( inheritedValue?.shadow ); const shadowPresets = settings?.shadow?.presets ?? {}; - const mergedShadowPresets = [ 'default', 'theme', 'custom' ].flatMap( - ( key ) => shadowPresets?.[ key ] ?? [] - ); + const overriddenShadowPresets = shadowPresets + ? overrideOrigins( shadowPresets ) + : []; const setShadow = ( newValue ) => { - const slug = mergedShadowPresets?.find( + const slug = overriddenShadowPresets?.find( ( { shadow: shadowName } ) => shadowName === newValue )?.slug; 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 f79bb0a71ccc44..d9fc77ea3b9305 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -8,11 +8,16 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ +import { + mergeOrigins, + overrideOrigins, + hasOriginValue, +} from '../../store/get-block-settings'; import FontFamilyControl from '../font-family'; import FontAppearanceControl from '../font-appearance-control'; import LineHeightControl from '../line-height-control'; @@ -52,16 +57,13 @@ export function useHasTypographyPanel( settings ) { function useHasFontSizeControl( settings ) { return ( - [ 'default', 'theme', 'custom' ].some( - ( key ) => settings?.typography?.fontSizes?.[ key ]?.length - ) || settings?.typography?.customFontSize + hasOriginValue( settings?.typography?.fontSizes ) || + settings?.typography?.customFontSize ); } function useHasFontFamilyControl( settings ) { - return [ 'default', 'theme', 'custom' ].some( - ( key ) => settings?.typography?.fontFamilies?.[ key ]?.length - ); + return hasOriginValue( settings?.typography?.fontFamilies ); } function useHasLineHeightControl( settings ) { @@ -104,11 +106,9 @@ function useHasTextColumnsControl( settings ) { function getUniqueFontSizesBySlug( settings ) { const fontSizes = settings?.typography?.fontSizes ?? {}; - const mergedFontSizes = [ 'default', 'theme', 'custom' ].flatMap( - ( key ) => fontSizes?.[ key ] ?? [] - ); + const overriddenFontSizes = fontSizes ? overrideOrigins( fontSizes ) : []; const uniqueSizes = []; - for ( const currentSize of mergedFontSizes ) { + for ( const currentSize of overriddenFontSizes ) { if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) { uniqueSizes.push( currentSize ); } @@ -166,12 +166,9 @@ export default function TypographyPanel( { // Font Family const hasFontFamilyEnabled = useHasFontFamilyControl( settings ); - const fontFamilies = settings?.typography?.fontFamilies; - const mergedFontFamilies = useMemo( () => { - return [ 'default', 'theme', 'custom' ].flatMap( - ( key ) => fontFamilies[ key ] ?? [] - ); - }, [ fontFamilies ] ); + const fontFamilies = settings?.typography?.fontFamilies ?? {}; + const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : []; + const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily ); const setFontFamily = ( newValue ) => { const slug = mergedFontFamilies?.find( diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js index 95a600fd55c705..9a1fcbdad420c1 100644 --- a/packages/block-editor/src/store/get-block-settings.js +++ b/packages/block-editor/src/store/get-block-settings.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { - __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE, + __EXPERIMENTAL_PATHS_WITH_OVERRIDE as PATHS_WITH_OVERRIDE, hasBlockSupport, } from '@wordpress/blocks'; import { applyFilters } from '@wordpress/hooks'; @@ -91,6 +91,51 @@ const removeCustomPrefixes = ( path ) => { return prefixedFlags[ path ] || path; }; +/** + * For settings like `color.palette`, which have a value that is an object + * with `default`, `theme`, `custom`, with field values that are arrays of + * items, merge these three arrays into one and return it. The calculation + * is memoized so that identical input values produce identical output. + * @param {Object} value Object to merge + * @return {Array} Array of merged items + */ +export function mergeOrigins( value ) { + let result = mergeCache.get( value ); + if ( ! result ) { + result = [ 'default', 'theme', 'custom' ].flatMap( + ( key ) => value[ key ] ?? [] + ); + mergeCache.set( value, result ); + } + return result; +} +const mergeCache = new WeakMap(); + +/** + * For settings like `color.palette`, which have a value that is an object + * with `default`, `theme`, `custom`, with field values that are arrays of + * items, returns the one with the highest priority among these three arrays. + * @param {Object} value Object to merge + * @return {Array} Array of merged items + */ +export function overrideOrigins( value ) { + return value.custom ?? value.theme ?? value.default; +} + +/** + * For settings like `color.palette`, which have a value that is an object + * with `default`, `theme`, `custom`, with field values that are arrays of + * items, see if any of the three origins have values. + * + * @param {Object} value Object to check + * @return {boolean} Whether the object has values in any of the three origins + */ +export function hasOriginValue( value ) { + return [ 'default', 'theme', 'custom' ].some( + ( key ) => value?.[ key ]?.length + ); +} + export function getBlockSettings( state, clientId, ...paths ) { const blockName = getBlockName( state, clientId ); const candidates = []; @@ -169,8 +214,8 @@ export function getBlockSettings( state, clientId, ...paths ) { // Return if the setting was found in either the block instance or the store. if ( result !== undefined ) { - if ( PATHS_WITH_MERGE[ normalizedPath ] ) { - return result.custom ?? result.theme ?? result.default; + if ( PATHS_WITH_OVERRIDE[ normalizedPath ] ) { + return overrideOrigins( result ); } return result; } diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 8af2d0940c8fcc..db7f0e892726e6 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -271,11 +271,10 @@ export const __EXPERIMENTAL_ELEMENTS = { cite: 'cite', }; -export const __EXPERIMENTAL_PATHS_WITH_MERGE = { +export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = { 'color.duotone': true, 'color.gradients': true, 'color.palette': true, - 'typography.fontFamilies': true, 'typography.fontSizes': true, 'spacing.spacingSizes': true, }; diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 2ddeb3a60f0abb..aa72979818c9c7 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -162,5 +162,5 @@ export { default as node } from './node'; export { __EXPERIMENTAL_STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS, - __EXPERIMENTAL_PATHS_WITH_MERGE, + __EXPERIMENTAL_PATHS_WITH_OVERRIDE, } from './constants'; diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index d95ed844e6b1cb..6d9347187643e4 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -6,14 +6,45 @@ "layout": { "contentSize": "840px", "wideSize": "1100px" + }, + "typography": { + "fontSizes": [ + { + "size": "0.5rem", + "slug": "caption", + "name": "Caption" + }, + { + "size": "1rem", + "slug": "x-small", + "name": "XS" + }, + { + "size": "2rem", + "slug": "small", + "name": "S" + }, + { + "size": "3rem", + "slug": "medium", + "name": "M" + }, + { + "size": "4rem", + "slug": "large", + "name": "L" + }, + { + "size": "5rem", + "slug": "x-large", + "name": "XL" + }, + { + "size": "6rem", + "slug": "xx-large", + "name": "XXL" + } + ] } - }, - "customTemplates": [ - { - "name": "custom-template", - "title": "Custom", - "postTypes": [ "post" ] - } - ], - "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] + } } From 966984825d27a5873ebb2ad41d0ce580900e4de3 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 13 Feb 2024 23:28:18 +0900 Subject: [PATCH 5/7] Undo unwanted changes --- .../global-styles/typography-panel.js | 1 - test/emptytheme/theme.json | 273 ++++++++++++++++-- 2 files changed, 246 insertions(+), 28 deletions(-) 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 d9fc77ea3b9305..6b09b146f9ea17 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -168,7 +168,6 @@ export default function TypographyPanel( { const hasFontFamilyEnabled = useHasFontFamilyControl( settings ); const fontFamilies = settings?.typography?.fontFamilies ?? {}; const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : []; - const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily ); const setFontFamily = ( newValue ) => { const slug = mergedFontFamilies?.find( diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index 6d9347187643e4..29898b2a7a0235 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -1,50 +1,269 @@ { - "$schema": "https://schemas.wp.org/trunk/theme.json", - "version": 2, "settings": { "appearanceTools": true, + "color": { + "background": true, + "custom": true, + "customDuotone": true, + "customGradient": true, + "defaultDuotone": false, + "defaultGradients": false, + "defaultPalette": false, + "duotone": [], + "gradients": [], + "palette": [], + "text": true + }, "layout": { - "contentSize": "840px", - "wideSize": "1100px" + "contentSize": "620px", + "wideSize": "1000px" + }, + "shadow": { + "defaultPresets": true, + "presets": [] + }, + "spacing": { + "customSpacingSize": true, + "spacingScale": { + "increment": 1.5, + "mediumStep": 1.5, + "operator": "*", + "steps": 7, + "unit": "rem" + }, + "spacingSizes": [], + "units": [ "%", "px", "em", "rem", "vh", "vw" ] }, "typography": { + "customFontSize": true, + "dropCap": true, + "fluid": true, + "fontFamilies": [ + { + "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", + "name": "System Font", + "slug": "system-font" + }, + { + "fontFace": [ + { + "fontFamily": "Barlow", + "fontStyle": "italic", + "fontWeight": "700", + "src": [ + "file:./assets/fonts/barlow_italic_700.ttf" + ] + }, + { + "fontFamily": "Barlow", + "fontStyle": "normal", + "fontWeight": "700", + "src": [ + "file:./assets/fonts/barlow_normal_700.ttf" + ] + }, + { + "fontFamily": "Barlow", + "fontStyle": "italic", + "fontWeight": "600", + "src": [ + "file:./assets/fonts/barlow_italic_600.ttf" + ] + }, + { + "fontFamily": "Barlow", + "fontStyle": "normal", + "fontWeight": "600", + "src": [ + "file:./assets/fonts/barlow_normal_600.ttf" + ] + }, + { + "fontFamily": "Barlow", + "fontStyle": "italic", + "fontWeight": "400", + "src": [ + "file:./assets/fonts/barlow_italic_400.ttf" + ] + }, + { + "fontFamily": "Barlow", + "fontStyle": "normal", + "fontWeight": "400", + "src": [ + "file:./assets/fonts/barlow_normal_400.ttf" + ] + } + ], + "fontFamily": "Barlow", + "slug": "barlow" + } + ], "fontSizes": [ { - "size": "0.5rem", - "slug": "caption", - "name": "Caption" + "name": "Display xl", + "slug": "Display-xl", + "size": "96px", + "fluid": { + "max": "96px", + "min": "52px" + } + }, + { + "name": "Display lg", + "slug": "Display-lg", + "size": "72px", + "fluid": { + "max": "72px", + "min": "46px" + } + }, + { + "name": "Display md", + "slug": "Display-md", + "size": "60px", + "fluid": { + "max": "60px", + "min": "42px" + } + }, + { + "name": "Display sm", + "slug": "Display-sm", + "size": "52px", + "fluid": { + "max": "52px", + "min": "40px" + } }, { - "size": "1rem", - "slug": "x-small", - "name": "XS" + "name": "Heading 1", + "slug": "Heading-1", + "size": "48px", + "fluid": { + "max": "48px", + "min": "36px" + } }, { - "size": "2rem", - "slug": "small", - "name": "S" + "name": "Heading 2", + "slug": "Heading-2", + "size": "36px", + "fluid": { + "max": "36px", + "min": "30px" + } }, { - "size": "3rem", - "slug": "medium", - "name": "M" + "name": "Heading 3", + "slug": "Heading-3", + "size": "28px", + "fluid": { + "max": "28px", + "min": "26px" + } }, { - "size": "4rem", - "slug": "large", - "name": "L" + "name": "Heading 4", + "slug": "Heading-4", + "size": "24px", + "fluid": { + "max": "24px", + "min": "22px" + } }, { - "size": "5rem", - "slug": "x-large", - "name": "XL" + "name": "Heading 5", + "slug": "Heading-5", + "size": "20px", + "fluid": { + "max": "20px", + "min": "19px" + } }, { - "size": "6rem", - "slug": "xx-large", - "name": "XXL" + "name": "Heading 6", + "slug": "Heading-6", + "size": "18px", + "fluid": { + "max": "18px", + "min": "17px" + } + }, + { + "name": "Paragraph lg", + "slug": "paragraph-lg", + "size": "18px", + "fluid": { + "max": "18px", + "min": "17px" + } + }, + { + "name": "Paragraph base", + "slug": "paragraph-base", + "size": "16px", + "fluid": { + "max": "16px", + "min": "16px" + } + }, + { + "name": "Paragraph sm", + "slug": "paragraph-sm", + "size": "14px", + "fluid": { + "max": "14px", + "min": "14px" + } + }, + { + "name": "Info md", + "slug": "Info-md", + "size": "12px", + "fluid": { + "max": "12px", + "min": "12px" + } + }, + { + "name": "Info sm", + "slug": "Info-sm", + "size": "10px", + "fluid": { + "max": "10px", + "min": "10px" + } } - ] + ], + "fontStyle": true, + "fontWeight": true, + "letterSpacing": true, + "textDecoration": true, + "textTransform": true + }, + "useRootPaddingAwareAlignments": true + }, + "styles": { + "spacing": { + "padding": { + "bottom": "0px", + "left": "16px", + "right": "16px", + "top": "0px" + } } - } + }, + "templateParts": [ + { + "area": "header", + "name": "header" + }, + { + "area": "footer", + "name": "footer" + } + ], + "version": 2, + "$schema": "https://schemas.wp.org/trunk/theme.json" } From 9f4bc7c8e4cd2b6f1800bd12806824643a4618ee Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 13 Feb 2024 23:31:02 +0900 Subject: [PATCH 6/7] Undo unwanted changes --- test/emptytheme/theme.json | 268 ++----------------------------------- 1 file changed, 9 insertions(+), 259 deletions(-) diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index 29898b2a7a0235..d95ed844e6b1cb 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -1,269 +1,19 @@ { + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 2, "settings": { "appearanceTools": true, - "color": { - "background": true, - "custom": true, - "customDuotone": true, - "customGradient": true, - "defaultDuotone": false, - "defaultGradients": false, - "defaultPalette": false, - "duotone": [], - "gradients": [], - "palette": [], - "text": true - }, "layout": { - "contentSize": "620px", - "wideSize": "1000px" - }, - "shadow": { - "defaultPresets": true, - "presets": [] - }, - "spacing": { - "customSpacingSize": true, - "spacingScale": { - "increment": 1.5, - "mediumStep": 1.5, - "operator": "*", - "steps": 7, - "unit": "rem" - }, - "spacingSizes": [], - "units": [ "%", "px", "em", "rem", "vh", "vw" ] - }, - "typography": { - "customFontSize": true, - "dropCap": true, - "fluid": true, - "fontFamilies": [ - { - "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", - "name": "System Font", - "slug": "system-font" - }, - { - "fontFace": [ - { - "fontFamily": "Barlow", - "fontStyle": "italic", - "fontWeight": "700", - "src": [ - "file:./assets/fonts/barlow_italic_700.ttf" - ] - }, - { - "fontFamily": "Barlow", - "fontStyle": "normal", - "fontWeight": "700", - "src": [ - "file:./assets/fonts/barlow_normal_700.ttf" - ] - }, - { - "fontFamily": "Barlow", - "fontStyle": "italic", - "fontWeight": "600", - "src": [ - "file:./assets/fonts/barlow_italic_600.ttf" - ] - }, - { - "fontFamily": "Barlow", - "fontStyle": "normal", - "fontWeight": "600", - "src": [ - "file:./assets/fonts/barlow_normal_600.ttf" - ] - }, - { - "fontFamily": "Barlow", - "fontStyle": "italic", - "fontWeight": "400", - "src": [ - "file:./assets/fonts/barlow_italic_400.ttf" - ] - }, - { - "fontFamily": "Barlow", - "fontStyle": "normal", - "fontWeight": "400", - "src": [ - "file:./assets/fonts/barlow_normal_400.ttf" - ] - } - ], - "fontFamily": "Barlow", - "slug": "barlow" - } - ], - "fontSizes": [ - { - "name": "Display xl", - "slug": "Display-xl", - "size": "96px", - "fluid": { - "max": "96px", - "min": "52px" - } - }, - { - "name": "Display lg", - "slug": "Display-lg", - "size": "72px", - "fluid": { - "max": "72px", - "min": "46px" - } - }, - { - "name": "Display md", - "slug": "Display-md", - "size": "60px", - "fluid": { - "max": "60px", - "min": "42px" - } - }, - { - "name": "Display sm", - "slug": "Display-sm", - "size": "52px", - "fluid": { - "max": "52px", - "min": "40px" - } - }, - { - "name": "Heading 1", - "slug": "Heading-1", - "size": "48px", - "fluid": { - "max": "48px", - "min": "36px" - } - }, - { - "name": "Heading 2", - "slug": "Heading-2", - "size": "36px", - "fluid": { - "max": "36px", - "min": "30px" - } - }, - { - "name": "Heading 3", - "slug": "Heading-3", - "size": "28px", - "fluid": { - "max": "28px", - "min": "26px" - } - }, - { - "name": "Heading 4", - "slug": "Heading-4", - "size": "24px", - "fluid": { - "max": "24px", - "min": "22px" - } - }, - { - "name": "Heading 5", - "slug": "Heading-5", - "size": "20px", - "fluid": { - "max": "20px", - "min": "19px" - } - }, - { - "name": "Heading 6", - "slug": "Heading-6", - "size": "18px", - "fluid": { - "max": "18px", - "min": "17px" - } - }, - { - "name": "Paragraph lg", - "slug": "paragraph-lg", - "size": "18px", - "fluid": { - "max": "18px", - "min": "17px" - } - }, - { - "name": "Paragraph base", - "slug": "paragraph-base", - "size": "16px", - "fluid": { - "max": "16px", - "min": "16px" - } - }, - { - "name": "Paragraph sm", - "slug": "paragraph-sm", - "size": "14px", - "fluid": { - "max": "14px", - "min": "14px" - } - }, - { - "name": "Info md", - "slug": "Info-md", - "size": "12px", - "fluid": { - "max": "12px", - "min": "12px" - } - }, - { - "name": "Info sm", - "slug": "Info-sm", - "size": "10px", - "fluid": { - "max": "10px", - "min": "10px" - } - } - ], - "fontStyle": true, - "fontWeight": true, - "letterSpacing": true, - "textDecoration": true, - "textTransform": true - }, - "useRootPaddingAwareAlignments": true - }, - "styles": { - "spacing": { - "padding": { - "bottom": "0px", - "left": "16px", - "right": "16px", - "top": "0px" - } + "contentSize": "840px", + "wideSize": "1100px" } }, - "templateParts": [ + "customTemplates": [ { - "area": "header", - "name": "header" - }, - { - "area": "footer", - "name": "footer" + "name": "custom-template", + "title": "Custom", + "postTypes": [ "post" ] } ], - "version": 2, - "$schema": "https://schemas.wp.org/trunk/theme.json" + "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] } From c5f9252d8a061d59c3b65845546e6689e34db4fd Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 14 Feb 2024 10:40:19 +0900 Subject: [PATCH 7/7] Clarify comment --- packages/block-editor/src/store/get-block-settings.js | 4 ++-- packages/blocks/src/api/constants.js | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js index 9a1fcbdad420c1..1bffebf931e818 100644 --- a/packages/block-editor/src/store/get-block-settings.js +++ b/packages/block-editor/src/store/get-block-settings.js @@ -115,8 +115,8 @@ const mergeCache = new WeakMap(); * For settings like `color.palette`, which have a value that is an object * with `default`, `theme`, `custom`, with field values that are arrays of * items, returns the one with the highest priority among these three arrays. - * @param {Object} value Object to merge - * @return {Array} Array of merged items + * @param {Object} value Object to extract from + * @return {Array} Array of items extracted from the three origins */ export function overrideOrigins( value ) { return value.custom ?? value.theme ?? value.default; diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index db7f0e892726e6..99de83353166c7 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -271,6 +271,9 @@ export const __EXPERIMENTAL_ELEMENTS = { cite: 'cite', }; +// These paths may have three origins, custom, theme, and default, +// and are expected to override other origins with custom, theme, +// and default priority. export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = { 'color.duotone': true, 'color.gradients': true,