From 30c7257aad69bd85e467b83bae0cc19ff8e9fee3 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Wed, 2 Jan 2019 03:53:53 +0000 Subject: [PATCH] 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 | 13 +++++++---- .../themes/twentyeleven/editor-blocks.css | 18 +++++++++++---- .../themes/twentyfifteen/css/blocks.css | 18 ++++++++++++--- .../twentyfifteen/css/editor-blocks.css | 13 +++++++---- .../themes/twentyfourteen/css/blocks.css | 11 +++++---- .../twentyfourteen/css/editor-blocks.css | 13 +++++++---- .../twentyseventeen/assets/css/blocks.css | 2 -- .../assets/css/editor-blocks.css | 2 -- .../themes/twentysixteen/css/blocks.css | 19 +++++++++++---- .../twentysixteen/css/editor-blocks.css | 15 ++++++++---- .../themes/twentythirteen/css/blocks.css | 23 ++++++++++++++----- .../twentythirteen/css/editor-blocks.css | 19 +++++++++------ wp-content/themes/twentytwelve/css/blocks.css | 9 ++++++-- .../themes/twentytwelve/css/editor-blocks.css | 11 +++++---- wp-includes/version.php | 2 +- 15 files changed, 131 insertions(+), 57 deletions(-) diff --git a/wp-content/themes/twentyeleven/blocks.css b/wp-content/themes/twentyeleven/blocks.css index e29ddf9ca5..ee0f5ad6ad 100644 --- a/wp-content/themes/twentyeleven/blocks.css +++ b/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; } diff --git a/wp-content/themes/twentyeleven/editor-blocks.css b/wp-content/themes/twentyeleven/editor-blocks.css index b9dd850704..d32df04ba6 100644 --- a/wp-content/themes/twentyeleven/editor-blocks.css +++ b/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 { diff --git a/wp-content/themes/twentyfifteen/css/blocks.css b/wp-content/themes/twentyfifteen/css/blocks.css index 82563902c2..fa9d935aaa 100644 --- a/wp-content/themes/twentyfifteen/css/blocks.css +++ b/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; diff --git a/wp-content/themes/twentyfifteen/css/editor-blocks.css b/wp-content/themes/twentyfifteen/css/editor-blocks.css index 6076cab6bf..5b1e90c947 100644 --- a/wp-content/themes/twentyfifteen/css/editor-blocks.css +++ b/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; diff --git a/wp-content/themes/twentyfourteen/css/blocks.css b/wp-content/themes/twentyfourteen/css/blocks.css index b696ecb241..e0f0e231e7 100644 --- a/wp-content/themes/twentyfourteen/css/blocks.css +++ b/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; } diff --git a/wp-content/themes/twentyfourteen/css/editor-blocks.css b/wp-content/themes/twentyfourteen/css/editor-blocks.css index e8fba39546..079896cbfc 100644 --- a/wp-content/themes/twentyfourteen/css/editor-blocks.css +++ b/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; } diff --git a/wp-content/themes/twentyseventeen/assets/css/blocks.css b/wp-content/themes/twentyseventeen/assets/css/blocks.css index d85a17483e..26a11327a9 100644 --- a/wp-content/themes/twentyseventeen/assets/css/blocks.css +++ b/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; diff --git a/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css b/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css index 97e4d9a046..849719009a 100644 --- a/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css +++ b/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; diff --git a/wp-content/themes/twentysixteen/css/blocks.css b/wp-content/themes/twentysixteen/css/blocks.css index ae7422416e..9ddea8073f 100644 --- a/wp-content/themes/twentysixteen/css/blocks.css +++ b/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; - border-radius: 2px; + box-shadow: none; 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; } diff --git a/wp-content/themes/twentysixteen/css/editor-blocks.css b/wp-content/themes/twentysixteen/css/editor-blocks.css index 802353bfe7..4bf8cbf54f 100644 --- a/wp-content/themes/twentysixteen/css/editor-blocks.css +++ b/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 { diff --git a/wp-content/themes/twentythirteen/css/blocks.css b/wp-content/themes/twentythirteen/css/blocks.css index bae2a185e2..e6c07e2ee8 100644 --- a/wp-content/themes/twentythirteen/css/blocks.css +++ b/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 */ } diff --git a/wp-content/themes/twentythirteen/css/editor-blocks.css b/wp-content/themes/twentythirteen/css/editor-blocks.css index d536ed4986..c88cb4dba7 100644 --- a/wp-content/themes/twentythirteen/css/editor-blocks.css +++ b/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 */ } diff --git a/wp-content/themes/twentytwelve/css/blocks.css b/wp-content/themes/twentytwelve/css/blocks.css index a03cef640c..5a645daf80 100644 --- a/wp-content/themes/twentytwelve/css/blocks.css +++ b/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); diff --git a/wp-content/themes/twentytwelve/css/editor-blocks.css b/wp-content/themes/twentytwelve/css/editor-blocks.css index 99be72d4d5..bd5313b468 100644 --- a/wp-content/themes/twentytwelve/css/editor-blocks.css +++ b/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-button .wp-block-file__button:hover { +.wp-block-file .wp-block-file__button { 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); diff --git a/wp-includes/version.php b/wp-includes/version.php index 9cad84c28e..97e64f2da5 100644 --- a/wp-includes/version.php +++ b/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.