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

Centralize style & support mappings for blocks #25185

Merged
merged 13 commits into from
Sep 10, 2020
Merged

Centralize style & support mappings for blocks #25185

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d51a5de
Create constants in blocks API
oandregal Sep 9, 2020
e78fd5a
Migrate block-editor to use constants from blocks API
oandregal Sep 9, 2020
b4b50c8
Migrate edit-site to use constants from blocks API
oandregal Sep 9, 2020
7c9560a
Make linter happy
oandregal Sep 9, 2020
cc79a34
Move support keys back to block-editor
oandregal Sep 9, 2020
6821e59
Reformat back to be equal to master
oandregal Sep 9, 2020
4b882e4
Get back master format
oandregal Sep 9, 2020
68f8e6c
Get back format as in master
oandregal Sep 9, 2020
9d1b159
Add experimental prefix
oandregal Sep 10, 2020
391336a
Do not export link color
oandregal Sep 10, 2020
6b635ad
Getter and setter only take the property name
oandregal Sep 10, 2020
7a44eaa
Rename getter/setter for better semantics
oandregal Sep 10, 2020
b6229f7
Typography panel: use property name in getter/setter
oandregal Sep 10, 2020
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
54 changes: 35 additions & 19 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,26 +262,50 @@ function gutenberg_experimental_global_styles_get_theme() {
}

/**
* Returns the style features a particular block supports.
* Return how the style property is structured.
*
* @param array $supports The block supports array.
* @return array Style property structure.
*/
function gutenberg_experimental_global_styles_get_style_property() {
return array(
'line-height' => array( 'typography', 'lineHeight' ),
'font-size' => array( 'typography', 'fontSize' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'color' => array( 'color', 'text' ),
'--wp--style--color--link' => array( 'color', 'link' ),
);
}

/**
* Return how the support keys are structured.
*
* @return array Style features supported by the block.
* @return array Support keys structure.
*/
function gutenberg_experimental_global_styles_get_supported_styles( $supports ) {
$style_features = array(
function gutenberg_experimental_global_styles_get_support_keys() {
return array(
'--wp--style--color--link' => array( '__experimentalColor', 'linkColor' ),
'background-color' => array( '__experimentalColor' ),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These keys were renamed to use the same conventions as client-side (camelCase over kebab-case), making everything more coherent and less computation-demanding.

'backgroundColor' => array( '__experimentalColor' ),
'background' => array( '__experimentalColor', 'gradients' ),
'color' => array( '__experimentalColor' ),
'font-size' => array( '__experimentalFontSize' ),
'line-height' => array( '__experimentalLineHeight' ),
'fontSize' => array( '__experimentalFontSize' ),
'lineHeight' => array( '__experimentalLineHeight' ),
);
}

/**
* Returns the style features a particular block supports.
*
* @param array $supports The block supports array.
*
* @return array Style features supported by the block.
*/
function gutenberg_experimental_global_styles_get_supported_styles( $supports ) {
$support_keys = gutenberg_experimental_global_styles_get_support_keys();
$supported_features = array();
foreach ( $style_features as $style_feature => $path ) {
foreach ( $support_keys as $key => $path ) {
if ( gutenberg_experimental_get( $supports, $path ) ) {
$supported_features[] = $style_feature;
$supported_features[] = $key;
}
}

Expand Down Expand Up @@ -385,17 +409,9 @@ function gutenberg_experimental_global_styles_get_block_data() {
* @return array Containing a set of css rules.
*/
function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) {
$mappings = array(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No changes here, only extracted to a separate function.

'line-height' => array( 'typography', 'lineHeight' ),
'font-size' => array( 'typography', 'fontSize' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'color' => array( 'color', 'text' ),
'--wp--style--color--link' => array( 'color', 'link' ),
);
$mappings = gutenberg_experimental_global_styles_get_style_property();

$result = array();

foreach ( $mappings as $key => $path ) {
$value = gutenberg_experimental_get( $styles, $path, null );
if ( null !== $value ) {
Expand Down
8 changes: 5 additions & 3 deletions packages/block-editor/src/hooks/color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import { isObject } from 'lodash';
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
import {
hasBlockSupport,
getBlockSupport,
COLOR_SUPPORT_KEY,
} from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useRef, useEffect, Platform } from '@wordpress/element';
Expand All @@ -31,8 +35,6 @@ import { cleanEmptyObject } from './utils';
import ColorPanel from './color-panel';
import useEditorFeature from '../components/use-editor-feature';

export const COLOR_SUPPORT_KEY = '__experimentalColor';

const hasColorSupport = ( blockType ) =>
Platform.OS === 'web' && hasBlockSupport( blockType, COLOR_SUPPORT_KEY );

Expand Down
4 changes: 1 addition & 3 deletions packages/block-editor/src/hooks/font-size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport } from '@wordpress/blocks';
import { hasBlockSupport, FONT_SIZE_SUPPORT_KEY } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import TokenList from '@wordpress/token-list';

Expand All @@ -18,8 +18,6 @@ import {
import { cleanEmptyObject } from './utils';
import { createHigherOrderComponent } from '@wordpress/compose';

export const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize';

/**
* Filters registered block settings, extending attributes to include
* `fontSize` and `fontWeight` attributes.
Expand Down
4 changes: 1 addition & 3 deletions packages/block-editor/src/hooks/line-height.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { hasBlockSupport } from '@wordpress/blocks';
import { hasBlockSupport, LINE_HEIGHT_SUPPORT_KEY } from '@wordpress/blocks';

/**
* Internal dependencies
Expand All @@ -10,8 +10,6 @@ import LineHeightControl from '../components/line-height-control';
import { cleanEmptyObject } from './utils';
import useEditorFeature from '../components/use-editor-feature';

export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight';

/**
* Inspector control panel containing the line height related configuration
*
Expand Down
4 changes: 1 addition & 3 deletions packages/block-editor/src/hooks/padding.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { Platform } from '@wordpress/element';
import { hasBlockSupport } from '@wordpress/blocks';
import { hasBlockSupport, PADDING_SUPPORT_KEY } from '@wordpress/blocks';
import { __experimentalBoxControl as BoxControl } from '@wordpress/components';

/**
Expand All @@ -12,8 +12,6 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
import { cleanEmptyObject } from './utils';
import { useCustomUnits } from '../components/unit-control';

export const PADDING_SUPPORT_KEY = '__experimentalPadding';

/**
* Inspector control panel containing the line height related configuration
*
Expand Down
31 changes: 18 additions & 13 deletions packages/block-editor/src/hooks/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,31 @@ import { has, get, startsWith } from 'lodash';
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { hasBlockSupport } from '@wordpress/blocks';
import {
hasBlockSupport,
COLOR_SUPPORT_KEY,
FONT_SIZE_SUPPORT_KEY,
LINE_HEIGHT_SUPPORT_KEY,
PADDING_SUPPORT_KEY,
STYLE_PROPERTY,
} from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
import { PADDING_SUPPORT_KEY, PaddingEdit } from './padding';
import { ColorEdit } from './color';
import { TypographyPanel } from './typography';
import { PaddingEdit } from './padding';
import SpacingPanelControl from '../components/spacing-panel-control';
import { STYLE_MAPPINGS } from './utils';

const styleSupportKeys = [
...TYPOGRAPHY_SUPPORT_KEYS,
COLOR_SUPPORT_KEY,
PADDING_SUPPORT_KEY,
];

const hasStyleSupport = ( blockType ) =>
styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
[
LINE_HEIGHT_SUPPORT_KEY,
FONT_SIZE_SUPPORT_KEY,
COLOR_SUPPORT_KEY,
PADDING_SUPPORT_KEY,
].some( ( key ) => hasBlockSupport( blockType, key ) );

const VARIABLE_REFERENCE_PREFIX = 'var:';
const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
Expand All @@ -50,7 +55,7 @@ function compileStyleValue( uncompiledValue ) {
*/
export function getInlineStyles( styles = {} ) {
const output = {};
Object.entries( STYLE_MAPPINGS ).forEach(
Object.entries( STYLE_PROPERTY ).forEach(
( [ styleKey, ...otherObjectKeys ] ) => {
const [ objectKeys ] = otherObjectKeys;

Expand Down
25 changes: 8 additions & 17 deletions packages/block-editor/src/hooks/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
/**
* WordPress dependencies
*/
import { hasBlockSupport } from '@wordpress/blocks';
import {
hasBlockSupport,
FONT_SIZE_SUPPORT_KEY,
LINE_HEIGHT_SUPPORT_KEY,
} from '@wordpress/blocks';
import { PanelBody } from '@wordpress/components';
import { Platform } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
Expand All @@ -11,21 +15,8 @@ import { __ } from '@wordpress/i18n';
*/
import InspectorControls from '../components/inspector-controls';

import {
LINE_HEIGHT_SUPPORT_KEY,
LineHeightEdit,
useIsLineHeightDisabled,
} from './line-height';
import {
FONT_SIZE_SUPPORT_KEY,
FontSizeEdit,
useIsFontSizeDisabled,
} from './font-size';

export const TYPOGRAPHY_SUPPORT_KEYS = [
LINE_HEIGHT_SUPPORT_KEY,
FONT_SIZE_SUPPORT_KEY,
];
import { LineHeightEdit, useIsLineHeightDisabled } from './line-height';
import { FontSizeEdit, useIsFontSizeDisabled } from './font-size';

export function TypographyPanel( props ) {
const isDisabled = useIsTypographyDisabled( props );
Expand All @@ -46,7 +37,7 @@ export function TypographyPanel( props ) {
const hasTypographySupport = ( blockName ) => {
return (
Platform.OS === 'web' &&
TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
[ FONT_SIZE_SUPPORT_KEY, LINE_HEIGHT_SUPPORT_KEY ].some( ( key ) =>
hasBlockSupport( blockName, key )
)
);
Expand Down
13 changes: 0 additions & 13 deletions packages/block-editor/src/hooks/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,3 @@ export const cleanEmptyObject = ( object ) => {
? undefined
: cleanedNestedObjects;
};

export const STYLE_MAPPINGS = {
lineHeight: [ 'typography', 'lineHeight' ],
fontSize: [ 'typography', 'fontSize' ],
background: [ 'color', 'gradient' ],
backgroundColor: [ 'color', 'background' ],
color: [ 'color', 'text' ],
'--wp--style--color--link': [ 'color', 'link' ],
paddingTop: [ 'spacing', 'padding', 'top' ],
paddingRight: [ 'spacing', 'padding', 'right' ],
paddingBottom: [ 'spacing', 'padding', 'bottom' ],
paddingLeft: [ 'spacing', 'padding', 'left' ],
};
1 change: 0 additions & 1 deletion packages/block-editor/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,3 @@ export * from './components';
export * from './utils';
export { storeConfig } from './store';
export { SETTINGS_DEFAULTS } from './store/defaults';
export { STYLE_MAPPINGS as __EXPERIMENTAL_STYLE_MAPPINGS } from './hooks/utils';
24 changes: 24 additions & 0 deletions packages/blocks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,10 @@ _Returns_

- `Object`: A cloned block.

<a name="COLOR_SUPPORT_KEY" href="#COLOR_SUPPORT_KEY">#</a> **COLOR_SUPPORT_KEY**

Undocumented declaration.

<a name="createBlock" href="#createBlock">#</a> **createBlock**

Returns a block object given its type and attributes.
Expand Down Expand Up @@ -235,6 +239,10 @@ _Returns_

- `?Object`: Highest-priority transform candidate.

<a name="FONT_SIZE_SUPPORT_KEY" href="#FONT_SIZE_SUPPORT_KEY">#</a> **FONT_SIZE_SUPPORT_KEY**

Undocumented declaration.

<a name="getBlockAttributes" href="#getBlockAttributes">#</a> **getBlockAttributes**

Returns the block attributes of a registered block node given its type.
Expand Down Expand Up @@ -558,6 +566,14 @@ _Returns_

- `boolean`: True if the parameter is a valid icon and false otherwise.

<a name="LINE_HEIGHT_SUPPORT_KEY" href="#LINE_HEIGHT_SUPPORT_KEY">#</a> **LINE_HEIGHT_SUPPORT_KEY**

Undocumented declaration.

<a name="LINK_COLOR" href="#LINK_COLOR">#</a> **LINK_COLOR**

Undocumented declaration.

<a name="normalizeIconObject" href="#normalizeIconObject">#</a> **normalizeIconObject**

Function that receives an icon as set by the blocks during the registration
Expand All @@ -572,6 +588,10 @@ _Returns_

- `WPBlockTypeIconDescriptor`: Object describing the icon.

<a name="PADDING_SUPPORT_KEY" href="#PADDING_SUPPORT_KEY">#</a> **PADDING_SUPPORT_KEY**

Undocumented declaration.

<a name="parse" href="#parse">#</a> **parse**

Parses the post content with a PegJS grammar and returns a list of blocks.
Expand Down Expand Up @@ -724,6 +744,10 @@ _Parameters_

- _blockName_ `string`: Block name.

<a name="STYLE_PROPERTY" href="#STYLE_PROPERTY">#</a> **STYLE_PROPERTY**

Undocumented declaration.

<a name="switchToBlockType" href="#switchToBlockType">#</a> **switchToBlockType**

Switch one or more blocks into one or more blocks of the new block type.
Expand Down
21 changes: 21 additions & 0 deletions packages/blocks/src/api/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,24 @@ export const DEPRECATED_ENTRY_KEYS = [
'migrate',
'isEligible',
];

export const LINK_COLOR = '--wp--style--color--link';

export const STYLE_PROPERTY = {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a good place for this kind of info, as it speaks about how the block attributes are structured. However, I don't feel super strongly about this. If this is a blocker I'm fine moving it to any other place.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we should prefix the constant with experimental.

[ LINK_COLOR ]: [ 'color', 'link' ],
background: [ 'color', 'gradient' ],
backgroundColor: [ 'color', 'background' ],
color: [ 'color', 'text' ],
fontSize: [ 'typography', 'fontSize' ],
lineHeight: [ 'typography', 'lineHeight' ],
paddingBottom: [ 'spacing', 'padding', 'bottom' ],
paddingLeft: [ 'spacing', 'padding', 'left' ],
paddingRight: [ 'spacing', 'padding', 'right' ],
paddingTop: [ 'spacing', 'padding', 'top' ],
};

/* Block supports */
export const COLOR_SUPPORT_KEY = '__experimentalColor';
export const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize';
export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight';
export const PADDING_SUPPORT_KEY = '__experimentalPadding';
8 changes: 8 additions & 0 deletions packages/blocks/src/api/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,11 @@ export {
} from './templates';
export { default as children } from './children';
export { default as node } from './node';
export {
COLOR_SUPPORT_KEY,
FONT_SIZE_SUPPORT_KEY,
LINE_HEIGHT_SUPPORT_KEY,
LINK_COLOR,
PADDING_SUPPORT_KEY,
STYLE_PROPERTY,
} from './constants';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm concerned about this personally, it makes it an API and I don't really know whether these keys will remain as is, be combined... Why do we need this to be an API? (specially the _key ones)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mmm, my rationale was that the support keys are actually part of the API. This is why: if we had specific accessors (hasLineHeightSupport, hasFontSizeSupport, etc), consumers wouldn't need anything else to use them; however, by having general accessors (such as hasBlockSupport( feature )) we also need to provide the consumer with a list of the available keys they can use. So far, they inspect the block.json for this. I'd think providing constants for them would make it easier for us to modify their names later on if we need to. Said this, I realize we don't expose any other feature, so I won't hold this opinion too strongly and would be fine to move these back to block-editor, if that's preferred.

For the style keys, I agree with Jorge that we need a single source of truth, as they're both used in block-editor and edit-site. Exporting them here makes more sense from my POV.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in which situation we need to access these keys outside the hooks themselves which are part of block-editor package?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reverted the support keys to block-editor. I still think that we should offer a feature list as I mentioned, but I realized that it doesn't seem a good idea to start with the experimental keys.

Loading