Skip to content

Global styles: add custom CSS panel to site editor #46141

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

Merged
aaronrobertshaw merged 39 commits into from
Dec 13, 2022
Merged

Global styles: add custom CSS panel to site editor #46141

Changes from 1 commit
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
9c926f3
Try adding a custom CSS panel to global styles
glendaviesnz Dec 5, 2022
64d22a9
Update screen-css.js
carolinan Jul 1, 2022
28b5fb6
Update
carolinan Jul 5, 2022
c0bfa6b
Fix fatal error and update compat directory
Mamaduka Nov 29, 2022
0678fa8
No need to enable REST API support for custom_css post type
Mamaduka Nov 29, 2022
d9cced1
Fix PHPLint errors
Mamaduka Nov 29, 2022
a5b66c2
Switch to using core data store instead of direct fetches to API
glendaviesnz Nov 30, 2022
6473e7d
Render the custom css into the site editor
glendaviesnz Nov 30, 2022
144cee4
Switch to the useEntityRecord hook
glendaviesnz Nov 30, 2022
49ede18
remove use of custom_css post type as switching to use global styles
glendaviesnz Dec 1, 2022
31919b3
Switch to using global styles to store the custom css
glendaviesnz Dec 1, 2022
f13667c
Fix useMemo dependencies
Mamaduka Dec 2, 2022
23792ef
The 'css' value should be string
Mamaduka Dec 2, 2022
28fc3b0
Add custom css to editor settings
glendaviesnz Dec 12, 2022
607b48e
Refactor globals css in site editor now custom css in editor settings
glendaviesnz Dec 4, 2022
2304cd3
Add test for customCSS in get_stylesheet
glendaviesnz Dec 4, 2022
f562190
update rest endpoints
glendaviesnz Dec 8, 2022
76e3a78
Fix linting issues
glendaviesnz Dec 6, 2022
08846c0
Fix file naming issue
glendaviesnz Dec 6, 2022
4cc2a0e
Fix issue with not being able to remove existing custom css
glendaviesnz Dec 7, 2022
c5f05d7
Fix casing of php function param
glendaviesnz Dec 7, 2022
a6a67ad
make input font monospace
glendaviesnz Dec 7, 2022
035ce94
Move the custom css to its own stylesheet so invalid styles don't bre…
glendaviesnz Dec 7, 2022
472b828
Add custom css to its own stylesheet instead of combining with other …
glendaviesnz Dec 7, 2022
e8a5bf9
Update the option wording
glendaviesnz Dec 7, 2022
83244a5
use the merged config for custom css so theme.json settings picked up
glendaviesnz Dec 8, 2022
3041744
Use sass var for mono font
glendaviesnz Dec 8, 2022
4794a7c
remove some irrelevant nesting
glendaviesnz Dec 8, 2022
01a7bb4
Update label wording
glendaviesnz Dec 8, 2022
feeea4f
Always return settings
Mamaduka Dec 8, 2022
c933a60
Remove mobile block as probably not needed
glendaviesnz Dec 8, 2022
a1004ba
Port the prepare_items_for_response method in order to pick up new th…
glendaviesnz Dec 8, 2022
414c928
make prepare_item_for_response same as core to make backporting easier
glendaviesnz Dec 8, 2022
abdf4a9
Make sure the get_user_data call is always called at least once by th…
glendaviesnz Dec 12, 2022
43b29dd
Fix test and linting issues
glendaviesnz Dec 12, 2022
d716585
Use instanceof instead of is_a
glendaviesnz Dec 12, 2022
1df72bf
Add theme.json custom css to input box
glendaviesnz Dec 12, 2022
47a6d91
Add explanatory comments
glendaviesnz Dec 13, 2022
b55429d
Changes from code review
glendaviesnz Dec 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add explanatory comments
  • Loading branch information
@glendaviesnz
glendaviesnz committed Dec 13, 2022
commit 47a6d915f8553a45d9d2702e0d372e883ac3151e
5 changes: 5 additions & 0 deletions packages/edit-site/src/components/global-styles/custom-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ function CustomCSSControl() {
const [ themeCSS ] = useStyle( 'css', null, 'base' );
const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
Copy link
Contributor

@youknowriad youknowriad Apr 7, 2023

Choose a reason for hiding this comment

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

Hi there! I was trying to refactor this control to be like all the other "style" UI components and stumbled upon this specific behavior for custom CSS, where it seems that we need to be aware of "base" styles and have some custom behavior tied to it. Can you explain it a bit further and also why it has to be this way, why don't we treat the "css" theme.json property like any other property?

Copy link
Contributor Author

@glendaviesnz glendaviesnz Apr 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Some initial testing showed that it was confusing that any theme.json custom CSS was overridden completely by any custom CSS added as initially it took the same approach as other global styles in that user styles override the theme.json settings. For example, the theme.json CSS might set a heading font color, and the user may add a paragraph font family which will wipe the heading font color.

So a decision was made to include the theme.json CSS in the global styles input box to allow the user to make a conscious choice about which ones to keep.

Copy link
Contributor

@youknowriad youknowriad Apr 11, 2023

Choose a reason for hiding this comment

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

Some initial testing showed that it was confusing that any theme.json custom CSS was overridden completely by any custom CSS added as initially it took the same approach as other global styles in that user styles override the theme.json settings. For example, the theme.json CSS might set a heading font color, and the user may add a paragraph font family which will wipe the heading font color.

For me this is only confusing, if the CSS is not shown initially in the box.

Copy link
Contributor

@youknowriad youknowriad Apr 11, 2023

Choose a reason for hiding this comment

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

So a decision was made to include the theme.json CSS in the global styles input box to allow the user to make a conscious choice about which ones to keep.

Re-reading this, it seems like you're saying that we're already showing the theme.json CSS in the box, which is what I would expect as well, but I guess the different maybe when we edit that CSS.

For me, after editing, we should only show the edited CSS (which may or may not contain some parts of the original theme.json CSS).

Copy link
Contributor Author

@glendaviesnz glendaviesnz Apr 11, 2023

Choose a reason for hiding this comment

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

For me, after editing, we should only show the edited CSS (which may or may not contain some parts of the original theme.json CSS)

Sorry for the confusion. This is correct, this is what happens, after editing only the edited CSS shows in the input, and the original CSS from the theme.json shows above the input in case the user wants to reinstate it:

custom-css.mp4


// If there is custom css from theme.json show it in the edit box
// so the user can selectively overwrite it, rather than have the user CSS
// completely overwrite the theme CSS by default.
const themeCustomCSS =
! customCSS && themeCSS
? `/* ${ __(
Expand All @@ -22,6 +25,8 @@ function CustomCSSControl() {
: undefined;

function handleOnChange( value ) {
// If there is theme custom CSS, but the user clears the input box then save the
// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
if ( themeCSS && value === '' ) {
setCustomCSS( ignoreThemeCustomCSS );
return;
Expand Down