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

Add global styles sidebar at edit site screen #24250

Merged
merged 84 commits into from
Sep 8, 2020
Merged

Add global styles sidebar at edit site screen #24250

merged 84 commits into from
Sep 8, 2020

Conversation

oandregal
Copy link
Member

Previous attempts: #20061 #20530

This PR resumes the work to add a mechanism for the user to tweak the styles that are defined by core and theme via experimental-theme.json.

2007-28-2119-global-styles-edit-site

Test instructions

Test in edit-site:

  • Install and activate the Global Styles demo theme (or any other with support for global styles).
  • Enable the FSE Experiment under "Gutenberg > Experiments".
  • Go to "Gutenberg > Site Editor (beta)" and play with the Global Styles controls in the sidebar. For example, set the link color in the global tab.
  • Save the changes to the Global Styles template via the "Update design" button in the editor.
  • Go to the front and see that your changes are applied and are the same as the editor.

Test in edit-post:

  • Install and activate the Global Styles demo theme.
  • Enable the FSE Experiment under "Gutenberg > Experiments".
  • Go to the post editor and create some content. Make sure the style changes done in edit-site are honored. For example, add two paragraphs with a link, verify the link color is the same than in edit-site.
  • Select one of the paragraphs and edit its link color. Verify that the link color of that paragraph is updated but the other one remains the same.

@oandregal oandregal self-assigned this Jul 28, 2020
@github-actions
Copy link

github-actions bot commented Jul 28, 2020 •
edited
Loading

Size Change: +1.99 kB (0%)

Total Size: 1.2 MB

Filename Size Change
build/a11y/index.js 1.14 kB +1 B
build/annotations/index.js 3.67 kB +2 B (0%)
build/autop/index.js 2.83 kB +2 B (0%)
build/block-directory/index.js 8.5 kB +2 B (0%)
build/block-editor/index.js 128 kB -1 B
build/block-editor/style-rtl.css 11.1 kB -48 B (0%)
build/block-editor/style.css 11.1 kB -51 B (0%)
build/block-library/index.js 138 kB +12 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +1 B
build/blocks/index.js 47.7 kB -6 B (0%)
build/components/index.js 200 kB -5 B (0%)
build/compose/index.js 9.68 kB +3 B (0%)
build/data-controls/index.js 1.29 kB -3 B (0%)
build/edit-navigation/index.js 11.7 kB +1 B
build/edit-post/index.js 305 kB -4 B (0%)
build/edit-site/index.js 19.2 kB +2.06 kB (10%) ⚠️
build/edit-widgets/index.js 12.1 kB +3 B (0%)
build/editor/index.js 45.7 kB +15 B (0%)
build/element/index.js 4.64 kB -2 B (0%)
build/format-library/index.js 7.71 kB +2 B (0%)
build/keyboard-shortcuts/index.js 2.52 kB +3 B (0%)
build/keycodes/index.js 1.95 kB +1 B
build/list-reusable-blocks/index.js 3.12 kB +1 B
build/notices/index.js 1.79 kB -2 B (0%)
build/nux/index.js 3.4 kB +2 B (0%)
build/plugins/index.js 2.56 kB +1 B
build/redux-routine/index.js 2.85 kB -1 B
build/rich-text/index.js 13.9 kB +1 B
build/server-side-render/index.js 2.77 kB -1 B
build/viewport/index.js 1.85 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/api-fetch/index.js 3.41 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-library/editor-rtl.css 8.64 kB 0 B
build/block-library/editor.css 8.64 kB 0 B
build/block-library/style-rtl.css 7.59 kB 0 B
build/block-library/style.css 7.58 kB 0 B
build/block-library/theme-rtl.css 754 B 0 B
build/block-library/theme.css 754 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/style-rtl.css 6.26 kB 0 B
build/edit-post/style.css 6.25 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/style-rtl.css 2.46 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/escape-html/index.js 733 B 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.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 711 B 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/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

This was referenced Jul 30, 2020
Merged
Merged
Merged
Merged
@oandregal oandregal force-pushed the try/global-styles-at-edit-site branch from afa925f to d2c93b2 Compare August 4, 2020 17:17
@carolinan
Copy link
Contributor

I may have done something wrong, but I can not get the PR to work fully, following the instructions above.

+For an early implementation the sidebar looks good in the site editor. So happy to see progress on this. (I think the block type list needs better grouping because it get's too long to manage)
+The styles are applied, visible in the site editor.

-Styles are not saved. So they are also not visible when I switch to the post editor, nor on the front.
-When I change the text color with the post title H1 control, the text color of the site title is changed.

I was wondering if the duplication of the wrapper is on purpose:
.editor-styles-wrapper.editor-styles-wrapper .wp-block-group { background-color: #ffe959 }

@jorgefilipecosta jorgefilipecosta added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Aug 12, 2020
@jorgefilipecosta jorgefilipecosta mentioned this pull request Aug 12, 2020
Closed
jorgefilipecosta
jorgefilipecosta reviewed Aug 13, 2020
View reviewed changes
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.

I was not being able to run this branch and the always crashed. Turns I had user global styles data save using a previous format. If someone experiments a similar issue verify the posts with

SELECT * FROM `wp_posts` WHERE `post_name` LIKE 'wp-global-styles-global-styles' ORDER BY `ID` DESC

And if there is data in a strange format delete all the posts matching the condition.

jorgefilipecosta
jorgefilipecosta reviewed Aug 13, 2020
View reviewed changes
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.

While testing this PR, I noticed that when I changed the global preset font size, it was not affecting the paragraphs or the headings, and I initially thought something was not working because chaning the global value did not seemed to have any impact at all.

Then I noticed that the theme.json file specified a size for the paragraph and headings, making the global value not used at all. I guess users may be confused easily. In some themes, the global setting affected the paragraph in other themes it does not affect at all. I think it may be helpful to have toggle/hint that allows us to see which blocks will not be affected because they have a block specific theme/user overwrite. Not in scope of this PR, just leaving a suggestion for the future.

jorgefilipecosta
jorgefilipecosta reviewed Aug 13, 2020
View reviewed changes
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.

Awesome work @nosolosw this PR seems to be working well 👍 I guess we should try to merge it soon.

@noahtallen noahtallen mentioned this pull request Aug 21, 2020
Closed
@paaljoachim
Copy link
Contributor

It would be great to get this first iteration into Gutenberg, and make it possible to test by turning on the experiment through Gutenberg -> Experiments screen. It would make it a lot easier for people to test and give feedback. Thanks!

@mtias mtias mentioned this pull request Aug 25, 2020
Closed
82 tasks
@oandregal oandregal force-pushed the try/global-styles-at-edit-site branch from d2c93b2 to 3d51c30 Compare August 25, 2020 11:33
@jorgefilipecosta jorgefilipecosta mentioned this pull request Aug 25, 2020
Closed
@ZebulanStanphill ZebulanStanphill added the Needs Accessibility Feedback Need input from accessibility label Aug 28, 2020
@oandregal oandregal force-pushed the try/global-styles-at-edit-site branch from 793403d to 408abde Compare September 1, 2020 11:55
@oandregal oandregal marked this pull request as ready for review September 2, 2020 12:24
@oandregal
Copy link
Member Author

I'm moving this from draft to open for reviews. It still needs some tweaks, but it's now in a good state. We can start thinking of merging it. 🤞 💪

@oandregal
Migrate setProperty to use path
09dc3d9
@oandregal
Migrate getProperty to use path
c511af2
@oandregal
Pass object to setProperty to allow updating multiple entries at once
30b8bcf
@oandregal
prettify
027db4d
@oandregal
Make gradients work
dae9269
@oandregal
Allow background without gradient
6dfc7e5
@oandregal
Revert adding wrong check
422a359 
Since #22520 was merged
on May we've been enqueuing the presets as CSS variables
whether or not the theme had support for theme.json
as a way to speed up themes using them and get feedback.

There are enough checks in place that this is inocuous.
@oandregal
Clarify gutenberg_experimental_global_styles_settings
43a6f12
@oandregal
Remove incorrect comment
63dc5f1
@oandregal
Refactor GlobalStylesProvider
16ed391
@oandregal
Fix function arguments
fbbac37
@oandregal
Fix style effect
3491e92
@oandregal
Disable custom gradients
0248802
@oandregal
Prettify
b90617e
@oandregal
Update close button label
76a68c3
@oandregal oandregal force-pushed the try/global-styles-at-edit-site branch from 80f350d to 76a68c3 Compare September 8, 2020 07:18
@oandregal
Copy link
Member Author

With latest master and this PR, I get the following WSOD PHP error if I disable the full site editing experiment and open the editor

Good catch, Carolina, thanks! It's fixed as of 20fcaaa

@oandregal oandregal merged commit 5eed5c5 into master Sep 8, 2020
@oandregal oandregal deleted the try/global-styles-at-edit-site branch September 8, 2020 08:00
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 8, 2020
This was referenced Sep 8, 2020
Closed
Closed
Closed
Closed
Closed
@oandregal
Copy link
Member Author

oandregal commented Sep 8, 2020 •
edited
Loading

This has been merged and will be part of the next Gutenberg release. Thanks for your time, everyone! 💪

I created some follow-up issues:

This was referenced Sep 8, 2020
Closed
Closed
@Copons Copons mentioned this pull request Nov 13, 2020
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZebulanStanphill ZebulanStanphill ZebulanStanphill left review comments

@jorgefilipecosta jorgefilipecosta jorgefilipecosta approved these changes

@youknowriad youknowriad Awaiting requested review from youknowriad

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey

@TimothyBJacobs TimothyBJacobs Awaiting requested review from TimothyBJacobs

@afercia afercia Awaiting requested review from afercia

Assignees

@oandregal oandregal

Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Accessibility Feedback Need input from accessibility Needs Technical Feedback Needs testing from a developer perspective. [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Milestone
Gutenberg 9.0
Development

Successfully merging this pull request may close these issues.
8 participants
@oandregal @carolinan @paaljoachim @jorgefilipecosta @mtias @afercia @ZebulanStanphill @vindl