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

theme.json spec: document link color feature #22929

Merged
merged 1 commit into from
Jun 8, 2020

Conversation

oandregal
Copy link
Member

Depends on #22622

Documents the changes introduced at #22722

@oandregal
Copy link
Member Author

I've built this on top of #22622 When that lands I'll rebase.

@oandregal oandregal self-assigned this Jun 5, 2020
@oandregal oandregal added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Developer Documentation Documentation for developers labels Jun 5, 2020
@github-actions
Copy link

github-actions bot commented Jun 5, 2020

Size Change: 0 B

Total Size: 1.12 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.75 kB 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-editor/index.js 106 kB 0 B
build/block-editor/style-rtl.css 11.4 kB 0 B
build/block-editor/style.css 11.4 kB 0 B
build/block-library/editor-rtl.css 7.87 kB 0 B
build/block-library/editor.css 7.88 kB 0 B
build/block-library/index.js 126 kB 0 B
build/block-library/style-rtl.css 7.72 kB 0 B
build/block-library/style.css 7.72 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 193 kB 0 B
build/components/style-rtl.css 19.5 kB 0 B
build/components/style.css 19.5 kB 0 B
build/compose/index.js 9.31 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/index.js 8.25 kB 0 B
build/edit-navigation/style-rtl.css 918 B 0 B
build/edit-navigation/style.css 919 B 0 B
build/edit-post/index.js 302 kB 0 B
build/edit-post/style-rtl.css 5.43 kB 0 B
build/edit-post/style.css 5.43 kB 0 B
build/edit-site/index.js 15 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/index.js 8.83 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.7 kB 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 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.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.3 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 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@oandregal oandregal force-pushed the update/theme-json-link-color branch from 201dab4 to 6e3cf0b Compare June 5, 2020 10:09
@@ -16,8 +16,6 @@ The Block Editor surface API has evolved at different velocities, and it's now a

This describes the current efforts to consolidate the various APIs into a single point – a `experimental-theme.json` file that should be located inside the root of the theme directory.

When this file is present a few Block Editor mechanisms are activated.
Copy link
Member Author

Choose a reason for hiding this comment

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

We now enqueue the presets as CSS variables whether or not the theme uses theme.json.

Copy link
Contributor

Choose a reason for hiding this comment

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

Interesting, where this happens, do we have a dev note planned for this and a Core ticket to backport the change?

Copy link
Contributor

Choose a reason for hiding this comment

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

Also, it seems like the logical next step is to apply the block styles as inline styles using the CSS variable in this case. That way, we won't require any CSS from the theme author when defining custom presets.

Copy link
Member

Choose a reason for hiding this comment

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

It was done at #22722, because for link color we are referencing colors using preset CSS variables, and in that case, we need the variables even if the theme does not support theme.json.

I agree we need to update the current way to reference colors to be based on CSS vars like we are doing here. I had a PR for that #21490 so I guess we can reopen and continue that work.

Copy link
Member

Choose a reason for hiding this comment

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

Hi @youknowriad, @nosolosw This link requires the CSS var presets so we will need to include the global styles generation mechanism in core. It is a big step I guess may be able to do it but in case we don't want to do it, I guess a possible way to go would be to rely on condition "process.env.GUTENBERG_PHASE === 2" if the condition matches we reference the colors using the CSS variables otherwise we reference by value (for now), if we add this check into

link: colorObject?.slug
, we avoid the need to backport global styles engine into the core (instead of reference we temporarily reference always by value on the plugin). I guess we don't need to make this decision now but it is a possibility we have. This possibility also does not causes problems with deprecations etc.

Copy link
Contributor

Choose a reason for hiding this comment

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

Is the "link color" pr something that is going to be included in 5.5 even if we don't have "theme.json" ready? If it's the case, we might need a dev note there too right?

Copy link
Contributor

Choose a reason for hiding this comment

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

(Just read the previous comment where you reply to the question)

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've expressed my conservative views on this topic before. However, I also appreciate how the link color feature is a great one to have in 5.5. What if we port to core only the functions that take presets from add_theme_support and the core defaults lib/experimental-theme.json (in case the theme doesn't define any)? Note that we also use the core defaults file for controlling the editor features. cc @gziolo

My thinking is that if we do that, and don't open it to third-parties (no hooks, no reading theme.json from themes, etc), we have leeway to modify the format in the next WordPress version. Is that correct? If it's not, I may suggest looking at alternatives (perhaps not using the core file and use inlined PHP variables within the specific functions or something like that). What do you think?

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 👍

@oandregal oandregal merged commit 76a006b into master Jun 8, 2020
@oandregal oandregal deleted the update/theme-json-link-color branch June 8, 2020 07:11
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone Jun 8, 2020
@oandregal oandregal changed the title Document link color feature theme.json spec: document link color feature Jun 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants