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

Add global styles sidebar at edit site screen #24250

Merged
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

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

@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
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.

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.

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.

@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
82 tasks
@oandregal oandregal force-pushed the try/global-styles-at-edit-site branch from d2c93b2 to 3d51c30 Compare August 25, 2020 11:33
@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 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
Copy link
Member Author

oandregal commented Sep 8, 2020

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

I created some follow-up issues:

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 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
Development

Successfully merging this pull request may close these issues.

8 participants