beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Add support for improved latest-posts block for Gutenberg 6.3

Browse source 
- Also improves utility classes for text colors on has-background and nested blocks
This commit is contained in:
Allan Cole 2019-08-21 18:44:50 -04:00
parent ee3bd0854d
commit dc71577cdb
7 changed files with 139 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
varia/sass/blocks/latest-posts/_editor.scss
View file

@ -1,3 +1,42 @@
.wp-block-latest-posts {
padding-left: 0;
}
& > li > a {
font-family: #{map-deep-get($config-heading, "font", "family")};
font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
font-weight: #{map-deep-get($config-heading, "font", "weight")};
line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};
}
&:not(.is-grid) > li {
/* Vertical margins logic */
margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.wp-block-latest-posts__post-date {
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
[class*="inner-container"] &,
.has-background & {
color: currentColor;
}
}
.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
margin: 0;
}
}

13
varia/sass/blocks/latest-posts/_style.scss
View file

@ -26,11 +26,22 @@
color: #{map-deep-get($config-global, "color", "foreground", "light")};
font-size: #{map-deep-get($config-global, "font", "size", "xs")};
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
.entry-content [class*="inner-container"] &,
.entry-content .has-background & {
color: currentColor;
}
}
.wp-block-latest-posts__post-excerpt {
.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
margin: 0;
}
&.alignfull {
padding-left: #{map-deep-get($config-global, "spacing", "unit")};
padding-right: #{map-deep-get($config-global, "spacing", "unit")};
}
}

47
varia/sass/blocks/utilities/_editor.scss
View file

@ -48,86 +48,51 @@
}
// Gutenberg background-color options
.has-background {}
.has-background {
p, a, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-primary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-secondary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-foreground-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-foreground-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-foreground-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-background-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-background-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
.has-background-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6,
.wp-block-quote__citation {
color: currentColor;
}
}
// Gutenberg Font-size utility classes

30
varia/sass/blocks/utilities/_style.scss
View file

@ -120,70 +120,50 @@
}
// Gutenberg background-color options
.has-background {}
.has-background {
p, a, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-primary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-secondary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-foreground-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-foreground-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-foreground-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
// Gutenberg Font-size options

84
varia/style-editor.css
View file

@ -386,6 +386,45 @@ object {
padding-left: 0;
}
.wp-block-latest-posts > li > a {
font-family: sans-serif;
font-size: 1.728rem;
font-weight: bold;
line-height: 1.125;
}
.wp-block-latest-posts:not(.is-grid) > li {
/* Vertical margins logic */
margin-top: 32px;
margin-bottom: 32px;
}
.wp-block-latest-posts:not(.is-grid) > li:first-child {
margin-top: 0;
}
.wp-block-latest-posts:not(.is-grid) > li:last-child {
margin-bottom: 0;
}
.wp-block-latest-posts .wp-block-latest-posts__post-date {
color: #767676;
font-size: 0.83333rem;
line-height: 1.78;
}
[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
color: currentColor;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-size: 0.83333rem;
line-height: 1.78;
margin: 0;
}
.wp-block-media-text .block-editor-inner-blocks {
padding-right: 16px;
padding-left: 16px;
@ -594,86 +633,51 @@ table th,
color: white !important;
}
.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
.has-background .wp-block-quote__citation {
color: currentColor;
}
.has-primary-background-color[class] {
background-color: blue !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
.has-primary-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: red !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
.has-secondary-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #444444 !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
.has-foreground-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
.has-foreground-light-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
.has-foreground-dark-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
.has-background-light-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
.has-background-dark-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
.has-background-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333em;

49
varia/style-rtl.css
View file

@ -1490,12 +1490,23 @@ img {
line-height: 1.78;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
color: currentColor;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-size: 0.83333rem;
line-height: 1.78;
margin: 0;
}
.wp-block-latest-posts.alignfull {
padding-right: 16px;
padding-left: 16px;
}
.gallery-item {
display: inline-block;
text-align: center;
@ -2008,78 +2019,50 @@ table th,
color: white !important;
}
.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
color: currentColor;
}
.has-primary-background-color[class] {
background-color: blue !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: red !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #444444 !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333rem;

49
varia/style.css
View file

@ -1490,12 +1490,23 @@ img {
line-height: 1.78;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
color: currentColor;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-size: 0.83333rem;
line-height: 1.78;
margin: 0;
}
.wp-block-latest-posts.alignfull {
padding-left: 16px;
padding-right: 16px;
}
.gallery-item {
display: inline-block;
text-align: center;
@ -2014,78 +2025,50 @@ table th,
color: white !important;
}
.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
color: currentColor;
}
.has-primary-background-color[class] {
background-color: blue !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: red !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #444444 !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333rem;