Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles hook: swap out lodash methods with their JS equivalents #40918

Merged
merged 4 commits into from
May 10, 2022
Merged

Styles hook: swap out lodash methods with their JS equivalents #40918

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d451e6d
Swapping out lodash methods with their JS equivalents
ramonjd May 9, 2022
1d5f63b
Refactor to use `Object.entries` and optional chaining to check for f…
ramonjd May 9, 2022
76f6be0
Forgot Object.entries destructuring
ramonjd May 9, 2022
9dd6f5f
Reinstated the element key name to something more specific.
ramonjd May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 24 additions & 35 deletions packages/block-editor/src/hooks/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
/**
* External dependencies
*/
import {
first,
forEach,
get,
has,
isEmpty,
isString,
kebabCase,
map,
omit,
startsWith,
} from 'lodash';
import { get, has, isEmpty, kebabCase, omit } from 'lodash';
import classnames from 'classnames';

/**
Expand Down Expand Up @@ -58,7 +47,7 @@ const VARIABLE_REFERENCE_PREFIX = 'var:';
const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
function compileStyleValue( uncompiledValue ) {
if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
const variable = uncompiledValue
.slice( VARIABLE_REFERENCE_PREFIX.length )
.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
Expand All @@ -82,13 +71,13 @@ export function getInlineStyles( styles = {} ) {
const path = STYLE_PROPERTY[ propKey ].value;
const subPaths = STYLE_PROPERTY[ propKey ].properties;
// Ignore styles on elements because they are handled on the server.
if ( has( styles, path ) && 'elements' !== first( path ) ) {
if ( has( styles, path ) && 'elements' !== path?.[ 0 ] ) {
// Checking if style value is a string allows for shorthand css
// option and backwards compatibility for border radius support.
const styleValue = get( styles, path );

if ( ! STYLE_PROPERTY[ propKey ].useEngine ) {
if ( !! subPaths && ! isString( styleValue ) ) {
if ( !! subPaths && typeof styleValue !== 'string' ) {
Object.entries( subPaths ).forEach( ( entry ) => {
const [ name, subPath ] = entry;
const value = get( styleValue, [ subPath ] );
Expand Down Expand Up @@ -120,24 +109,25 @@ export function getInlineStyles( styles = {} ) {
}

function compileElementsStyles( selector, elements = {} ) {
return map( elements, ( styles, element ) => {
const elementStyles = getInlineStyles( styles );
if ( ! isEmpty( elementStyles ) ) {
// The .editor-styles-wrapper selector is required on elements styles. As it is
// added to all other editor styles, not providing it causes reset and global
// styles to override element styles because of higher specificity.
return [
`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
...map(
elementStyles,
( value, property ) =>
`\t${ kebabCase( property ) }: ${ value };`
),
'}',
].join( '\n' );
}
return '';
} ).join( '\n' );
return Object.entries( elements )
.map( ( [ element, styles ] ) => {
const elementStyles = getInlineStyles( styles );
if ( ! isEmpty( elementStyles ) ) {
// The .editor-styles-wrapper selector is required on elements styles. As it is
// added to all other editor styles, not providing it causes reset and global
// styles to override element styles because of higher specificity.
return [
`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
...Object.entries( elementStyles ).map(
( [ cssProperty, value ] ) =>
`\t${ kebabCase( cssProperty ) }: ${ value };`
),
'}',
].join( '\n' );
}
return '';
} )
.join( '\n' );
}

/**
Expand Down Expand Up @@ -235,8 +225,7 @@ export function addSaveProps(
}

let { style } = attributes;

forEach( skipPaths, ( path, indicator ) => {
Object.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {
const skipSerialization = getBlockSupport( blockType, indicator );

if ( skipSerialization === true ) {
Expand Down