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".

Fixes #45541.


Built from https://develop.svn.wordpress.org/trunk@44381


git-svn-id: http://core.svn.wordpress.org/trunk@44211 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyeleven/blocks.css

@@ -232,9 +232,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .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);
 	-moz-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;
 	margin: 20px 0;
 	padding: 5px 22px;
+	text-decoration: none;
 	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;
 	color: #eee;
 }

wp-content/themes/twentyeleven/editor-blocks.css

@@ -371,14 +371,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .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);
 	-moz-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;
 	font-size: 15px;
 	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);
 }
 
+.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 */
 
 .wp-block-media-text *:last-child {

wp-content/themes/twentyfifteen/css/blocks.css

@@ -384,8 +384,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Button */
 
 .wp-block-button .wp-block-button__link {
-	border: 0;
-	border-radius: 0;
 	cursor: pointer;
 	font-family: "Noto Sans", sans-serif;
 	font-size: 12px;
@@ -397,13 +395,27 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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 {
 	background-color: #333;
 	color: #fff;
 }
 
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: #333;
+}
+
 .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: rgba(51, 51, 51, 0.7);
 	color: #fff;

wp-content/themes/twentyfifteen/css/editor-blocks.css

@@ -708,10 +708,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Button */
 
 .wp-block-button .wp-block-button__link {
-	background-color: #333;
-	border: 0;
-	border-radius: 0;
-	color: #fff;
 	cursor: pointer;
 	font-family: "Noto Sans", sans-serif;
 	font-size: 12px;
@@ -722,6 +718,15 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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) {
 	.wp-block-button .wp-block-button__link {
 		font-size: 14px;

wp-content/themes/twentyfourteen/css/blocks.css

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

wp-content/themes/twentyfourteen/css/editor-blocks.css

@@ -389,10 +389,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	background-color: #24890d;
-	border: 0;
-	border-radius: 2px;
-	color: #fff;
 	font-size: 12px;
 	font-weight: 700;
 	padding: 10px 30px 11px;
@@ -400,6 +396,15 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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 {
 	line-height: normal;
 }

wp-content/themes/twentyseventeen/assets/css/blocks.css

@@ -188,8 +188,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-button .wp-block-button__link {
 	background-color: #222;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
 	-webkit-box-shadow: none;
 	box-shadow: none;
 	color: #fff;

wp-content/themes/twentyseventeen/assets/css/editor-blocks.css

@@ -708,8 +708,6 @@ table.wp-block-table td:last-child {
 
 .wp-block-button .wp-block-button__link {
 	background-color: #222;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
 	-webkit-box-shadow: none;
 	box-shadow: none;
 	color: #fff;

wp-content/themes/twentysixteen/css/blocks.css

@@ -232,13 +232,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border: 0;
+	box-shadow: none;
-	border-radius: 2px;
 	font-family: Montserrat, "Helvetica Neue", sans-serif;
 	font-weight: 700;
 	letter-spacing: 0.046875em;
 	line-height: 1;
-	padding: 0.84375em 0.875em 0.78125em;
+	padding: 0.84375em 1.3125em 0.78125em;
 	text-transform: uppercase;
 }
 
@@ -247,8 +246,20 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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: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;
 	color: #fff;
 }

wp-content/themes/twentysixteen/css/editor-blocks.css

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

wp-content/themes/twentythirteen/css/blocks.css

@@ -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:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 	border: none;
-	border-bottom: 3px solid #b93207;
 	border-radius: 2px;
+	border-bottom: 3px solid #b93207;
 	color: #fff;
 	display: inline-block;
 	font-size: 16px;
@@ -336,9 +336,7 @@ body:not(.sidebar) .wp-block-table.alignfull {
 }
 
 .wp-block-button .wp-block-button__link {
-	border: none;
 	border-bottom: 3px solid #b93207;
-	border-radius: 2px;
 	display: inline-block;
 	font-size: 16px;
 	padding: 11px 24px 10px;
@@ -350,19 +348,32 @@ body:not(.sidebar) .wp-block-table.alignfull {
 	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:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 }
 
 .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;
 	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: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: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
 }

wp-content/themes/twentythirteen/css/editor-blocks.css

@@ -257,7 +257,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 	background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 	border: none;
 	border-bottom: 3px solid #b93207;
-	border-radius: 2px;
 	color: #fff;
 	display: inline-block;
 	font-size: 16px;
@@ -326,11 +325,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	background: #e05d22;
-	border: none;
-	border-bottom: 3px solid #b93207;
-	border-radius: 2px;
-	color: #fff;
 	display: inline-block;
 	font-size: 16px;
 	line-height: 24px;
@@ -338,7 +332,18 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 }

wp-content/themes/twentytwelve/css/blocks.css

@@ -246,7 +246,6 @@ pre.wp-block-code {
 
 .wp-block-button .wp-block-button__link {
 	border: 1px solid #d2d2d2;
-	border-radius: 3px;
 	font-family: inherit;
 	font-size: 11px;
 	font-size: 0.785714286rem;
@@ -262,6 +261,12 @@ pre.wp-block-code {
 	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:visited:hover,
 .entry-content .wp-block-button__link:focus {
@@ -274,7 +279,7 @@ pre.wp-block-code {
 	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-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
 	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);

wp-content/themes/twentytwelve/css/editor-blocks.css

@@ -234,8 +234,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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-repeat: repeat-x;
 	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 {
 	border: 1px solid #d2d2d2;
-	border-radius: 3px;
 	font-family: inherit;
 	font-size: 11px;
 	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);
 }
 
-.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: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.1-alpha-44380';
+$wp_version = '5.1-alpha-44381';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.