| @@ -12,10 +12,8 @@ | ||
| 12 | 12 | * |
| 13 | 13 | * @return string The search block markup. |
| 14 | 14 | */ |
| 15 | 15 | function gutenberg_render_block_core_search( $attributes ) { |
| 16 | - static $instance_id = 0; | |
| 17 | - | |
| 18 | 16 | // Older versions of the Search block defaulted the label and buttonText |
| 19 | 17 | // attributes to `__( 'Search' )` meaning that many posts contain `<!-- |
| 20 | 18 | // wp:search /-->`. Support these by defaulting an undefined label and |
| 21 | 19 | // buttonText to `__( 'Search' )`. |
| @@ -26,19 +24,22 @@ | ||
| 26 | 24 | 'buttonText' => __( 'Search' ), |
| 27 | 25 | ) |
| 28 | 26 | ); |
| 29 | 27 | |
| 30 | - $input_id = 'wp-block-search__input-' . ++$instance_id; | |
| 31 | - $classnames = gutenberg_classnames_for_block_core_search( $attributes ); | |
| 32 | - $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; | |
| 33 | - $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; | |
| 34 | - $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; | |
| 35 | - $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; | |
| 36 | - $input_markup = ''; | |
| 37 | - $button_markup = ''; | |
| 38 | - $inline_styles = gutenberg_styles_for_block_core_search( $attributes ); | |
| 39 | - $color_classes = gutenberg_get_color_classes_for_block_core_search( $attributes ); | |
| 40 | - $is_button_inside = ! empty( $attributes['buttonPosition'] ) && | |
| 28 | + $input_id = wp_unique_id( 'wp-block-search__input-' ); | |
| 29 | + $classnames = gutenberg_classnames_for_block_core_search( $attributes ); | |
| 30 | + $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; | |
| 31 | + $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; | |
| 32 | + $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; | |
| 33 | + $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; | |
| 34 | + $query_params = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array(); | |
| 35 | + $input_markup = ''; | |
| 36 | + $button_markup = ''; | |
| 37 | + $query_params_markup = ''; | |
| 38 | + $inline_styles = gutenberg_styles_for_block_core_search( $attributes ); | |
| 39 | + $color_classes = gutenberg_get_color_classes_for_block_core_search( $attributes ); | |
| 40 | + $typography_classes = gutenberg_get_typography_classes_for_block_core_search( $attributes ); | |
| 41 | + $is_button_inside = ! empty( $attributes['buttonPosition'] ) && | |
| 41 | 42 | 'button-inside' === $attributes['buttonPosition']; |
| 42 | 43 | // Border color classes need to be applied to the elements that have a border color. |
| 43 | 44 | $border_color_classes = gutenberg_get_border_color_classes_for_block_core_search( $attributes ); |
| 44 | 45 | |
| @@ -49,33 +50,62 @@ | ||
| 49 | 50 | esc_attr( $input_id ), |
| 50 | 51 | $label_inner_html |
| 51 | 52 | ); |
| 52 | 53 | if ( $show_label && ! empty( $attributes['label'] ) ) { |
| 54 | + $label_classes = array( 'wp-block-search__label' ); | |
| 55 | + if ( ! empty( $typography_classes ) ) { | |
| 56 | + $label_classes[] = $typography_classes; | |
| 57 | + } | |
| 53 | 58 | $label_markup = sprintf( |
| 54 | - '<label for="%1$s" class="wp-block-search__label">%2$s</label>', | |
| 55 | - $input_id, | |
| 59 | + '<label for="%1$s" class="%2$s" %3$s>%4$s</label>', | |
| 60 | + esc_attr( $input_id ), | |
| 61 | + esc_attr( implode( ' ', $label_classes ) ), | |
| 62 | + $inline_styles['label'], | |
| 56 | 63 | $label_inner_html |
| 57 | 64 | ); |
| 58 | 65 | } |
| 59 | 66 | |
| 60 | 67 | if ( $show_input ) { |
| 61 | - $input_classes = ! $is_button_inside ? $border_color_classes : ''; | |
| 62 | - $input_markup = sprintf( | |
| 68 | + $input_classes = array( 'wp-block-search__input' ); | |
| 69 | + if ( $is_button_inside ) { | |
| 70 | + $input_classes[] = $border_color_classes; | |
| 71 | + } | |
| 72 | + if ( ! empty( $typography_classes ) ) { | |
| 73 | + $input_classes[] = $typography_classes; | |
| 74 | + } | |
| 75 | + $input_markup = sprintf( | |
| 63 | 76 | '<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />', |
| 64 | 77 | $input_id, |
| 65 | - esc_attr( $input_classes ), | |
| 66 | - esc_attr( get_search_query() ), | |
| 78 | + esc_attr( implode( ' ', $input_classes ) ), | |
| 79 | + get_search_query(), | |
| 67 | 80 | esc_attr( $attributes['placeholder'] ), |
| 68 | 81 | $inline_styles['input'] |
| 69 | 82 | ); |
| 70 | 83 | } |
| 71 | 84 | |
| 85 | + if ( count( $query_params ) > 0 ) { | |
| 86 | + foreach ( $query_params as $param => $value ) { | |
| 87 | + $query_params_markup .= sprintf( | |
| 88 | + '<input type="hidden" name="%s" value="%s" />', | |
| 89 | + esc_attr( $param ), | |
| 90 | + esc_attr( $value ) | |
| 91 | + ); | |
| 92 | + } | |
| 93 | + } | |
| 94 | + | |
| 72 | 95 | if ( $show_button ) { |
| 96 | + $button_classes = array( 'wp-block-search__button' ); | |
| 73 | 97 | $button_internal_markup = ''; |
| 74 | - $button_classes = $color_classes; | |
| 98 | + if ( ! empty( $color_classes ) ) { | |
| 99 | + $button_classes[] = $color_classes; | |
| 100 | + } | |
| 101 | + if ( ! empty( $typography_classes ) ) { | |
| 102 | + $button_classes[] = $typography_classes; | |
| 103 | + } | |
| 104 | + $aria_label = ''; | |
| 75 | 105 | |
| 76 | - if ( ! $is_button_inside ) { | |
| 77 | - $button_classes .= ' ' . $border_color_classes; | |
| 106 | + if ( ! $is_button_inside && ! empty( $border_color_classes ) ) { | |
| 107 | + $button_classes[] = $border_color_classes; | |
| 78 | 108 | } |
| 79 | 109 | if ( ! $use_icon_button ) { |
| 80 | 110 | if ( ! empty( $attributes['buttonText'] ) ) { |
| 81 | 111 | $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); |
| @@ -80,19 +110,24 @@ | ||
| 80 | 110 | if ( ! empty( $attributes['buttonText'] ) ) { |
| 81 | 111 | $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); |
| 82 | 112 | } |
| 83 | 113 | } else { |
| 84 | - $button_classes .= ' has-icon'; | |
| 114 | + $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); | |
| 115 | + $button_classes[] = 'has-icon'; | |
| 116 | + | |
| 85 | 117 | $button_internal_markup = |
| 86 | - '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24"> | |
| 87 | - <path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path> | |
| 88 | - </svg>'; | |
| 118 | + '<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24"> | |
| 119 | + <path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path> | |
| 120 | + </svg>'; | |
| 89 | 121 | } |
| 90 | 122 | |
| 91 | - $button_markup = sprintf( | |
| 92 | - '<button type="submit" class="wp-block-search__button %s" %s>%s</button>', | |
| 93 | - esc_attr( $button_classes ), | |
| 123 | + // Include the button element class. | |
| 124 | + $button_classes[] = wp_theme_get_element_class_name( 'button' ); | |
| 125 | + $button_markup = sprintf( | |
| 126 | + '<button type="submit" class="%s" %s %s>%s</button>', | |
| 127 | + esc_attr( implode( ' ', $button_classes ) ), | |
| 94 | 128 | $inline_styles['button'], |
| 129 | + $aria_label, | |
| 95 | 130 | $button_internal_markup |
| 96 | 131 | ); |
| 97 | 132 | } |
| 98 | 133 | |
| @@ -100,11 +135,13 @@ | ||
| 100 | 135 | $field_markup = sprintf( |
| 101 | 136 | '<div class="wp-block-search__inside-wrapper %s" %s>%s</div>', |
| 102 | 137 | esc_attr( $field_markup_classes ), |
| 103 | 138 | $inline_styles['wrapper'], |
| 104 | - $input_markup . $button_markup | |
| 139 | + $input_markup . $query_params_markup . $button_markup | |
| 105 | 140 | ); |
| 106 | - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); | |
| 141 | + $wrapper_attributes = get_block_wrapper_attributes( | |
| 142 | + array( 'class' => $classnames ) | |
| 143 | + ); | |
| 107 | 144 | |
| 108 | 145 | return sprintf( |
| 109 | 146 | '<form role="search" method="get" action="%s" %s>%s</form>', |
| 110 | 147 | esc_url( home_url( '/' ) ), |
| @@ -167,8 +204,77 @@ | ||
| 167 | 204 | return implode( ' ', $classnames ); |
| 168 | 205 | } |
| 169 | 206 | |
| 170 | 207 | /** |
| 208 | + * This generates a CSS rule for the given border property and side if provided. | |
| 209 | + * Based on whether the Search block is configured to display the button inside | |
| 210 | + * or not, the generated rule is injected into the appropriate collection of | |
| 211 | + * styles for later application in the block's markup. | |
| 212 | + * | |
| 213 | + * @param array $attributes The block attributes. | |
| 214 | + * @param string $property Border property to generate rule for e.g. width or color. | |
| 215 | + * @param string $side Optional side border. The dictates the value retrieved and final CSS property. | |
| 216 | + * @param array $wrapper_styles Current collection of wrapper styles. | |
| 217 | + * @param array $button_styles Current collection of button styles. | |
| 218 | + * @param array $input_styles Current collection of input styles. | |
| 219 | + * | |
| 220 | + * @return void | |
| 221 | + */ | |
| 222 | +function gutenberg_apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) { | |
| 223 | + $is_button_inside = 'button-inside' === _wp_array_get( $attributes, array( 'buttonPosition' ), false ); | |
| 224 | + | |
| 225 | + $path = array( 'style', 'border', $property ); | |
| 226 | + | |
| 227 | + if ( $side ) { | |
| 228 | + array_splice( $path, 2, 0, $side ); | |
| 229 | + } | |
| 230 | + | |
| 231 | + $value = _wp_array_get( $attributes, $path, false ); | |
| 232 | + | |
| 233 | + if ( empty( $value ) ) { | |
| 234 | + return; | |
| 235 | + } | |
| 236 | + | |
| 237 | + if ( 'color' === $property && $side ) { | |
| 238 | + $has_color_preset = str_contains( $value, 'var:preset|color|' ); | |
| 239 | + if ( $has_color_preset ) { | |
| 240 | + $named_color_value = substr( $value, strrpos( $value, '|' ) + 1 ); | |
| 241 | + $value = sprintf( 'var(--wp--preset--color--%s)', $named_color_value ); | |
| 242 | + } | |
| 243 | + } | |
| 244 | + | |
| 245 | + $property_suffix = $side ? sprintf( '%s-%s', $side, $property ) : $property; | |
| 246 | + | |
| 247 | + if ( $is_button_inside ) { | |
| 248 | + $wrapper_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) ); | |
| 249 | + } else { | |
| 250 | + $button_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) ); | |
| 251 | + $input_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) ); | |
| 252 | + } | |
| 253 | +} | |
| 254 | + | |
| 255 | +/** | |
| 256 | + * This adds CSS rules for a given border property e.g. width or color. It | |
| 257 | + * injects rules into the provided wrapper, button and input style arrays for | |
| 258 | + * uniform "flat" borders or those with individual sides configured. | |
| 259 | + * | |
| 260 | + * @param array $attributes The block attributes. | |
| 261 | + * @param string $property Border property to generate rule for e.g. width or color. | |
| 262 | + * @param array $wrapper_styles Current collection of wrapper styles. | |
| 263 | + * @param array $button_styles Current collection of button styles. | |
| 264 | + * @param array $input_styles Current collection of input styles. | |
| 265 | + * | |
| 266 | + * @return void | |
| 267 | + */ | |
| 268 | +function gutenberg_gutenberg_apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) { | |
| 269 | + gutenberg_apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles ); | |
| 270 | + gutenberg_apply_block_core_search_border_style( $attributes, $property, 'top', $wrapper_styles, $button_styles, $input_styles ); | |
| 271 | + gutenberg_apply_block_core_search_border_style( $attributes, $property, 'right', $wrapper_styles, $button_styles, $input_styles ); | |
| 272 | + gutenberg_apply_block_core_search_border_style( $attributes, $property, 'bottom', $wrapper_styles, $button_styles, $input_styles ); | |
| 273 | + gutenberg_apply_block_core_search_border_style( $attributes, $property, 'left', $wrapper_styles, $button_styles, $input_styles ); | |
| 274 | +} | |
| 275 | + | |
| 276 | +/** | |
| 171 | 277 | * Builds an array of inline styles for the search block. |
| 172 | 278 | * |
| 173 | 279 | * The result will contain one entry for shared styles such as those for the |
| 174 | 280 | * inner input or button and a second for the inner wrapper should the block |
| @@ -181,10 +287,12 @@ | ||
| 181 | 287 | function gutenberg_styles_for_block_core_search( $attributes ) { |
| 182 | 288 | $wrapper_styles = array(); |
| 183 | 289 | $button_styles = array(); |
| 184 | 290 | $input_styles = array(); |
| 291 | + $label_styles = array(); | |
| 185 | 292 | $is_button_inside = ! empty( $attributes['buttonPosition'] ) && |
| 186 | 293 | 'button-inside' === $attributes['buttonPosition']; |
| 294 | + $show_label = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel']; | |
| 187 | 295 | |
| 188 | 296 | // Add width styles. |
| 189 | 297 | $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); |
| 190 | 298 | $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; |
| @@ -196,22 +304,13 @@ | ||
| 196 | 304 | esc_attr( $attributes['widthUnit'] ) |
| 197 | 305 | ); |
| 198 | 306 | } |
| 199 | 307 | |
| 200 | - // Add border width styles. | |
| 201 | - $has_border_width = ! empty( $attributes['style']['border']['width'] ); | |
| 308 | + // Add border width and color styles. | |
| 309 | + gutenberg_gutenberg_apply_block_core_search_border_styles( $attributes, 'width', $wrapper_styles, $button_styles, $input_styles ); | |
| 310 | + gutenberg_gutenberg_apply_block_core_search_border_styles( $attributes, 'color', $wrapper_styles, $button_styles, $input_styles ); | |
| 311 | + gutenberg_gutenberg_apply_block_core_search_border_styles( $attributes, 'style', $wrapper_styles, $button_styles, $input_styles ); | |
| 202 | 312 | |
| 203 | - if ( $has_border_width ) { | |
| 204 | - $border_width = $attributes['style']['border']['width']; | |
| 205 | - | |
| 206 | - if ( $is_button_inside ) { | |
| 207 | - $wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); | |
| 208 | - } else { | |
| 209 | - $button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); | |
| 210 | - $input_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); | |
| 211 | - } | |
| 212 | - } | |
| 213 | - | |
| 214 | 313 | // Add border radius styles. |
| 215 | 314 | $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); |
| 216 | 315 | |
| 217 | 316 | if ( $has_border_radius ) { |
| @@ -264,32 +363,17 @@ | ||
| 264 | 363 | } |
| 265 | 364 | } |
| 266 | 365 | } |
| 267 | 366 | |
| 268 | - // Add border color styles. | |
| 269 | - $has_border_color = ! empty( $attributes['style']['border']['color'] ); | |
| 270 | - | |
| 271 | - if ( $has_border_color ) { | |
| 272 | - $border_color = $attributes['style']['border']['color']; | |
| 273 | - | |
| 274 | - // Apply wrapper border color if button placed inside. | |
| 275 | - if ( $is_button_inside ) { | |
| 276 | - $wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); | |
| 277 | - } else { | |
| 278 | - $button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); | |
| 279 | - $input_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); | |
| 280 | - } | |
| 281 | - } | |
| 282 | - | |
| 283 | 367 | // Add color styles. |
| 284 | 368 | $has_text_color = ! empty( $attributes['style']['color']['text'] ); |
| 285 | 369 | if ( $has_text_color ) { |
| 286 | - $button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) ); | |
| 370 | + $button_styles[] = sprintf( 'color: %s;', $attributes['style']['color']['text'] ); | |
| 287 | 371 | } |
| 288 | 372 | |
| 289 | 373 | $has_background_color = ! empty( $attributes['style']['color']['background'] ); |
| 290 | 374 | if ( $has_background_color ) { |
| 291 | - $button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) ); | |
| 375 | + $button_styles[] = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] ); | |
| 292 | 376 | } |
| 293 | 377 | |
| 294 | 378 | $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] ); |
| 295 | 379 | if ( $has_custom_gradient ) { |
| @@ -295,16 +379,109 @@ | ||
| 295 | 379 | if ( $has_custom_gradient ) { |
| 296 | 380 | $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); |
| 297 | 381 | } |
| 298 | 382 | |
| 383 | + // Get typography styles to be shared across inner elements. | |
| 384 | + $typography_styles = esc_attr( get_typography_gutenberg_styles_for_block_core_search( $attributes ) ); | |
| 385 | + if ( ! empty( $typography_styles ) ) { | |
| 386 | + $label_styles [] = $typography_styles; | |
| 387 | + $button_styles[] = $typography_styles; | |
| 388 | + $input_styles [] = $typography_styles; | |
| 389 | + } | |
| 390 | + | |
| 391 | + // Typography text-decoration is only applied to the label and button. | |
| 392 | + if ( ! empty( $attributes['style']['typography']['textDecoration'] ) ) { | |
| 393 | + $text_decoration_value = sprintf( 'text-decoration: %s;', esc_attr( $attributes['style']['typography']['textDecoration'] ) ); | |
| 394 | + $button_styles[] = $text_decoration_value; | |
| 395 | + // Input opts out of text decoration. | |
| 396 | + if ( $show_label ) { | |
| 397 | + $label_styles[] = $text_decoration_value; | |
| 398 | + } | |
| 399 | + } | |
| 400 | + | |
| 299 | 401 | return array( |
| 300 | - 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '', | |
| 301 | - 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '', | |
| 302 | - 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '', | |
| 402 | + 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $input_styles ) ) ) ) : '', | |
| 403 | + 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $button_styles ) ) ) ) : '', | |
| 404 | + 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) ) : '', | |
| 405 | + 'label' => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '', | |
| 303 | 406 | ); |
| 304 | 407 | } |
| 305 | 408 | |
| 306 | 409 | /** |
| 410 | + * Returns typography classnames depending on whether there are named font sizes/families . | |
| 411 | + * | |
| 412 | + * @param array $attributes The block attributes. | |
| 413 | + * | |
| 414 | + * @return string The typography color classnames to be applied to the block elements. | |
| 415 | + */ | |
| 416 | +function gutenberg_get_typography_classes_for_block_core_search( $attributes ) { | |
| 417 | + $typography_classes = array(); | |
| 418 | + $has_named_font_family = ! empty( $attributes['fontFamily'] ); | |
| 419 | + $has_named_font_size = ! empty( $attributes['fontSize'] ); | |
| 420 | + | |
| 421 | + if ( $has_named_font_size ) { | |
| 422 | + $typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) ); | |
| 423 | + } | |
| 424 | + | |
| 425 | + if ( $has_named_font_family ) { | |
| 426 | + $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) ); | |
| 427 | + } | |
| 428 | + | |
| 429 | + return implode( ' ', $typography_classes ); | |
| 430 | +} | |
| 431 | + | |
| 432 | +/** | |
| 433 | + * Returns typography styles to be included in an HTML style tag. | |
| 434 | + * This excludes text-decoration, which is applied only to the label and button elements of the search block. | |
| 435 | + * | |
| 436 | + * @param array $attributes The block attributes. | |
| 437 | + * | |
| 438 | + * @return string A string of typography CSS declarations. | |
| 439 | + */ | |
| 440 | +function get_typography_gutenberg_styles_for_block_core_search( $attributes ) { | |
| 441 | + $typography_styles = array(); | |
| 442 | + | |
| 443 | + // Add typography styles. | |
| 444 | + if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) { | |
| 445 | + $typography_styles[] = sprintf( | |
| 446 | + 'font-size: %s;', | |
| 447 | + gutenberg_get_typography_font_size_value( | |
| 448 | + array( | |
| 449 | + 'size' => $attributes['style']['typography']['fontSize'], | |
| 450 | + ) | |
| 451 | + ) | |
| 452 | + ); | |
| 453 | + | |
| 454 | + } | |
| 455 | + | |
| 456 | + if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) { | |
| 457 | + $typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] ); | |
| 458 | + } | |
| 459 | + | |
| 460 | + if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) { | |
| 461 | + $typography_styles[] = sprintf( 'letter-spacing: %s;', $attributes['style']['typography']['letterSpacing'] ); | |
| 462 | + } | |
| 463 | + | |
| 464 | + if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) { | |
| 465 | + $typography_styles[] = sprintf( 'font-weight: %s;', $attributes['style']['typography']['fontWeight'] ); | |
| 466 | + } | |
| 467 | + | |
| 468 | + if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) { | |
| 469 | + $typography_styles[] = sprintf( 'font-style: %s;', $attributes['style']['typography']['fontStyle'] ); | |
| 470 | + } | |
| 471 | + | |
| 472 | + if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) { | |
| 473 | + $typography_styles[] = sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] ); | |
| 474 | + } | |
| 475 | + | |
| 476 | + if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) { | |
| 477 | + $typography_styles[] = sprintf( 'text-transform: %s;', $attributes['style']['typography']['textTransform'] ); | |
| 478 | + } | |
| 479 | + | |
| 480 | + return implode( '', $typography_styles ); | |
| 481 | +} | |
| 482 | + | |
| 483 | +/** | |
| 307 | 484 | * Returns border color classnames depending on whether there are named or custom border colors. |
| 308 | 485 | * |
| 309 | 486 | * @param array $attributes The block attributes. |
| 310 | 487 | * |
| @@ -310,15 +487,21 @@ | ||
| 310 | 487 | * |
| 311 | 488 | * @return string The border color classnames to be applied to the block elements. |
| 312 | 489 | */ |
| 313 | 490 | function gutenberg_get_border_color_classes_for_block_core_search( $attributes ) { |
| 491 | + $border_color_classes = array(); | |
| 314 | 492 | $has_custom_border_color = ! empty( $attributes['style']['border']['color'] ); |
| 315 | - $border_color_classes = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : ''; | |
| 316 | - // If there's a border color style and no `borderColor` text string, we still want to add the generic `has-border-color` class name to the element. | |
| 317 | - if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) { | |
| 318 | - $border_color_classes = 'has-border-color'; | |
| 493 | + $has_named_border_color = ! empty( $attributes['borderColor'] ); | |
| 494 | + | |
| 495 | + if ( $has_custom_border_color || $has_named_border_color ) { | |
| 496 | + $border_color_classes[] = 'has-border-color'; | |
| 319 | 497 | } |
| 320 | - return $border_color_classes; | |
| 498 | + | |
| 499 | + if ( $has_named_border_color ) { | |
| 500 | + $border_color_classes[] = sprintf( 'has-%s-border-color', esc_attr( $attributes['borderColor'] ) ); | |
| 501 | + } | |
| 502 | + | |
| 503 | + return implode( ' ', $border_color_classes ); | |
| 321 | 504 | } |
| 322 | 505 | |
| 323 | 506 | /** |
| 324 | 507 | * Returns color classnames depending on whether there are named or custom text and background colors. |
