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

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Merged
merged 18 commits into from
Jul 21, 2020
Merged

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
05d54fa
Add experimental-theme.json
kjellr Feb 27, 2020
ab2163e
Update color values to match experimental-theme.json
kjellr Feb 27, 2020
257ffbd
Add additional styles
kjellr Feb 28, 2020
9e957e5
Load block styles into FSE
kjellr Feb 28, 2020
9f0b942
Replace values with new CSS variables.
kjellr Feb 28, 2020
c02ee20
Remove computed variables
jffng Mar 3, 2020
e375cc6
Override h1 editor font size
jffng Mar 3, 2020
a261eec
Update experimental-theme.json.
kjellr Jun 23, 2020
523f12d
Merge branch 'master' into add/twenty-twenty-global-styles
kjellr Jun 23, 2020
a15c1b3
Make sure styles are loaded into the full-site editor.
kjellr Jun 23, 2020
ab5cdc4
Switch to using the Query Loop block in index.html
kjellr Jul 14, 2020
fe1e88e
Fix typography variables.
kjellr Jul 14, 2020
5cd00a6
Remove unnecessary styles.
kjellr Jul 14, 2020
69b03a1
Fix alignment of entry content.
kjellr Jul 14, 2020
a442c52
Tidy up editor styles.
kjellr Jul 14, 2020
cfeb4dc
Remove unused variables.
kjellr Jul 14, 2020
79ae323
Rename text color to foreground color.
kjellr Jul 21, 2020
5fce20a
Rewrite custom color styles so they work for buttons.
kjellr Jul 21, 2020
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
40 changes: 13 additions & 27 deletions twentytwenty-blocks/twentytwenty-styles/editor-style-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,48 +167,34 @@ Inter variable font. Usage:

/* CUSTOM COLORS */

:root .has-accent-color {
.editor-styles-wrapper .has-primary-color,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why do we need to target .editor-styles-wrapper? I though that enqueueing via add_editor_style was supposed to handle this for us?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ah, that's a good question. The non-blocks version of twenty twenty enqueues the editor styles using the old hook, not via add_editor_style. Since we don't do that in the block-based theme here, we should probably strip all these out of the editor stylesheet. They're not necessary anymore.

I'll leave that for a followup PR though.

.editor-styles-wrapper .wp-block-button__link.has-primary-color {
color: var(--wp--preset--color--primary);
}

:root .has-accent-background-color {
.editor-styles-wrapper .has-primary-background-color,
.editor-styles-wrapper .wp-block-button__link.has-primary-background-color {
background-color: var(--wp--preset--color--primary);
color: #fff;
}

:root .has-primary-color {
color: var(--wp--preset--color--primary);
.editor-styles-wrapper .has-foreground-color,
.editor-styles-wrapper .wp-block-button__link.has-foreground-color {
color: var(--wp--preset--color--foreground);
}

:root .has-primary-background-color {
.editor-styles-wrapper .has-foreground-background-color,
.editor-styles-wrapper .wp-block-button__link.has-foreground-background-color {
background-color: var(--wp--preset--color--foreground);
}

:root .has-secondary-color {
color: #6d6d6d;
}

:root .has-secondary-background-color {
background-color: #6d6d6d;
color: #fff;
}

:root .has-subtle-background-color {
color: #dcd7ca;
}

:root .has-subtle-background-background-color {
background-color: #dcd7ca;
color: var(--wp--preset--color--foreground);
}

:root .has-background-color {
.editor-styles-wrapper .has-background-color,
.editor-styles-wrapper .wp-block-button__link.has-background-color {
color: var(--wp--preset--color--background);
}

:root .has-background-background-color {
.editor-styles-wrapper .has-background-background-color,
.editor-styles-wrapper .wp-block-button__link.has-background-background-color {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--foreground);
}

/* GENERAL COLORS */
Expand Down