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

Jump to bottom

Make global styles shape consistent with local styles shape. #22744

Merged
merged 1 commit into from
May 29, 2020
Merged

Make global styles shape consistent with local styles shape. #22744

merged 1 commit into from
May 29, 2020

Conversation

jorgefilipecosta
Copy link
Member

Currently, for the shape of the local style we are using something like this:

		"style": {
			"color": {
				"text": "#00e"
			},
			"typography": {
				"lineHeight": 20,
				"fontSize": 12
			}
		}

While for global styles we were using the shape:

		"styles": {
			"color": "#00e",
			"line-height": 20,
			"font-size": 12
		}

We should use the same shape and this PR updates the global styles shape to be similar to what we had for local styles.

There is still one inconsistency for local styles we call "style" and for global styles, we call "styles". Should we update global styles to use "style"?

Besides this update we also perform smaller updates required to have a link color end to end implementation:
- We add a setting __experimentalGlobalStyles containing the full global styles required to show the defaults including user-set global styles.
- We unconditional include the default styles even if the theme does not has theme.json support. I guess even if the theme does not contain theme.json we may want to allow users to change the link color, and even change it globally and for that, we need a default even if for themes that don't have theme.json.

How has this been tested?

I added this after global to /lib/experimental-default-theme.json:

	"core/paragraph": {
		"styles": {
			"color": {
				"text": "#00e"
			},
			"typography": {
				"lineHeight": 20,
				"fontSize": 12
			}
		}
	}

I verified the following styles were output:

p {
	line-height: 20;
	font-size: 12;
	color: #00e;
}

@jorgefilipecosta jorgefilipecosta added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label May 29, 2020
@jorgefilipecosta jorgefilipecosta force-pushed the update/make-global-styles-shape-consitent-with-local-styles-shape branch from b85f545 to 3213429 Compare May 29, 2020 12:41
@github-actions
Copy link

github-actions bot commented May 29, 2020 •
edited
Loading

Size Change: 0 B

Total Size: 1.11 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.48 kB 0 B
build/block-directory/style-rtl.css 787 B 0 B
build/block-directory/style.css 787 B 0 B
build/block-editor/index.js 105 kB 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/editor-rtl.css 7.61 kB 0 B
build/block-library/editor.css 7.61 kB 0 B
build/block-library/index.js 119 kB 0 B
build/block-library/style-rtl.css 7.68 kB 0 B
build/block-library/style.css 7.68 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.1 kB 0 B
build/components/index.js 190 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.32 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.43 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.11 kB 0 B
build/edit-navigation/index.js 7.88 kB 0 B
build/edit-navigation/style-rtl.css 857 B 0 B
build/edit-navigation/style.css 856 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 14.1 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.6 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.64 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 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 622 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.51 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.29 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.02 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.17 kB 0 B

compressed-size-action

oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
oandregal
oandregal reviewed May 29, 2020
View reviewed changes
lib/global-styles.php Outdated Show resolved Hide resolved
@jorgefilipecosta jorgefilipecosta mentioned this pull request May 29, 2020
Merged
@jorgefilipecosta jorgefilipecosta force-pushed the update/make-global-styles-shape-consitent-with-local-styles-shape branch 2 times, most recently from 182b137 to 4b505ea Compare May 29, 2020 15:18
oandregal
oandregal approved these changes May 29, 2020
View reviewed changes
Copy link
Member

@oandregal oandregal left a comment

Choose a reason for hiding this comment

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

This is a lovely PR, thanks.

@oandregal oandregal mentioned this pull request May 29, 2020
Merged
@oandregal
Copy link
Member

@jorgefilipecosta actually, I forgot to mention that we need to update the docs for theme.json. We can land this after that and fixing the linting errors.

To make progress, I've already ported the get utility to #22698 I'll deal with the rebase as soon as this lands.

@jorgefilipecosta jorgefilipecosta force-pushed the update/make-global-styles-shape-consitent-with-local-styles-shape branch 2 times, most recently from ac21383 to a415c69 Compare May 29, 2020 16:35
@jorgefilipecosta
Update lib/global-styles.php
b60733d 
Co-authored-by: Andrés <[email protected]> (+1 squashed commit)
Squashed commits:
[3213429] Update: Make global styles shape consistent with local styles shape.
@jorgefilipecosta jorgefilipecosta force-pushed the update/make-global-styles-shape-consitent-with-local-styles-shape branch from a415c69 to b60733d Compare May 29, 2020 16:35
@jorgefilipecosta jorgefilipecosta merged commit e8d7e84 into master May 29, 2020
@jorgefilipecosta jorgefilipecosta deleted the update/make-global-styles-shape-consitent-with-local-styles-shape branch May 29, 2020 16:53
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone May 29, 2020
@jorgefilipecosta
Copy link
Member Author

Hi @nosolosw Thank you for the review the PR was merged and the documentation was updated 👍

@oandregal oandregal changed the title Update: Make global styles shape consistent with local styles shape. Make global styles shape consistent with local styles shape. Jun 8, 2020
@ellatrix ellatrix mentioned this pull request Jun 16, 2020
Closed
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oandregal oandregal oandregal approved these changes

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey

@TimothyBJacobs TimothyBJacobs Awaiting requested review from TimothyBJacobs

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

@mkaz mkaz Awaiting requested review from mkaz

Assignees
No one assigned
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
Projects
None yet
Milestone
Gutenberg 8.3
Development

Successfully merging this pull request may close these issues.
2 participants
@jorgefilipecosta @oandregal