Changeset 51110

Timestamp:

06/08/2021 08:36:36 PM (4 years ago)

Author:

ryelle

Message:

Twenty Thirteen: Add "No Shadow" style to button block.

This creates a new block style without a shadow, and fixes colors on outline buttons.

Props melchoyce, kjellr, scruffian.
Fixes #51223.

Location:

trunk/src/wp-content/themes/twentythirteen

Files:

• css/blocks.css (modified) (3 diffs)
• css/editor-blocks.css (modified) (2 diffs)
• functions.php (modified) (1 diff)

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

@@ -371 +371 @@
 .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 {
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):focus {
     background: #ed6a31;
     color: #fff;
@@ -377 +379 @@
 
 .wp-block-button.is-style-outline .wp-block-button__link {
+    border-width: 2px;
+    border-color: inherit;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
     background-color: inherit;
-    border-color: inherit;
-    border-width: 2px;
 }
 
@@ -406 +411 @@
     border-top: 3px solid #b93207;
     padding: 10px 24px 11px;
+}
+
+.entry-content .wp-block-button.is-style-no-shadow .wp-block-button__link {
+    border-bottom: none;
 }
 

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

@@ -352 +352 @@
 }
 
-.is-style-outline .wp-block-button__link {
+.is-style-outline .wp-block-button__link:not(.has-text-color) {
     border-width: 2px;
     color: #e05d22;
@@ -360 +360 @@
     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-block-button.is-style-no-shadow .wp-block-button__link {
+    border-bottom: none;
 }
 

trunk/src/wp-content/themes/twentythirteen/functions.php

@@ -836 +836 @@
     }
 endif;
+
+/**
+ * Register Custom Block Styles
+ *
+ * @since Twenty Thirteen 3.4
+ */
+if ( function_exists( 'register_block_style' ) ) {
+    function twentythirteen_register_block_styles() {
+
+        /**
+         * Register block style
+         */
+        register_block_style(
+            'core/button',
+            array(
+                'name'         => 'no-shadow',
+                'label'        => __( 'No Shadow', 'twentythirteen' ),
+                'style_handle' => 'no-shadow',
+            )
+        );
+    }
+    add_action( 'init', 'twentythirteen_register_block_styles' );
+}