Skip to content

Commit

Permalink
Consolidate JS logic for marginStyles and spacingStyles to follow PHP…
Browse files Browse the repository at this point in the history 
… consolidation
  • Loading branch information
@andrewserong
andrewserong committed Feb 22, 2023
1 parent 5da1f26 commit db1ca3c
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 77 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,7 +702,7 @@ describe( 'global styles renderer', () => {
} );

expect( layoutStyles ).toEqual(
'.is-layout-flow > .wp-block-cover { margin-block-start: 0; margin-bottom: 50px }.is-layout-flow > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px }.is-layout-flow > *:last-child.wp-block-cover { margin-top: 25px; margin-block-end: 0 }.wp-site-blocks > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }'
'.is-layout-flow > .wp-block-cover { margin-block-start: 0; margin-bottom: 50px; }.is-layout-flow > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }.is-layout-flow > *:last-child.wp-block-cover { margin-top: 25px; margin-block-end: 0; }.wp-site-blocks > .wp-block-cover { margin-block-start: 0; margin-bottom: 50px; }.wp-site-blocks > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }.wp-site-blocks > *:last-child.wp-block-cover { margin-top: 25px; margin-block-end: 0; }'
);
} );
} );
Expand Down
181 changes: 105 additions & 76 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { useContext, useMemo } from '@wordpress/element';
import { compileCSS, getCSSRules } from '@wordpress/style-engine';
import { getCSSRules } from '@wordpress/style-engine';

/**
* Internal dependencies
Expand Down Expand Up @@ -320,6 +320,70 @@ export function getStylesDeclarations(
return output;
}

/**
* Gets the CSS rules for a given layout definition.
*
* @param {string} selectorFormat The string for a selector where `%s` is replaced by the layout rules' selector.
* @param {Object} layoutDefinition The layout definition object.
* @param {string} rulesType The type of rules to get (e.g. 'marginStyles' or 'spacingStyles').
* @param {string|number|Object} replacementValue The value to use for any undefined rules.
* @return {string} Generated CSS rules for the layout styles.
*/
function getLayoutDefinitionRules(
selectorFormat,
layoutDefinition,
rulesType,
replacementValue
) {
const layoutRules = layoutDefinition?.[ rulesType ];
let ruleset = '';

if ( layoutRules?.length ) {
layoutRules.forEach( ( layoutRule ) => {
if (
layoutRule?.selector !== undefined &&
layoutRule?.rules &&
selectorFormat
) {
const declarations = [];
Object.entries( layoutRule.rules ).forEach(
( [ cssProperty, cssValue ] ) => {
if ( cssValue ) {
declarations.push(
`${ cssProperty }: ${ cssValue }`
);
} else if (
typeof replacementValue === 'string' ||
typeof replacementValue === 'number'
) {
declarations.push(
`${ cssProperty }: ${ replacementValue }`
);
} else if (
replacementValue?.[ cssProperty ] !== undefined
) {
declarations.push(
`${ cssProperty }: ${ replacementValue[ cssProperty ] }`
);
}
}
);
const selector = selectorFormat.replace(
'%s',
layoutRule.selector
);
if ( declarations.length ) {
ruleset += `${ selector } { ${ declarations.join(
'; '
) }; }`;
}
}
} );
}

return ruleset;
}

/**
* Get generated CSS for layout styles by looking up layout definitions provided
* in theme.json, and outputting common layout styles, and specific blockGap values.
Expand Down Expand Up @@ -362,10 +426,6 @@ export function getLayoutStyles( {
style?.spacing?.margin &&
tree?.settings?.layout?.definitions
) {
const marginString = compileCSS( {
spacing: { margin: style.spacing.margin },
} );

// Get margin rules keyed by CSS class name.
const marginRules = getCSSRules( {
spacing: { margin: style.spacing.margin },
Expand All @@ -380,90 +440,59 @@ export function getLayoutStyles( {
if ( marginRules ) {
// Add layout aware margin rules for each supported layout type.
Object.values( tree.settings.layout.definitions ).forEach(
( { className, marginStyles } ) => {
if ( marginStyles?.length ) {
marginStyles.forEach( ( marginStyle ) => {
const declarations = [];

Object.entries( marginStyle.rules ).forEach(
( [ cssProperty, cssValue ] ) => {
if ( cssValue ) {
declarations.push(
`${ cssProperty }: ${ cssValue }`
);
} else if ( marginRules[ cssProperty ] ) {
declarations.push(
`${ cssProperty }: ${ marginRules[ cssProperty ] }`
);
}
}
);

ruleset += `.${ className }${
marginStyle?.selector
}${ selector } { ${ declarations.join( '; ' ) } }`;
} );
( layoutDefinition ) => {
ruleset += getLayoutDefinitionRules(
`.${ layoutDefinition.className }%s${ selector }`,
layoutDefinition,
'marginStyles',
marginRules
);
// Add layout aware margin rule for children of the root site blocks class.
if ( layoutDefinition.name === 'default' ) {
ruleset += getLayoutDefinitionRules(
`.wp-site-blocks%s${ selector }`,
layoutDefinition,
'marginStyles',
marginRules
);
}
}
);
// Add layout aware margin rule for children of the root site blocks class.
ruleset += `.wp-site-blocks > * + ${ selector } { ${ marginString } }`;
}
}

if ( gapValue && tree?.settings?.layout?.definitions ) {
Object.values( tree.settings.layout.definitions ).forEach(
( { className, name, spacingStyles } ) => {
( layoutDefinition ) => {
// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
if ( ! hasBlockGapSupport && 'flex' !== name ) {
if (
! hasBlockGapSupport &&
'flex' !== layoutDefinition?.name
) {
return;
}

if ( spacingStyles?.length ) {
spacingStyles.forEach( ( spacingStyle ) => {
const declarations = [];

if ( spacingStyle.rules ) {
Object.entries( spacingStyle.rules ).forEach(
( [ cssProperty, cssValue ] ) => {
declarations.push(
`${ cssProperty }: ${
cssValue ? cssValue : gapValue
}`
);
}
);
}

if ( declarations.length ) {
let combinedSelector = '';

if ( ! hasBlockGapSupport ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `:where(.${ className }${
spacingStyle?.selector || ''
})`
: `:where(${ selector }.${ className }${
spacingStyle?.selector || ''
})`;
} else {
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `${ selector } .${ className }${
spacingStyle?.selector || ''
}`
: `${ selector }.${ className }${
spacingStyle?.selector || ''
}`;
}
ruleset += `${ combinedSelector } { ${ declarations.join(
'; '
) }; }`;
}
} );
let combinedSelector = '';

if ( ! hasBlockGapSupport ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `:where(.${ layoutDefinition.className }%s)`
: `:where(${ selector }.${ layoutDefinition.className }%s)`;
} else {
combinedSelector =
selector === ROOT_BLOCK_SELECTOR
? `${ selector } .${ layoutDefinition.className }%s`
: `${ selector }.${ layoutDefinition.className }%s`;
}

ruleset += getLayoutDefinitionRules(
combinedSelector,
layoutDefinition,
'spacingStyles',
gapValue
);
}
);
// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
Expand Down

0 comments on commit db1ca3c

Please sign in to comment.