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.

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

Extract theme json processor #26803

Merged
merged 29 commits into from
Nov 13, 2020
Merged

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Nov 7, 2020

This PR does a few things:

  • Fixes Protect against bad data in processing theme.json #26804

  • Fixes block.json key retrieval: it's called link and not linkColor.

  • Fixes one of the issues noted at Reduce the amount of data Global Styles sends to the client #26802 by sending through __experimentalFeatures and __experimentalGlobalStylesBaseStyles only the relevant data to the client. It fixes the root cause: how we normalize the schema.

  • Extracts the first piece out of global-styles.php, so that it has a structure that helps us maintain, grow, test, and merge it into WP core. More to come in subsequent PRs. It was increasingly difficult to land a big PR with so many features and people working in parallel, so I think it's best to go step by step.

How to test

  • Activate an FSE-enabled theme. Example: demo theme.

Test that the link color works as expected:

  • Go to the edit site and make some changes. For example to the link color.
  • Edit some values and verify that they are updated in the editor. Save and go the front-end, verify that the styles reflect the changes.

Test that it only passes the necessary data: #26802 for details

  • Go to the site editor and verify that the core/edit-site store only holds the necessary data within settings.__experimentalData. Example:

Captura de ecrã de 2020-11-09 17-59-01

Test that an invalid context doesn't break the site #26804

  • Edit lib/global-styles.php and add a new context that doesn't represent any block's selector:
"core/para": {
    "settings": {
        "color": {
            "custom": false
        }
    }
}
  • Verify that the site still works as expected (no PHP errors reported).

@oandregal oandregal self-assigned this Nov 7, 2020
@github-actions
Copy link

github-actions bot commented Nov 7, 2020

Size Change: -92 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/edit-site/index.js 23.2 kB -92 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.71 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.91 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.9 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 821 B 0 B
build/data/index.js 8.74 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.43 kB 0 B
build/edit-post/style.css 6.42 kB 0 B
build/edit-site/style-rtl.css 3.95 kB 0 B
build/edit-site/style.css 3.95 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 713 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.83 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@oandregal oandregal added the [Status] In Progress Tracking issues with work in progress label Nov 7, 2020
@gziolo gziolo added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Nov 8, 2020
@oandregal oandregal mentioned this pull request Nov 8, 2020
6 tasks
@oandregal oandregal force-pushed the try/extract-theme-json-processor branch from da1e259 to c0478f5 Compare November 9, 2020 10:13
@oandregal oandregal marked this pull request as ready for review November 9, 2020 17:03
@oandregal oandregal removed the [Status] In Progress Tracking issues with work in progress label Nov 9, 2020
@oandregal
Copy link
Member Author

I still need to fix some PHP linting issues, but it's now ready for review!

@oandregal oandregal force-pushed the try/extract-theme-json-processor branch from 05d4dc9 to b43d928 Compare November 10, 2020 13:02
* }
*/
const SCHEMA = array(
'selector' => null,
Copy link
Member

Choose a reason for hiding this comment

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

Specifying the schema pointing things can contain strings like selector to null seems strange.
What if specify in the same format to specify inputs for the rest API:
Example:

/**
 * Get our sample schema for comments.
 */
function prefix_get_comment_schema() {
    $schema = array(
        // This tells the spec of JSON Schema we are using which is draft 4.
        '$schema'              => 'http://json-schema.org/draft-04/schema#',
        // The title property marks the identity of the resource.
        'title'                => 'comment',
        'type'                 => 'object',
        // In JSON Schema you can specify object properties in the properties attribute.
        'properties'           => array(
            'id' => array(
                'description'  => esc_html__( 'Unique identifier for the object.', 'my-textdomain' ),
                'type'         => 'integer',
                'context'      => array( 'view', 'edit', 'embed' ),
                'readonly'     => true,
            ),
            'author' => array(
                'description'  => esc_html__( 'The id of the user object, if author was a user.', 'my-textdomain' ),
                'type'         => 'integer',
            ),
            'content' => array(
                'description'  => esc_html__( 'The content for the object.', 'my-textdomain' ),
                'type'         => 'string',
            ),
        ),
    );
 
    return $schema;
}

Copy link
Member Author

Choose a reason for hiding this comment

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

You mean, adding type validation at the leaf node level?

It crossed my mind, and I think it'd be potentially helpful if connected with the logging mechanism for theme authors to see, which is something they have suggested they'd want. It can be useful, yes, but perhaps can be added in a subsequent PR? Would love to land this one quickly to unblock some work, let other people use this, and avoid many rebases (which are going to be / already were quite painful and time-consuming).

Copy link
Member

Choose a reason for hiding this comment

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

Yah having a schema would allow validation at the node level, and I guess developers could even use validation tools to make sure their theme.json is correct.
I guess the first version of a schema could just validate what we have currently but specifying things in schema.json would be better than "'selector' => null," as the current syntax is a little confusing, selector is not null it is a string. It seems we are inventing our own schema.
I agree it can be done as a follow up 👍

Copy link
Member Author

Choose a reason for hiding this comment

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

Created #26955 to track this.

lib/class-wp-theme-json.php Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
* @param array $input Whole tree to normalize.
* @param array $schema Schema to use for normalization.
*/
private function process_key( $key, &$input, $schema ) {
Copy link
Member

Choose a reason for hiding this comment

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

Why do we need to remove the nodes that aren't valid per the schema? When outputting CSS could we simply ignore these nodes?

Copy link
Member Author

Choose a reason for hiding this comment

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

Right, we can do validation at entering-time or at outputting-time. I chose to do it on entering because that simplifies all the internal code for processing the tree (stylesheet processing but also settings, etc). It's also safer, as we are strict on which things we allow and which things we don't, which is important in case attackers are able to hook into the theme.json in the server.

* @param array $declarations Holds the existing declarations.
* @param array $context Input context to process.
*/
private function compute_style_properties( &$declarations, $context ) {
Copy link
Member

Choose a reason for hiding this comment

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

Should this function be static?

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 don't have a strong opinion on this, I'm fine marking them as static. I'm curious why it'd be preferred, though!

Copy link
Member Author

Choose a reason for hiding this comment

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

Copy link
Member

Choose a reason for hiding this comment

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

I think it is a good practice to have all the functions that don't depend on the instance of a class marked as static.

lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
lib/class-wp-theme-json.php Outdated Show resolved Hide resolved
@oandregal oandregal force-pushed the try/extract-theme-json-processor branch 2 times, most recently from 38f89d2 to b591b11 Compare November 12, 2020 11:09
Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

LGTM 👍

I think as follow-ups we should improve our schema. We should also think about the public API we expose we are exposing a set of getters that to me don't seem very useful right now.

@oandregal oandregal force-pushed the try/extract-theme-json-processor branch from aee8a21 to 77d626a Compare November 13, 2020 09:26
@oandregal oandregal merged commit 1d21b92 into master Nov 13, 2020
@oandregal oandregal deleted the try/extract-theme-json-processor branch November 13, 2020 09:52
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 13, 2020
@jorgefilipecosta jorgefilipecosta mentioned this pull request Nov 24, 2020
82 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Protect against bad data in processing theme.json
3 participants