Varia: Make sure elements inside cover block is always visible

This commit is contained in:
Takashi Irie 2019-09-26 19:46:40 +01:00
parent 31b1f6acf2
commit 04536c0e3b
5 changed files with 57 additions and 6 deletions

View file

@ -9,13 +9,23 @@
.wp-block-cover-image-text,
.wp-block-cover-text,
.block-editor-block-list__block {
color: #{map-deep-get($config-cover, "color", "foreground")};
color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
a {
color: currentColor;
}
}
/* default & custom background-color */
&:not([class*='background-color']){
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text,
.block-editor-block-list__block {
color: #{map-deep-get($config-cover, "color", "foreground")};
}
}
/* Treating H2 separately to account for legacy /core styles */
h2 {
font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h2")) + 0em);

View file

@ -8,7 +8,7 @@
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text {
color: #{map-deep-get($config-cover, "color", "foreground")};
color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
@ -17,6 +17,15 @@
}
}
/* default & custom background-color */
&:not([class*='background-color']){
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text {
color: #{map-deep-get($config-cover, "color", "foreground")};
}
}
/* Treating H2 separately to account for legacy /core styles */
h2 {
font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
@ -41,7 +50,7 @@
.wp-block-cover__inner-container {
width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") };
width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") });
& > * {
margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

View file

@ -287,6 +287,7 @@ object {
background-color: black;
color: white;
min-height: 480px;
/* default & custom background-color */
/* Treating H2 separately to account for legacy /core styles */
}
@ -298,7 +299,7 @@ object {
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text,
.wp-block-cover-image .block-editor-block-list__block {
color: white;
color: currentColor;
}
.wp-block-cover .wp-block-cover__inner-container a,
@ -312,6 +313,17 @@ object {
color: currentColor;
}
.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
.wp-block-cover:not([class*='background-color']) .block-editor-block-list__block,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text,
.wp-block-cover-image:not([class*='background-color']) .block-editor-block-list__block {
color: white;
}
.wp-block-cover h2,
.wp-block-cover-image h2 {
font-size: 2.48832em;

View file

@ -1189,6 +1189,7 @@ input.has-focus[type="submit"],
background-color: black;
min-height: 480px;
margin: inherit;
/* default & custom background-color */
/* Treating H2 separately to account for legacy /core styles */
/**
* Block Options
@ -1201,7 +1202,7 @@ input.has-focus[type="submit"],
.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text {
color: white;
color: currentColor;
margin-top: 32px;
margin-bottom: 32px;
}
@ -1215,6 +1216,15 @@ input.has-focus[type="submit"],
color: currentColor;
}
.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text {
color: white;
}
.wp-block-cover h2,
.wp-block-cover-image h2 {
font-size: 2.48832rem;

View file

@ -1189,6 +1189,7 @@ input.has-focus[type="submit"],
background-color: black;
min-height: 480px;
margin: inherit;
/* default & custom background-color */
/* Treating H2 separately to account for legacy /core styles */
/**
* Block Options
@ -1201,7 +1202,7 @@ input.has-focus[type="submit"],
.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text {
color: white;
color: currentColor;
margin-top: 32px;
margin-bottom: 32px;
}
@ -1215,6 +1216,15 @@ input.has-focus[type="submit"],
color: currentColor;
}
.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text {
color: white;
}
.wp-block-cover h2,
.wp-block-cover-image h2 {
font-size: 2.48832rem;