1<?php
2/**
3 * Server-side rendering of the `core/search` block.
4 *
5 * @package WordPress
6 */
7
8/**
9 * Dynamically renders the `core/search` block.
10 *
11 * @since 6.3.0 Using block.json `viewScript` to register script, and update `view_script_handles()` only when needed.
12 *
13 * @param array $attributes The block attributes.
14 *
15 * @return string The search block markup.
16 */
17function render_block_core_search( $attributes ) {
18 // Older versions of the Search block defaulted the label and buttonText
19 // attributes to `__( 'Search' )` meaning that many posts contain `<!--
20 // wp:search /-->`. Support these by defaulting an undefined label and
21 // buttonText to `__( 'Search' )`.
22 $attributes = wp_parse_args(
23 $attributes,
24 array(
25 'label' => __( 'Search' ),
26 'buttonText' => __( 'Search' ),
27 )
28 );
29
30 $input_id = wp_unique_id( 'wp-block-search__input-' );
31 $classnames = classnames_for_block_core_search( $attributes );
32 $show_label = ! empty( $attributes['showLabel'] );
33 $use_icon_button = ! empty( $attributes['buttonUseIcon'] );
34 $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
35 $button_position = $show_button ? $attributes['buttonPosition'] : null;
36 $query_params = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
37 $button = '';
38 $query_params_markup = '';
39 $inline_styles = styles_for_block_core_search( $attributes );
40 $color_classes = get_color_classes_for_block_core_search( $attributes );
41 $typography_classes = get_typography_classes_for_block_core_search( $attributes );
42 $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
43 'button-inside' === $attributes['buttonPosition'];
44 // Border color classes need to be applied to the elements that have a border color.
45 $border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
46 // This variable is a constant and its value is always false at this moment.
47 // It is defined this way because some values depend on it, in case it changes in the future.
48 $open_by_default = false;
49
50 $label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
51 $label = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
52 if ( $label->next_tag() ) {
53 $label->set_attribute( 'for', $input_id );
54 $label->add_class( 'wp-block-search__label' );
55 if ( $show_label && ! empty( $attributes['label'] ) ) {
56 if ( ! empty( $typography_classes ) ) {
57 $label->add_class( $typography_classes );
58 }
59 } else {
60 $label->add_class( 'screen-reader-text' );
61 }
62 }
63
64 $input = new WP_HTML_Tag_Processor( sprintf( '<input type="search" name="s" required %s/>', $inline_styles['input'] ) );
65 $input_classes = array( 'wp-block-search__input' );
66 if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
67 $input_classes[] = $border_color_classes;
68 }
69 if ( ! empty( $typography_classes ) ) {
70 $input_classes[] = $typography_classes;
71 }
72 if ( $input->next_tag() ) {
73 $input->add_class( implode( ' ', $input_classes ) );
74 $input->set_attribute( 'id', $input_id );
75 $input->set_attribute( 'value', get_search_query() );
76 $input->set_attribute( 'placeholder', $attributes['placeholder'] );
77
78 // If it's interactive, enqueue the script module and add the directives.
79 $is_expandable_searchfield = 'button-only' === $button_position;
80 if ( $is_expandable_searchfield ) {
81 wp_enqueue_script_module( '@wordpress/block-library/search/view' );
82
83 $input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
84 $input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
85
86 // Adding these attributes manually is needed until the Interactivity API
87 // SSR logic is added to core.
88 $input->set_attribute( 'aria-hidden', 'true' );
89 $input->set_attribute( 'tabindex', '-1' );
90 }
91 }
92
93 if ( count( $query_params ) > 0 ) {
94 foreach ( $query_params as $param => $value ) {
95 $query_params_markup .= sprintf(
96 '<input type="hidden" name="%s" value="%s" />',
97 esc_attr( $param ),
98 esc_attr( $value )
99 );
100 }
101 }
102
103 if ( $show_button ) {
104 $button_classes = array( 'wp-block-search__button' );
105 $button_internal_markup = '';
106 if ( ! empty( $color_classes ) ) {
107 $button_classes[] = $color_classes;
108 }
109 if ( ! empty( $typography_classes ) ) {
110 $button_classes[] = $typography_classes;
111 }
112
113 if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
114 $button_classes[] = $border_color_classes;
115 }
116 if ( ! $use_icon_button ) {
117 if ( ! empty( $attributes['buttonText'] ) ) {
118 $button_internal_markup = wp_kses_post( $attributes['buttonText'] );
119 }
120 } else {
121 $button_classes[] = 'has-icon';
122 $button_internal_markup =
123 '<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
124 <path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
125 </svg>';
126 }
127
128 // Include the button element class.
129 $button_classes[] = wp_theme_get_element_class_name( 'button' );
130 $button = new WP_HTML_Tag_Processor( sprintf( '<button type="submit" %s>%s</button>', $inline_styles['button'], $button_internal_markup ) );
131
132 if ( $button->next_tag() ) {
133 $button->add_class( implode( ' ', $button_classes ) );
134 if ( 'button-only' === $attributes['buttonPosition'] ) {
135 $button->set_attribute( 'data-wp-bind--aria-label', 'state.ariaLabel' );
136 $button->set_attribute( 'data-wp-bind--aria-controls', 'state.ariaControls' );
137 $button->set_attribute( 'data-wp-bind--aria-expanded', 'context.isSearchInputVisible' );
138 $button->set_attribute( 'data-wp-bind--type', 'state.type' );
139 $button->set_attribute( 'data-wp-on--click', 'actions.openSearchInput' );
140
141 // Adding these attributes manually is needed until the Interactivity
142 // API SSR logic is added to core.
143 $button->set_attribute( 'aria-label', __( 'Expand search field' ) );
144 $button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
145 $button->set_attribute( 'aria-expanded', 'false' );
146 $button->set_attribute( 'type', 'button' );
147 } else {
148 $button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
149 }
150 }
151 }
152
153 $field_markup_classes = array(
154 'wp-block-search__inside-wrapper',
155 );
156 if ( $is_button_inside && ! empty( $border_color_classes ) ) {
157 $field_markup_classes[] = $border_color_classes;
158 }
159 $field_markup = sprintf(
160 '<div class="%s" %s>%s</div>',
161 esc_attr( implode( ' ', $field_markup_classes ) ),
162 $inline_styles['wrapper'],
163 $input . $query_params_markup . $button
164 );
165 $wrapper_attributes = get_block_wrapper_attributes(
166 array( 'class' => $classnames )
167 );
168 $form_directives = '';
169
170 // If it's interactive, add the directives.
171 if ( $is_expandable_searchfield ) {
172 $aria_label_expanded = __( 'Submit Search' );
173 $aria_label_collapsed = __( 'Expand search field' );
174 $form_context = wp_interactivity_data_wp_context(
175 array(
176 'isSearchInputVisible' => $open_by_default,
177 'inputId' => $input_id,
178 'ariaLabelExpanded' => $aria_label_expanded,
179 'ariaLabelCollapsed' => $aria_label_collapsed,
180 )
181 );
182 $form_directives = '
183 data-wp-interactive="core/search"
184 ' . $form_context . '
185 data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
186 data-wp-on--keydown="actions.handleSearchKeydown"
187 data-wp-on--focusout="actions.handleSearchFocusout"
188 ';
189 }
190
191 return sprintf(
192 '<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
193 esc_url( home_url( '/' ) ),
194 $wrapper_attributes,
195 $form_directives,
196 $label . $field_markup
197 );
198}
199
200/**
201 * Registers the `core/search` block on the server.
202 *
203 * @since 5.2.0
204 */
205function register_block_core_search() {
206 register_block_type_from_metadata(
207 __DIR__ . '/search',
208 array(
209 'render_callback' => 'render_block_core_search',
210 )
211 );
212}
213add_action( 'init', 'register_block_core_search' );
214
215/**
216 * Builds the correct top level classnames for the 'core/search' block.
217 *
218 * @since 5.6.0
219 *
220 * @param array $attributes The block attributes.
221 *
222 * @return string The classnames used in the block.
223 */
224function classnames_for_block_core_search( $attributes ) {
225 $classnames = array();
226
227 if ( ! empty( $attributes['buttonPosition'] ) ) {
228 if ( 'button-inside' === $attributes['buttonPosition'] ) {
229 $classnames[] = 'wp-block-search__button-inside';
230 }
231
232 if ( 'button-outside' === $attributes['buttonPosition'] ) {
233 $classnames[] = 'wp-block-search__button-outside';
234 }
235
236 if ( 'no-button' === $attributes['buttonPosition'] ) {
237 $classnames[] = 'wp-block-search__no-button';
238 }
239
240 if ( 'button-only' === $attributes['buttonPosition'] ) {
241 $classnames[] = 'wp-block-search__button-only wp-block-search__searchfield-hidden';
242 }
243 }
244
245 if ( isset( $attributes['buttonUseIcon'] ) ) {
246 if ( ! empty( $attributes['buttonPosition'] ) && 'no-button' !== $attributes['buttonPosition'] ) {
247 if ( $attributes['buttonUseIcon'] ) {
248 $classnames[] = 'wp-block-search__icon-button';
249 } else {
250 $classnames[] = 'wp-block-search__text-button';
251 }
252 }
253 }
254
255 return implode( ' ', $classnames );
256}
257
258/**
259 * This generates a CSS rule for the given border property and side if provided.
260 * Based on whether the Search block is configured to display the button inside
261 * or not, the generated rule is injected into the appropriate collection of
262 * styles for later application in the block's markup.
263 *
264 * @since 6.1.0
265 *
266 * @param array $attributes The block attributes.
267 * @param string $property Border property to generate rule for e.g. width or color.
268 * @param string $side Optional side border. The dictates the value retrieved and final CSS property.
269 * @param array $wrapper_styles Current collection of wrapper styles.
270 * @param array $button_styles Current collection of button styles.
271 * @param array $input_styles Current collection of input styles.
272 */
273function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
274 $is_button_inside = isset( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition'];
275
276 $path = array( 'style', 'border', $property );
277
278 if ( $side ) {
279 array_splice( $path, 2, 0, $side );
280 }
281
282 $value = _wp_array_get( $attributes, $path, false );
283
284 if ( empty( $value ) ) {
285 return;
286 }
287
288 if ( 'color' === $property && $side ) {
289 $has_color_preset = str_contains( $value, 'var:preset|color|' );
290 if ( $has_color_preset ) {
291 $named_color_value = substr( $value, strrpos( $value, '|' ) + 1 );
292 $value = sprintf( 'var(--wp--preset--color--%s)', $named_color_value );
293 }
294 }
295
296 $property_suffix = $side ? sprintf( '%s-%s', $side, $property ) : $property;
297
298 if ( $is_button_inside ) {
299 $wrapper_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
300 } else {
301 $button_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
302 $input_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
303 }
304}
305
306/**
307 * This adds CSS rules for a given border property e.g. width or color. It
308 * injects rules into the provided wrapper, button and input style arrays for
309 * uniform "flat" borders or those with individual sides configured.
310 *
311 * @since 6.1.0
312 *
313 * @param array $attributes The block attributes.
314 * @param string $property Border property to generate rule for e.g. width or color.
315 * @param array $wrapper_styles Current collection of wrapper styles.
316 * @param array $button_styles Current collection of button styles.
317 * @param array $input_styles Current collection of input styles.
318 */
319function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
320 apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );
321 apply_block_core_search_border_style( $attributes, $property, 'top', $wrapper_styles, $button_styles, $input_styles );
322 apply_block_core_search_border_style( $attributes, $property, 'right', $wrapper_styles, $button_styles, $input_styles );
323 apply_block_core_search_border_style( $attributes, $property, 'bottom', $wrapper_styles, $button_styles, $input_styles );
324 apply_block_core_search_border_style( $attributes, $property, 'left', $wrapper_styles, $button_styles, $input_styles );
325}
326
327/**
328 * Builds an array of inline styles for the search block.
329 *
330 * The result will contain one entry for shared styles such as those for the
331 * inner input or button and a second for the inner wrapper should the block
332 * be positioning the button "inside".
333 *
334 * @since 5.8.0
335 *
336 * @param array $attributes The block attributes.
337 *
338 * @return array Style HTML attribute.
339 */
340function styles_for_block_core_search( $attributes ) {
341 $wrapper_styles = array();
342 $button_styles = array();
343 $input_styles = array();
344 $label_styles = array();
345 $is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
346 'button-inside' === $attributes['buttonPosition'];
347 $show_label = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel'];
348
349 // Add width styles.
350 $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
351
352 if ( $has_width ) {
353 $wrapper_styles[] = sprintf(
354 'width: %d%s;',
355 esc_attr( $attributes['width'] ),
356 esc_attr( $attributes['widthUnit'] )
357 );
358 }
359
360 // Add border width and color styles.
361 apply_block_core_search_border_styles( $attributes, 'width', $wrapper_styles, $button_styles, $input_styles );
362 apply_block_core_search_border_styles( $attributes, 'color', $wrapper_styles, $button_styles, $input_styles );
363 apply_block_core_search_border_styles( $attributes, 'style', $wrapper_styles, $button_styles, $input_styles );
364
365 // Add border radius styles.
366 $has_border_radius = ! empty( $attributes['style']['border']['radius'] );
367
368 if ( $has_border_radius ) {
369 $default_padding = '4px';
370 $border_radius = $attributes['style']['border']['radius'];
371
372 if ( is_array( $border_radius ) ) {
373 // Apply styles for individual corner border radii.
374 foreach ( $border_radius as $key => $value ) {
375 // Get border-radius CSS variable from preset value if provided.
376 if ( is_string( $value ) && str_contains( $value, 'var:preset|border-radius|' ) ) {
377 $index_to_splice = strrpos( $value, '|' ) + 1;
378 $slug = _wp_to_kebab_case( substr( $value, $index_to_splice ) );
379 $value = "var(--wp--preset--border-radius--$slug)";
380 }
381
382 if ( null !== $value ) {
383 // Convert camelCase key to kebab-case.
384 $name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );
385
386 // Add shared styles for individual border radii for input & button.
387 $border_style = sprintf(
388 'border-%s-radius: %s;',
389 esc_attr( $name ),
390 esc_attr( $value )
391 );
392 $input_styles[] = $border_style;
393 $button_styles[] = $border_style;
394
395 // Add adjusted border radius styles for the wrapper element
396 // if button is positioned inside.
397 if ( $is_button_inside && ( intval( $value ) !== 0 || str_contains( $value, 'var(--wp--preset--border-radius--' ) ) ) {
398 $wrapper_styles[] = sprintf(
399 'border-%s-radius: calc(%s + %s);',
400 esc_attr( $name ),
401 esc_attr( $value ),
402 $default_padding
403 );
404 }
405 }
406 }
407 } else {
408 // Numeric check is for backwards compatibility purposes.
409 $border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
410 // Get border-radius CSS variable from preset value if provided.
411 if ( is_string( $border_radius ) && str_contains( $border_radius, 'var:preset|border-radius|' ) ) {
412 $index_to_splice = strrpos( $border_radius, '|' ) + 1;
413 $slug = _wp_to_kebab_case( substr( $border_radius, $index_to_splice ) );
414 $border_radius = "var(--wp--preset--border-radius--$slug)";
415 }
416
417 $border_style = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
418 $input_styles[] = $border_style;
419 $button_styles[] = $border_style;
420
421 if ( $is_button_inside && intval( $border_radius ) !== 0 ) {
422 // Adjust wrapper border radii to maintain visual consistency
423 // with inner elements when button is positioned inside.
424 $wrapper_styles[] = sprintf(
425 'border-radius: calc(%s + %s);',
426 esc_attr( $border_radius ),
427 $default_padding
428 );
429 }
430 }
431 }
432
433 // Add color styles.
434 $has_text_color = ! empty( $attributes['style']['color']['text'] );
435 if ( $has_text_color ) {
436 $button_styles[] = sprintf( 'color: %s;', $attributes['style']['color']['text'] );
437 }
438
439 $has_background_color = ! empty( $attributes['style']['color']['background'] );
440 if ( $has_background_color ) {
441 $button_styles[] = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
442 }
443
444 $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
445 if ( $has_custom_gradient ) {
446 $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] );
447 }
448
449 // Get typography styles to be shared across inner elements.
450 $typography_styles = esc_attr( get_typography_styles_for_block_core_search( $attributes ) );
451 if ( ! empty( $typography_styles ) ) {
452 $label_styles [] = $typography_styles;
453 $button_styles[] = $typography_styles;
454 $input_styles [] = $typography_styles;
455 }
456
457 // Typography text-decoration is only applied to the label and button.
458 if ( ! empty( $attributes['style']['typography']['textDecoration'] ) ) {
459 $text_decoration_value = sprintf( 'text-decoration: %s;', esc_attr( $attributes['style']['typography']['textDecoration'] ) );
460 $button_styles[] = $text_decoration_value;
461 // Input opts out of text decoration.
462 if ( $show_label ) {
463 $label_styles[] = $text_decoration_value;
464 }
465 }
466
467 return array(
468 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $input_styles ) ) ) ) : '',
469 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $button_styles ) ) ) ) : '',
470 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) ) : '',
471 'label' => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '',
472 );
473}
474
475/**
476 * Returns typography classnames depending on whether there are named font sizes/families.
477 *
478 * @since 6.1.0
479 *
480 * @param array $attributes The block attributes.
481 *
482 * @return string The typography color classnames to be applied to the block elements.
483 */
484function get_typography_classes_for_block_core_search( $attributes ) {
485 $typography_classes = array();
486 $has_named_font_family = ! empty( $attributes['fontFamily'] );
487 $has_named_font_size = ! empty( $attributes['fontSize'] );
488
489 if ( $has_named_font_size ) {
490 $typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( $attributes['fontSize'] ) );
491 }
492
493 if ( $has_named_font_family ) {
494 $typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( $attributes['fontFamily'] ) );
495 }
496
497 return implode( ' ', $typography_classes );
498}
499
500/**
501 * Returns typography styles to be included in an HTML style tag.
502 * This excludes text-decoration, which is applied only to the label and button elements of the search block.
503 *
504 * @since 6.1.0
505 *
506 * @param array $attributes The block attributes.
507 *
508 * @return string A string of typography CSS declarations.
509 */
510function get_typography_styles_for_block_core_search( $attributes ) {
511 $typography_styles = array();
512
513 // Add typography styles.
514 if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
515 $typography_styles[] = sprintf(
516 'font-size: %s;',
517 wp_get_typography_font_size_value(
518 array(
519 'size' => $attributes['style']['typography']['fontSize'],
520 )
521 )
522 );
523
524 }
525
526 if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
527 $typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
528 }
529
530 if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) {
531 $typography_styles[] = sprintf( 'letter-spacing: %s;', $attributes['style']['typography']['letterSpacing'] );
532 }
533
534 if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) {
535 $typography_styles[] = sprintf( 'font-weight: %s;', $attributes['style']['typography']['fontWeight'] );
536 }
537
538 if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) {
539 $typography_styles[] = sprintf( 'font-style: %s;', $attributes['style']['typography']['fontStyle'] );
540 }
541
542 if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) {
543 $typography_styles[] = sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] );
544 }
545
546 if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) {
547 $typography_styles[] = sprintf( 'text-transform: %s;', $attributes['style']['typography']['textTransform'] );
548 }
549
550 return implode( '', $typography_styles );
551}
552
553/**
554 * Returns border color classnames depending on whether there are named or custom border colors.
555 *
556 * @since 5.9.0
557 *
558 * @param array $attributes The block attributes.
559 *
560 * @return string The border color classnames to be applied to the block elements.
561 */
562function get_border_color_classes_for_block_core_search( $attributes ) {
563 $border_color_classes = array();
564 $has_custom_border_color = ! empty( $attributes['style']['border']['color'] );
565 $has_named_border_color = ! empty( $attributes['borderColor'] );
566
567 if ( $has_custom_border_color || $has_named_border_color ) {
568 $border_color_classes[] = 'has-border-color';
569 }
570
571 if ( $has_named_border_color ) {
572 $border_color_classes[] = sprintf( 'has-%s-border-color', esc_attr( $attributes['borderColor'] ) );
573 }
574
575 return implode( ' ', $border_color_classes );
576}
577
578/**
579 * Returns color classnames depending on whether there are named or custom text and background colors.
580 *
581 * @since 5.9.0
582 *
583 * @param array $attributes The block attributes.
584 *
585 * @return string The color classnames to be applied to the block elements.
586 */
587function get_color_classes_for_block_core_search( $attributes ) {
588 $classnames = array();
589
590 // Text color.
591 $has_named_text_color = ! empty( $attributes['textColor'] );
592 $has_custom_text_color = ! empty( $attributes['style']['color']['text'] );
593 if ( $has_named_text_color ) {
594 $classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] );
595 } elseif ( $has_custom_text_color ) {
596 // If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class.
597 $classnames[] = 'has-text-color';
598 }
599
600 // Background color.
601 $has_named_background_color = ! empty( $attributes['backgroundColor'] );
602 $has_custom_background_color = ! empty( $attributes['style']['color']['background'] );
603 $has_named_gradient = ! empty( $attributes['gradient'] );
604 $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
605 if (
606 $has_named_background_color ||
607 $has_custom_background_color ||
608 $has_named_gradient ||
609 $has_custom_gradient
610 ) {
611 $classnames[] = 'has-background';
612 }
613 if ( $has_named_background_color ) {
614 $classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] );
615 }
616 if ( $has_named_gradient ) {
617 $classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] );
618 }
619
620 return implode( ' ', $classnames );
621}
622