25 'label' => __( 'Search' ), |
25 'label' => __( 'Search' ), |
26 'buttonText' => __( 'Search' ), |
26 'buttonText' => __( 'Search' ), |
27 ) |
27 ) |
28 ); |
28 ); |
29 |
29 |
30 $input_id = 'wp-block-search__input-' . ++$instance_id; |
30 $input_id = 'wp-block-search__input-' . ++$instance_id; |
31 $classnames = classnames_for_block_core_search( $attributes ); |
31 $classnames = classnames_for_block_core_search( $attributes ); |
32 $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; |
32 $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; |
33 $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; |
33 $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; |
34 $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; |
34 $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; |
35 $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; |
35 $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; |
36 $label_markup = ''; |
36 $input_markup = ''; |
37 $input_markup = ''; |
37 $button_markup = ''; |
38 $button_markup = ''; |
38 $inline_styles = styles_for_block_core_search( $attributes ); |
39 $inline_styles = styles_for_block_core_search( $attributes ); |
39 $color_classes = get_color_classes_for_block_core_search( $attributes ); |
40 |
40 $is_button_inside = ! empty( $attributes['buttonPosition'] ) && |
41 if ( $show_label ) { |
41 'button-inside' === $attributes['buttonPosition']; |
42 if ( ! empty( $attributes['label'] ) ) { |
42 // Border color classes need to be applied to the elements that have a border color. |
43 $label_markup = sprintf( |
43 $border_color_classes = get_border_color_classes_for_block_core_search( $attributes ); |
44 '<label for="%s" class="wp-block-search__label">%s</label>', |
44 |
45 $input_id, |
45 $label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] ); |
46 $attributes['label'] |
46 |
47 ); |
47 $label_markup = sprintf( |
48 } else { |
48 '<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>', |
49 $label_markup = sprintf( |
49 esc_attr( $input_id ), |
50 '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>', |
50 $label_inner_html |
51 $input_id, |
51 ); |
52 __( 'Search' ) |
52 if ( $show_label && ! empty( $attributes['label'] ) ) { |
53 ); |
53 $label_markup = sprintf( |
54 } |
54 '<label for="%1$s" class="wp-block-search__label">%2$s</label>', |
|
55 $input_id, |
|
56 $label_inner_html |
|
57 ); |
55 } |
58 } |
56 |
59 |
57 if ( $show_input ) { |
60 if ( $show_input ) { |
58 $input_markup = sprintf( |
61 $input_classes = ! $is_button_inside ? $border_color_classes : ''; |
59 '<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />', |
62 $input_markup = sprintf( |
|
63 '<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />', |
60 $input_id, |
64 $input_id, |
|
65 esc_attr( $input_classes ), |
61 esc_attr( get_search_query() ), |
66 esc_attr( get_search_query() ), |
62 esc_attr( $attributes['placeholder'] ), |
67 esc_attr( $attributes['placeholder'] ), |
63 $inline_styles['shared'] |
68 $inline_styles['input'] |
64 ); |
69 ); |
65 } |
70 } |
66 |
71 |
67 if ( $show_button ) { |
72 if ( $show_button ) { |
68 $button_internal_markup = ''; |
73 $button_internal_markup = ''; |
69 $button_classes = ''; |
74 $button_classes = $color_classes; |
70 |
75 $aria_label = ''; |
|
76 |
|
77 if ( ! $is_button_inside ) { |
|
78 $button_classes .= ' ' . $border_color_classes; |
|
79 } |
71 if ( ! $use_icon_button ) { |
80 if ( ! $use_icon_button ) { |
72 if ( ! empty( $attributes['buttonText'] ) ) { |
81 if ( ! empty( $attributes['buttonText'] ) ) { |
73 $button_internal_markup = $attributes['buttonText']; |
82 $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); |
74 } |
83 } |
75 } else { |
84 } else { |
76 $button_classes .= 'has-icon'; |
85 $aria_label = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) ); |
|
86 $button_classes .= ' has-icon'; |
|
87 |
77 $button_internal_markup = |
88 $button_internal_markup = |
78 '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24"> |
89 '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24"> |
79 <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> |
90 <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> |
80 </svg>'; |
91 </svg>'; |
81 } |
92 } |
82 |
93 |
83 $button_markup = sprintf( |
94 $button_markup = sprintf( |
84 '<button type="submit" class="wp-block-search__button %s"%s>%s</button>', |
95 '<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>', |
85 $button_classes, |
96 esc_attr( $button_classes ), |
86 $inline_styles['shared'], |
97 $inline_styles['button'], |
|
98 $aria_label, |
87 $button_internal_markup |
99 $button_internal_markup |
88 ); |
100 ); |
89 } |
101 } |
90 |
102 |
91 $field_markup = sprintf( |
103 $field_markup_classes = $is_button_inside ? $border_color_classes : ''; |
92 '<div class="wp-block-search__inside-wrapper"%s>%s</div>', |
104 $field_markup = sprintf( |
|
105 '<div class="wp-block-search__inside-wrapper %s" %s>%s</div>', |
|
106 esc_attr( $field_markup_classes ), |
93 $inline_styles['wrapper'], |
107 $inline_styles['wrapper'], |
94 $input_markup . $button_markup |
108 $input_markup . $button_markup |
95 ); |
109 ); |
96 $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); |
110 $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); |
97 |
111 |
98 return sprintf( |
112 return sprintf( |
99 '<form role="search" method="get" action="%s" %s>%s</form>', |
113 '<form role="search" method="get" action="%s" %s>%s</form>', |
100 esc_url( home_url( '/' ) ), |
114 esc_url( home_url( '/' ) ), |
101 $wrapper_attributes, |
115 $wrapper_attributes, |
182 esc_attr( $attributes['width'] ), |
199 esc_attr( $attributes['width'] ), |
183 esc_attr( $attributes['widthUnit'] ) |
200 esc_attr( $attributes['widthUnit'] ) |
184 ); |
201 ); |
185 } |
202 } |
186 |
203 |
|
204 // Add border width styles. |
|
205 $has_border_width = ! empty( $attributes['style']['border']['width'] ); |
|
206 |
|
207 if ( $has_border_width ) { |
|
208 $border_width = $attributes['style']['border']['width']; |
|
209 |
|
210 if ( $is_button_inside ) { |
|
211 $wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); |
|
212 } else { |
|
213 $button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); |
|
214 $input_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) ); |
|
215 } |
|
216 } |
|
217 |
187 // Add border radius styles. |
218 // Add border radius styles. |
188 $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); |
219 $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); |
189 |
220 |
190 if ( $has_border_radius ) { |
221 if ( $has_border_radius ) { |
191 // Shared style for button and input radius values. |
222 $default_padding = '4px'; |
192 $border_radius = $attributes['style']['border']['radius']; |
223 $border_radius = $attributes['style']['border']['radius']; |
193 $shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) ); |
224 |
194 |
225 if ( is_array( $border_radius ) ) { |
195 // Apply wrapper border radius if button placed inside. |
226 // Apply styles for individual corner border radii. |
196 $button_inside = ! empty( $attributes['buttonPosition'] ) && |
227 foreach ( $border_radius as $key => $value ) { |
197 'button-inside' === $attributes['buttonPosition']; |
228 if ( null !== $value ) { |
198 |
229 // Convert camelCase key to kebab-case. |
199 if ( $button_inside ) { |
230 $name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) ); |
200 // We adjust the border radius value for the outer wrapper element |
231 |
201 // to make it visually consistent with the radius applied to inner |
232 // Add shared styles for individual border radii for input & button. |
202 // elements. |
233 $border_style = sprintf( |
203 $default_padding = 4; |
234 'border-%s-radius: %s;', |
204 $adjusted_radius = $border_radius + $default_padding; |
235 esc_attr( $name ), |
205 $wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) ); |
236 esc_attr( $value ) |
206 } |
237 ); |
|
238 $input_styles[] = $border_style; |
|
239 $button_styles[] = $border_style; |
|
240 |
|
241 // Add adjusted border radius styles for the wrapper element |
|
242 // if button is positioned inside. |
|
243 if ( $is_button_inside && intval( $value ) !== 0 ) { |
|
244 $wrapper_styles[] = sprintf( |
|
245 'border-%s-radius: calc(%s + %s);', |
|
246 esc_attr( $name ), |
|
247 esc_attr( $value ), |
|
248 $default_padding |
|
249 ); |
|
250 } |
|
251 } |
|
252 } |
|
253 } else { |
|
254 // Numeric check is for backwards compatibility purposes. |
|
255 $border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius; |
|
256 $border_style = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) ); |
|
257 $input_styles[] = $border_style; |
|
258 $button_styles[] = $border_style; |
|
259 |
|
260 if ( $is_button_inside && intval( $border_radius ) !== 0 ) { |
|
261 // Adjust wrapper border radii to maintain visual consistency |
|
262 // with inner elements when button is positioned inside. |
|
263 $wrapper_styles[] = sprintf( |
|
264 'border-radius: calc(%s + %s);', |
|
265 esc_attr( $border_radius ), |
|
266 $default_padding |
|
267 ); |
|
268 } |
|
269 } |
|
270 } |
|
271 |
|
272 // Add border color styles. |
|
273 $has_border_color = ! empty( $attributes['style']['border']['color'] ); |
|
274 |
|
275 if ( $has_border_color ) { |
|
276 $border_color = $attributes['style']['border']['color']; |
|
277 |
|
278 // Apply wrapper border color if button placed inside. |
|
279 if ( $is_button_inside ) { |
|
280 $wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); |
|
281 } else { |
|
282 $button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); |
|
283 $input_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) ); |
|
284 } |
|
285 } |
|
286 |
|
287 // Add color styles. |
|
288 $has_text_color = ! empty( $attributes['style']['color']['text'] ); |
|
289 if ( $has_text_color ) { |
|
290 $button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) ); |
|
291 } |
|
292 |
|
293 $has_background_color = ! empty( $attributes['style']['color']['background'] ); |
|
294 if ( $has_background_color ) { |
|
295 $button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) ); |
|
296 } |
|
297 |
|
298 $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] ); |
|
299 if ( $has_custom_gradient ) { |
|
300 $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); |
207 } |
301 } |
208 |
302 |
209 return array( |
303 return array( |
210 'shared' => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '', |
304 'input' => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '', |
211 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '', |
305 'button' => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '', |
212 ); |
306 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '', |
213 } |
307 ); |
|
308 } |
|
309 |
|
310 /** |
|
311 * Returns border color classnames depending on whether there are named or custom border colors. |
|
312 * |
|
313 * @param array $attributes The block attributes. |
|
314 * |
|
315 * @return string The border color classnames to be applied to the block elements. |
|
316 */ |
|
317 function get_border_color_classes_for_block_core_search( $attributes ) { |
|
318 $has_custom_border_color = ! empty( $attributes['style']['border']['color'] ); |
|
319 $border_color_classes = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : ''; |
|
320 // 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. |
|
321 if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) { |
|
322 $border_color_classes = 'has-border-color'; |
|
323 } |
|
324 return $border_color_classes; |
|
325 } |
|
326 |
|
327 /** |
|
328 * Returns color classnames depending on whether there are named or custom text and background colors. |
|
329 * |
|
330 * @param array $attributes The block attributes. |
|
331 * |
|
332 * @return string The color classnames to be applied to the block elements. |
|
333 */ |
|
334 function get_color_classes_for_block_core_search( $attributes ) { |
|
335 $classnames = array(); |
|
336 |
|
337 // Text color. |
|
338 $has_named_text_color = ! empty( $attributes['textColor'] ); |
|
339 $has_custom_text_color = ! empty( $attributes['style']['color']['text'] ); |
|
340 if ( $has_named_text_color ) { |
|
341 $classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] ); |
|
342 } elseif ( $has_custom_text_color ) { |
|
343 // If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class. |
|
344 $classnames[] = 'has-text-color'; |
|
345 } |
|
346 |
|
347 // Background color. |
|
348 $has_named_background_color = ! empty( $attributes['backgroundColor'] ); |
|
349 $has_custom_background_color = ! empty( $attributes['style']['color']['background'] ); |
|
350 $has_named_gradient = ! empty( $attributes['gradient'] ); |
|
351 $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] ); |
|
352 if ( |
|
353 $has_named_background_color || |
|
354 $has_custom_background_color || |
|
355 $has_named_gradient || |
|
356 $has_custom_gradient |
|
357 ) { |
|
358 $classnames[] = 'has-background'; |
|
359 } |
|
360 if ( $has_named_background_color ) { |
|
361 $classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); |
|
362 } |
|
363 if ( $has_named_gradient ) { |
|
364 $classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] ); |
|
365 } |
|
366 |
|
367 return implode( ' ', $classnames ); |
|
368 } |