- Timestamp:
- 11/06/2023 02:41:11 PM (11 months ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-content/themes/twentytwentyfour/functions.php
r57036 r57067 21 21 */ 22 22 function twentytwentyfour_block_styles() { 23 24 register_block_style( 25 'core/details', 26 array( 27 'name' => 'arrow-icon-details', 28 'label' => __( 'Arrow icon', 'twentytwentyfour' ), 29 /* 30 * Styles for the custom Arrow icon style of the Details block 31 */ 32 'inline_style' => ' 33 .is-style-arrow-icon-details { 34 padding-top: var(--wp--preset--spacing--10); 35 padding-bottom: var(--wp--preset--spacing--10); 36 } 37 38 .is-style-arrow-icon-details summary { 39 list-style-type: "\2193\00a0\00a0\00a0"; 40 } 41 42 .is-style-arrow-icon-details[open]>summary { 43 list-style-type: "\2192\00a0\00a0\00a0"; 44 }', 45 ) 46 ); 47 register_block_style( 48 'core/post-terms', 49 array( 50 'name' => 'pill', 51 'label' => __( 'Pill', 'twentytwentyfour' ), 52 /* 53 * Styles variation for post terms 54 * https://github.com/WordPress/gutenberg/issues/24956 55 */ 56 'inline_style' => ' 57 .is-style-pill a, 58 .is-style-pill span:not([class], [data-rich-text-placeholder]) { 59 display: inline-block; 60 background-color: var(--wp--preset--color--base-2); 61 padding: 0.375rem 0.875rem; 62 border-radius: var(--wp--preset--spacing--20); 63 } 64 65 .is-style-pill a:hover { 66 background-color: var(--wp--preset--color--contrast-3); 67 }', 68 ) 69 ); 70 register_block_style( 71 'core/list', 72 array( 73 'name' => 'checkmark-list', 74 'label' => __( 'Checkmark', 'twentytwentyfour' ), 75 /* 76 * Styles for the custom checkmark list block style 77 * https://github.com/WordPress/gutenberg/issues/51480 78 */ 79 'inline_style' => ' 80 ul.is-style-checkmark-list { 81 list-style-type: "\2713"; 82 } 83 84 ul.is-style-checkmark-list li { 85 padding-inline-start: 1ch; 86 }', 87 ) 88 ); 89 register_block_style( 90 'core/navigation-link', 91 array( 92 'name' => 'arrow-link', 93 'label' => __( 'With arrow', 'twentytwentyfour' ), 94 /* 95 * Styles for the custom arrow nav link block style 96 */ 97 'inline_style' => ' 98 .is-style-arrow-link .wp-block-navigation-item__label:after { 99 content: "\2197"; 100 padding-inline-start: 0.25rem; 101 vertical-align: middle; 102 text-decoration: none; 103 display: inline-block; 104 }', 105 ) 106 ); 107 register_block_style( 108 'core/heading', 109 array( 110 'name' => 'asterisk', 111 'label' => __( 'With asterisk', 'twentytwentyfour' ), 112 'inline_style' => " 113 .is-style-asterisk:before { 114 content: ''; 115 width: 1.5rem; 116 height: 3rem; 117 background: var(--wp--preset--color--contrast-2, currentColor); 118 clip-path: path('M11.93.684v8.039l5.633-5.633 1.216 1.23-5.66 5.66h8.04v1.737H13.2l5.701 5.701-1.23 1.23-5.742-5.742V21h-1.737v-8.094l-5.77 5.77-1.23-1.217 5.743-5.742H.842V9.98h8.162l-5.701-5.7 1.23-1.231 5.66 5.66V.684h1.737Z'); 119 display: block; 120 } 121 122 /* Hide the asterisk if the heading has no content, to avoid using empty headings to display the asterisk only, which is an A11Y issue */ 123 .is-style-asterisk:empty:before { 124 content: none; 125 } 126 127 .is-style-asterisk:-moz-only-whitespace:before { 128 content: none; 129 } 130 131 .is-style-asterisk.has-text-align-center:before { 132 margin: 0 auto; 133 } 134 135 .is-style-asterisk.has-text-align-right:before { 136 margin-left: auto; 137 } 138 139 .rtl .is-style-asterisk.has-text-align-left:before { 140 margin-right: auto; 141 }", 142 ) 143 ); 144 } 145 endif; 146 147 add_action( 'init', 'twentytwentyfour_block_styles' ); 148 149 /** 150 * Enqueue block stylesheets. 151 */ 152 153 if ( ! function_exists( 'twentytwentyfour_block_stylesheets' ) ) : 154 /** 155 * Enqueue custom block stylesheets 156 * 157 * @since Twenty Twenty-Four 1.0 158 * @return void 159 */ 160 function twentytwentyfour_block_stylesheets() { 23 161 /** 24 162 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet … … 38 176 ) 39 177 ); 40 41 register_block_style(42 'core/details',43 array(44 'name' => 'arrow-icon-details',45 'label' => __( 'Arrow icon', 'twentytwentyfour' ),46 /*47 * Styles for the custom Arrow icon style of the Details block48 */49 'inline_style' => '50 .is-style-arrow-icon-details {51 padding-top: var(--wp--preset--spacing--10);52 padding-bottom: var(--wp--preset--spacing--10);53 border-bottom: 1px solid var(--wp--preset--color--contrast-2, currentColor);54 }55 56 .is-style-arrow-icon-details summary {57 list-style-type: "\2193\00a0\00a0\00a0";58 }59 60 .is-style-arrow-icon-details[open]>summary {61 list-style-type: "\2192\00a0\00a0\00a0";62 }',63 )64 );65 register_block_style(66 'core/post-terms',67 array(68 'name' => 'pill',69 'label' => __( 'Pill', 'twentytwentyfour' ),70 /*71 * Styles variation for post terms72 * https://github.com/WordPress/gutenberg/issues/2495673 */74 'inline_style' => '75 .is-style-pill a,76 .is-style-pill span:not([class], [data-rich-text-placeholder]) {77 display: inline-block;78 background-color: var(--wp--preset--color--base-2);79 padding: 0.375rem 0.875rem;80 border-radius: var(--wp--preset--spacing--20);81 }82 83 .is-style-pill a:hover {84 background-color: var(--wp--preset--color--contrast-3);85 }',86 )87 );88 register_block_style(89 'core/list',90 array(91 'name' => 'checkmark-list',92 'label' => __( 'Checkmark', 'twentytwentyfour' ),93 /*94 * Styles for the custom checkmark list block style95 * https://github.com/WordPress/gutenberg/issues/5148096 */97 'inline_style' => '98 ul.is-style-checkmark-list {99 list-style-type: "\2713";100 }101 102 ul.is-style-checkmark-list li {103 padding-inline-start: 1ch;104 }',105 )106 );107 register_block_style(108 'core/navigation-link',109 array(110 'name' => 'arrow-link',111 'label' => __( 'With arrow', 'twentytwentyfour' ),112 /*113 * Styles for the custom arrow nav link block style114 */115 'inline_style' => '116 .is-style-arrow-link .wp-block-navigation-item__label:after {117 content: "\2197";118 padding-inline-start: 0.25rem;119 vertical-align: middle;120 text-decoration: none;121 display: inline-block;122 }',123 )124 );125 register_block_style(126 'core/heading',127 array(128 'name' => 'asterisk',129 'label' => __( 'With asterisk', 'twentytwentyfour' ),130 'inline_style' => "131 .is-style-asterisk:before {132 content: '';133 width: 1.5rem;134 height: 3rem;135 background: var(--wp--preset--color--contrast-2, currentColor);136 clip-path: path('M11.93.684v8.039l5.633-5.633 1.216 1.23-5.66 5.66h8.04v1.737H13.2l5.701 5.701-1.23 1.23-5.742-5.742V21h-1.737v-8.094l-5.77 5.77-1.23-1.217 5.743-5.742H.842V9.98h8.162l-5.701-5.7 1.23-1.231 5.66 5.66V.684h1.737Z');137 display: block;138 }139 140 /* Hide the asterisk if the heading has no content, to avoid using empty headings to display the asterisk only, which is an A11Y issue */141 .is-style-asterisk:empty:before {142 content: none;143 }144 145 .is-style-asterisk:-moz-only-whitespace:before {146 content: none;147 }148 149 .is-style-asterisk.has-text-align-center:before {150 margin: 0 auto;151 }152 153 .is-style-asterisk.has-text-align-right:before {154 margin-left: auto;155 }156 157 .rtl .is-style-asterisk.has-text-align-left:before {158 margin-right: auto;159 }",160 )161 );162 178 } 163 179 endif; 164 180 165 add_action( 'init', 'twentytwentyfour_block_styles ' );181 add_action( 'init', 'twentytwentyfour_block_stylesheets' ); 166 182 167 183 /**
Note: See TracChangeset
for help on using the changeset viewer.