Bundled Themes: Make sure button blocks respect settings.

When the original block editor styles were added to the existing default themes, the button blocks were styled to match how each theme styled the `button` tag. 

However, the styles should respect the block editor's default style, "Rounded", and allow switching to the other styles, like "Outlined" and "Square".

Props laurelfulford.
Merges [44381] to the 5.0 branch.
Fixes #45541.
Built from https://develop.svn.wordpress.org/branches/5.0@44430


git-svn-id: http://core.svn.wordpress.org/branches/5.0@44260 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2019-01-07 16:18:45 +00:00
parent 8735b64a56
commit 8e5a620bb3
15 changed files with 131 additions and 57 deletions

View File

@ -232,9 +232,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: none;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
@ -242,10 +239,18 @@ p.has-drop-cap:not(:focus)::first-letter {
font-size: 15px; font-size: 15px;
margin: 20px 0; margin: 20px 0;
padding: 5px 22px; padding: 5px 22px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
} }
.wp-block-button__link { .is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #222;
text-shadow: none;
}
.wp-block-button__link,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .is-style-outline .wp-block-button__link:hover {
background: #222; background: #222;
color: #eee; color: #eee;
} }

View File

@ -371,14 +371,9 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
background: #222;
border: none;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
color: #eee;
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
line-height: 24px; line-height: 24px;
@ -387,6 +382,19 @@ p.has-drop-cap:not(:focus)::first-letter {
text-shadow: 0 -1px 0 rgba(0,0,0,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
} }
.wp-block-button__link {
background: #222;
color: #eee;
}
.is-style-outline .wp-block-button__link {
color: #222;
}
.wp-block-button__link.has-text-color {
text-shadow: none;
}
/* Media & Text */ /* Media & Text */
.wp-block-media-text *:last-child { .wp-block-media-text *:last-child {

View File

@ -384,8 +384,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Button */ /* Button */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: 0;
border-radius: 0;
cursor: pointer; cursor: pointer;
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", sans-serif;
font-size: 12px; font-size: 12px;
@ -397,13 +395,27 @@ p.has-drop-cap:not(:focus)::first-letter {
vertical-align: baseline; vertical-align: baseline;
} }
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link {
border: 0;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
border-bottom: 2px solid;
}
.wp-block-button__link { .wp-block-button__link {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
} }
.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #333;
}
.wp-block-button__link:hover, .wp-block-button__link:hover,
.wp-block-button__link:focus { .wp-block-button__link:focus,
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
background-color: #707070; background-color: #707070;
background-color: rgba(51, 51, 51, 0.7); background-color: rgba(51, 51, 51, 0.7);
color: #fff; color: #fff;

View File

@ -708,10 +708,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Button */ /* Button */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
background-color: #333;
border: 0;
border-radius: 0;
color: #fff;
cursor: pointer; cursor: pointer;
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", sans-serif;
font-size: 12px; font-size: 12px;
@ -722,6 +718,15 @@ p.has-drop-cap:not(:focus)::first-letter {
vertical-align: baseline; vertical-align: baseline;
} }
.wp-block-button__link {
background-color: #333;
color: #fff;
}
.is-style-outline .wp-block-button__link {
color: #333;
}
@media screen and (min-width: 46.25em) { @media screen and (min-width: 46.25em) {
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
font-size: 14px; font-size: 14px;

View File

@ -139,7 +139,6 @@ p.has-drop-cap:not(:focus)::first-letter {
.wp-block-file .wp-block-file__button { .wp-block-file .wp-block-file__button {
background-color: #24890d; background-color: #24890d;
border: 0; border: 0;
border-radius: 2px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
@ -221,8 +220,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: 0;
border-radius: 2px;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
line-height: 15px; line-height: 15px;
@ -237,8 +234,14 @@ p.has-drop-cap:not(:focus)::first-letter {
color: #fff; color: #fff;
} }
.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #24890d;
}
.wp-block-button__link:hover, .wp-block-button__link:hover,
.wp-block-button__link:focus { .wp-block-button__link:focus,
.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.is-style-outline .wp-block-button__link:not(.has-text-color):focus {
background-color: #41a62a; background-color: #41a62a;
color: #fff; color: #fff;
} }

View File

@ -389,10 +389,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
background-color: #24890d;
border: 0;
border-radius: 2px;
color: #fff;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
padding: 10px 30px 11px; padding: 10px 30px 11px;
@ -400,6 +396,15 @@ p.has-drop-cap:not(:focus)::first-letter {
vertical-align: bottom; vertical-align: bottom;
} }
.wp-block-button__link {
background-color: #24890d;
color: #fff;
}
.is-style-outline .wp-block-button__link {
color: #24890d;
}
.editor-block-list__block .wp-block-button .mce-content-body { .editor-block-list__block .wp-block-button .mce-content-body {
line-height: normal; line-height: normal;
} }

View File

@ -189,8 +189,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
display: inline-block; display: inline-block;

View File

@ -711,8 +711,6 @@ table.wp-block-table td:last-child {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
display: inline-block; display: inline-block;

View File

@ -232,13 +232,12 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: 0; box-shadow: none;
border-radius: 2px;
font-family: Montserrat, "Helvetica Neue", sans-serif; font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700; font-weight: 700;
letter-spacing: 0.046875em; letter-spacing: 0.046875em;
line-height: 1; line-height: 1;
padding: 0.84375em 0.875em 0.78125em; padding: 0.84375em 1.3125em 0.78125em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -247,8 +246,20 @@ p.has-drop-cap:not(:focus)::first-letter {
color: #fff; color: #fff;
} }
.entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #1a1a1a;
}
.entry-content .wp-block-button__link:hover, .entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus { .entry-content .wp-block-button__link:focus,
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus,
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
background: #007acc; background: #007acc;
color: #fff; color: #fff;
} }

View File

@ -543,18 +543,23 @@ Description: Used to style blocks in the editor.
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
background: #1a1a1a;
border: 0;
border-radius: 2px;
color: #fff;
font-family: Montserrat, "Helvetica Neue", sans-serif; font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700; font-weight: 700;
letter-spacing: 0.046875em; letter-spacing: 0.046875em;
line-height: 1; line-height: 1;
padding: 0.84375em 0.875em 0.78125em; padding: 0.84375em 1.3125em 0.78125em;
text-transform: uppercase; text-transform: uppercase;
} }
.wp-block-button__link {
background: #1a1a1a;
color: #fff;
}
.is-style-outline .wp-block-button__link {
color: #1a1a1a;
}
/* Media & Text */ /* Media & Text */
.wp-block-media-text *:last-child { .wp-block-media-text *:last-child {

View File

@ -201,8 +201,8 @@ p.has-drop-cap:not(:focus)::first-letter {
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
border: none; border: none;
border-bottom: 3px solid #b93207;
border-radius: 2px; border-radius: 2px;
border-bottom: 3px solid #b93207;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
@ -336,9 +336,7 @@ body:not(.sidebar) .wp-block-table.alignfull {
} }
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: none;
border-bottom: 3px solid #b93207; border-bottom: 3px solid #b93207;
border-radius: 2px;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
padding: 11px 24px 10px; padding: 11px 24px 10px;
@ -350,19 +348,32 @@ body:not(.sidebar) .wp-block-table.alignfull {
color: #fff; color: #fff;
} }
.entry-content .wp-block-button__link:not(.has-background) { .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
} }
.entry-content .wp-block-button__link:hover, .entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus { .entry-content .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus {
background: #ed6a31; background: #ed6a31;
color: #fff; color: #fff;
} }
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: inherit;
border-color: inherit;
border-width: 2px;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
color: #ed6a31;
}
.entry-content .wp-block-button__link:not(.has-background):hover, .entry-content .wp-block-button__link:not(.has-background):hover,
.entry-content .wp-block-button__link:not(.has-background):hover { .entry-content .wp-block-button__link:not(.has-background):hover,
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
} }

View File

@ -257,7 +257,6 @@ p.has-drop-cap:not(:focus)::first-letter {
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
border: none; border: none;
border-bottom: 3px solid #b93207; border-bottom: 3px solid #b93207;
border-radius: 2px;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
@ -326,11 +325,6 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Buttons */ /* Buttons */
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
background: #e05d22;
border: none;
border-bottom: 3px solid #b93207;
border-radius: 2px;
color: #fff;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -338,7 +332,18 @@ p.has-drop-cap:not(:focus)::first-letter {
text-decoration: none; text-decoration: none;
} }
.wp-block-button__link:not(.has-background) { .wp-block-button__link {
background: #e05d22;
border-bottom: 3px solid #b93207;
color: #fff;
}
.is-style-outline .wp-block-button__link {
border-width: 2px;
color: #e05d22;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
} }

View File

@ -246,7 +246,6 @@ pre.wp-block-code {
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: 1px solid #d2d2d2; border: 1px solid #d2d2d2;
border-radius: 3px;
font-family: inherit; font-family: inherit;
font-size: 11px; font-size: 11px;
font-size: 0.785714286rem; font-size: 0.785714286rem;
@ -262,6 +261,12 @@ pre.wp-block-code {
color: #7c7c7c; color: #7c7c7c;
} }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:visited {
background-color: inherit;
border-color: inherit;
}
.entry-content .wp-block-button__link:hover, .entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:visited:hover, .entry-content .wp-block-button__link:visited:hover,
.entry-content .wp-block-button__link:focus { .entry-content .wp-block-button__link:focus {
@ -274,7 +279,7 @@ pre.wp-block-code {
color: #757575; color: #757575;
} }
.wp-block-button__link:not(.has-background) { .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);

View File

@ -234,8 +234,7 @@ p.has-drop-cap:not(:focus)::first-letter {
text-decoration: underline; text-decoration: underline;
} }
.wp-block-file .wp-block-file__button, .wp-block-file .wp-block-file__button {
.wp-block-button .wp-block-file__button:hover {
background-color: #e6e6e6; background-color: #e6e6e6;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
@ -342,7 +341,6 @@ p.has-drop-cap:not(:focus)::first-letter {
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link {
border: 1px solid #d2d2d2; border: 1px solid #d2d2d2;
border-radius: 3px;
font-family: inherit; font-family: inherit;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
@ -358,7 +356,12 @@ p.has-drop-cap:not(:focus)::first-letter {
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1); box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
} }
.wp-block-button .wp-block-button__link:not(.has-background) { .wp-block-button.is-style-outline .wp-block-button__link {
background-color: inherit;
border-color: inherit;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.0.3-alpha-44429'; $wp_version = '5.0.3-alpha-44430';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.