| @@ -26,63 +26,54 @@ | ||
| 26 | 26 | 'buttonText' => __( 'Search' ), |
| 27 | 27 | ) |
| 28 | 28 | ); |
| 29 | 29 | |
| 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'] ) && | |
| 41 | - 'button-inside' === $attributes['buttonPosition']; | |
| 42 | - // Border color classes need to be applied to the elements that have a border color. | |
| 43 | - $border_color_classes = gutenberg_get_border_color_classes_for_block_core_search( $attributes ); | |
| 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 | + $label_markup = ''; | |
| 37 | + $input_markup = ''; | |
| 38 | + $button_markup = ''; | |
| 39 | + $width_styles = ''; | |
| 44 | 40 | |
| 45 | - $label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] ); | |
| 46 | - | |
| 47 | - $label_markup = sprintf( | |
| 48 | - '<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>', | |
| 49 | - esc_attr( $input_id ), | |
| 50 | - $label_inner_html | |
| 51 | - ); | |
| 52 | - if ( $show_label && ! empty( $attributes['label'] ) ) { | |
| 53 | - $label_markup = sprintf( | |
| 54 | - '<label for="%1$s" class="wp-block-search__label">%2$s</label>', | |
| 55 | - $input_id, | |
| 56 | - $label_inner_html | |
| 57 | - ); | |
| 41 | + if ( $show_label ) { | |
| 42 | + if ( ! empty( $attributes['label'] ) ) { | |
| 43 | + $label_markup = sprintf( | |
| 44 | + '<label for="%s" class="wp-block-search__label">%s</label>', | |
| 45 | + $input_id, | |
| 46 | + $attributes['label'] | |
| 47 | + ); | |
| 48 | + } else { | |
| 49 | + $label_markup = sprintf( | |
| 50 | + '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>', | |
| 51 | + $input_id, | |
| 52 | + __( 'Search' ) | |
| 53 | + ); | |
| 54 | + } | |
| 58 | 55 | } |
| 59 | 56 | |
| 60 | 57 | if ( $show_input ) { |
| 61 | - $input_classes = ! $is_button_inside ? $border_color_classes : ''; | |
| 62 | - $input_markup = sprintf( | |
| 63 | - '<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />', | |
| 58 | + $input_markup = sprintf( | |
| 59 | + '<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" required />', | |
| 64 | 60 | $input_id, |
| 65 | - esc_attr( $input_classes ), | |
| 66 | 61 | esc_attr( get_search_query() ), |
| 67 | - esc_attr( $attributes['placeholder'] ), | |
| 68 | - $inline_styles['input'] | |
| 62 | + esc_attr( $attributes['placeholder'] ) | |
| 69 | 63 | ); |
| 70 | 64 | } |
| 71 | 65 | |
| 72 | 66 | if ( $show_button ) { |
| 73 | 67 | $button_internal_markup = ''; |
| 74 | - $button_classes = $color_classes; | |
| 68 | + $button_classes = ''; | |
| 75 | 69 | |
| 76 | - if ( ! $is_button_inside ) { | |
| 77 | - $button_classes .= ' ' . $border_color_classes; | |
| 78 | - } | |
| 79 | 70 | if ( ! $use_icon_button ) { |
| 80 | 71 | if ( ! empty( $attributes['buttonText'] ) ) { |
| 81 | - $button_internal_markup = wp_kses_post( $attributes['buttonText'] ); | |
| 72 | + $button_internal_markup = $attributes['buttonText']; | |
| 82 | 73 | } |
| 83 | 74 | } else { |
| 84 | - $button_classes .= ' has-icon'; | |
| 75 | + $button_classes .= 'has-icon'; | |
| 85 | 76 | $button_internal_markup = |
| 86 | 77 | '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24"> |
| 87 | 78 | <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 | 79 | </svg>'; |
| @@ -88,23 +79,25 @@ | ||
| 88 | 79 | </svg>'; |
| 89 | 80 | } |
| 90 | 81 | |
| 91 | 82 | $button_markup = sprintf( |
| 92 | - '<button type="submit" class="wp-block-search__button %s" %s>%s</button>', | |
| 93 | - esc_attr( $button_classes ), | |
| 94 | - $inline_styles['button'], | |
| 83 | + '<button type="submit"class="wp-block-search__button ' . $button_classes . '">%s</button>', | |
| 95 | 84 | $button_internal_markup |
| 96 | 85 | ); |
| 97 | 86 | } |
| 98 | 87 | |
| 99 | - $field_markup_classes = $is_button_inside ? $border_color_classes : ''; | |
| 100 | - $field_markup = sprintf( | |
| 101 | - '<div class="wp-block-search__inside-wrapper %s" %s>%s</div>', | |
| 102 | - esc_attr( $field_markup_classes ), | |
| 103 | - $inline_styles['wrapper'], | |
| 88 | + if ( ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ) ) { | |
| 89 | + if ( ! empty( $attributes['buttonPosition'] ) && 'button-only' !== $attributes['buttonPosition'] ) { | |
| 90 | + $width_styles = ' style="width: ' . $attributes['width'] . $attributes['widthUnit'] . ';"'; | |
| 91 | + } | |
| 92 | + } | |
| 93 | + | |
| 94 | + $field_markup = sprintf( | |
| 95 | + '<div class="wp-block-search__inside-wrapper"%s>%s</div>', | |
| 96 | + $width_styles, | |
| 104 | 97 | $input_markup . $button_markup |
| 105 | 98 | ); |
| 106 | - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); | |
| 99 | + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); | |
| 107 | 100 | |
| 108 | 101 | return sprintf( |
| 109 | 102 | '<form role="search" method="get" action="%s" %s>%s</form>', |
| 110 | 103 | esc_url( home_url( '/' ) ), |
| @@ -161,204 +154,8 @@ | ||
| 161 | 154 | } else { |
| 162 | 155 | $classnames[] = 'wp-block-search__text-button'; |
| 163 | 156 | } |
| 164 | 157 | } |
| 165 | - } | |
| 166 | - | |
| 167 | - return implode( ' ', $classnames ); | |
| 168 | -} | |
| 169 | - | |
| 170 | -/** | |
| 171 | - * Builds an array of inline styles for the search block. | |
| 172 | - * | |
| 173 | - * The result will contain one entry for shared styles such as those for the | |
| 174 | - * inner input or button and a second for the inner wrapper should the block | |
| 175 | - * be positioning the button "inside". | |
| 176 | - * | |
| 177 | - * @param array $attributes The block attributes. | |
| 178 | - * | |
| 179 | - * @return array Style HTML attribute. | |
| 180 | - */ | |
| 181 | -function gutenberg_styles_for_block_core_search( $attributes ) { | |
| 182 | - $wrapper_styles = array(); | |
| 183 | - $button_styles = array(); | |
| 184 | - $input_styles = array(); | |
| 185 | - $is_button_inside = ! empty( $attributes['buttonPosition'] ) && | |
| 186 | - 'button-inside' === $attributes['buttonPosition']; | |
| 187 | - | |
| 188 | - // Add width styles. | |
| 189 | - $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); | |
| 190 | - $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; | |
| 191 | - | |
| 192 | - if ( $has_width && ! $button_only ) { | |
| 193 | - $wrapper_styles[] = sprintf( | |
| 194 | - 'width: %d%s;', | |
| 195 | - esc_attr( $attributes['width'] ), | |
| 196 | - esc_attr( $attributes['widthUnit'] ) | |
| 197 | - ); | |
| 198 | - } | |
| 199 | - | |
| 200 | - // Add border width styles. | |
| 201 | - $has_border_width = ! empty( $attributes['style']['border']['width'] ); | |
| 202 | - | |
| 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 | - // Add border radius styles. | |
| 215 | - $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); | |
| 216 | - | |
| 217 | - if ( $has_border_radius ) { | |
| 218 | - $default_padding = '4px'; | |
| 219 | - $border_radius = $attributes['style']['border']['radius']; | |
| 220 | - | |
| 221 | - if ( is_array( $border_radius ) ) { | |
| 222 | - // Apply styles for individual corner border radii. | |
| 223 | - foreach ( $border_radius as $key => $value ) { | |
| 224 | - if ( null !== $value ) { | |
| 225 | - // Convert camelCase key to kebab-case. | |
| 226 | - $name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) ); | |
| 227 | - | |
| 228 | - // Add shared styles for individual border radii for input & button. | |
| 229 | - $border_style = sprintf( | |
| 230 | - 'border-%s-radius: %s;', | |
| 231 | - esc_attr( $name ), | |
| 232 | - esc_attr( $value ) | |
| 233 | - ); | |
| 234 | - $input_styles[] = $border_style; | |
| 235 | - $button_styles[] = $border_style; | |
| 236 | - | |
| 237 | - // Add adjusted border radius styles for the wrapper element | |
| 238 | - // if button is positioned inside. | |
| 239 | - if ( $is_button_inside && intval( $value ) !== 0 ) { | |
| 240 | - $wrapper_styles[] = sprintf( | |
| 241 | - 'border-%s-radius: calc(%s + %s);', | |
| 242 | - esc_attr( $name ), | |
| 243 | - esc_attr( $value ), | |
| 244 | - $default_padding | |
| 245 | - ); | |
| 246 | - } | |
| 247 | - } | |
| 248 | - } | |
| 249 | - } else { | |
| 250 | - // Numeric check is for backwards compatibility purposes. | |
| 251 | - $border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius; | |
| 252 | - $border_style = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) ); | |
| 253 | - $input_styles[] = $border_style; | |
| 254 | - $button_styles[] = $border_style; | |
| 255 | - | |
| 256 | - if ( $is_button_inside && intval( $border_radius ) !== 0 ) { | |
| 257 | - // Adjust wrapper border radii to maintain visual consistency | |
| 258 | - // with inner elements when button is positioned inside. | |
| 259 | - $wrapper_styles[] = sprintf( | |
| 260 | - 'border-radius: calc(%s + %s);', | |
| 261 | - esc_attr( $border_radius ), | |
| 262 | - $default_padding | |
| 263 | - ); | |
| 264 | - } | |
| 265 | - } | |
| 266 | - } | |
| 267 | - | |
| 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 | - // Add color styles. | |
| 284 | - $has_text_color = ! empty( $attributes['style']['color']['text'] ); | |
| 285 | - if ( $has_text_color ) { | |
| 286 | - $button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) ); | |
| 287 | - } | |
| 288 | - | |
| 289 | - $has_background_color = ! empty( $attributes['style']['color']['background'] ); | |
| 290 | - if ( $has_background_color ) { | |
| 291 | - $button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) ); | |
| 292 | - } | |
| 293 | - | |
| 294 | - $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] ); | |
| 295 | - if ( $has_custom_gradient ) { | |
| 296 | - $button_styles[] = sprintf( 'background: %s;', $attributes['style']['color']['gradient'] ); | |
| 297 | - } | |
| 298 | - | |
| 299 | - 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 ) ) ) : '', | |
| 303 | - ); | |
| 304 | -} | |
| 305 | - | |
| 306 | -/** | |
| 307 | - * Returns border color classnames depending on whether there are named or custom border colors. | |
| 308 | - * | |
| 309 | - * @param array $attributes The block attributes. | |
| 310 | - * | |
| 311 | - * @return string The border color classnames to be applied to the block elements. | |
| 312 | - */ | |
| 313 | -function gutenberg_get_border_color_classes_for_block_core_search( $attributes ) { | |
| 314 | - $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'; | |
| 319 | - } | |
| 320 | - return $border_color_classes; | |
| 321 | -} | |
| 322 | - | |
| 323 | -/** | |
| 324 | - * Returns color classnames depending on whether there are named or custom text and background colors. | |
| 325 | - * | |
| 326 | - * @param array $attributes The block attributes. | |
| 327 | - * | |
| 328 | - * @return string The color classnames to be applied to the block elements. | |
| 329 | - */ | |
| 330 | -function gutenberg_get_color_classes_for_block_core_search( $attributes ) { | |
| 331 | - $classnames = array(); | |
| 332 | - | |
| 333 | - // Text color. | |
| 334 | - $has_named_text_color = ! empty( $attributes['textColor'] ); | |
| 335 | - $has_custom_text_color = ! empty( $attributes['style']['color']['text'] ); | |
| 336 | - if ( $has_named_text_color ) { | |
| 337 | - $classnames[] = sprintf( 'has-text-color has-%s-color', $attributes['textColor'] ); | |
| 338 | - } elseif ( $has_custom_text_color ) { | |
| 339 | - // If a custom 'textColor' was selected instead of a preset, still add the generic `has-text-color` class. | |
| 340 | - $classnames[] = 'has-text-color'; | |
| 341 | - } | |
| 342 | - | |
| 343 | - // Background color. | |
| 344 | - $has_named_background_color = ! empty( $attributes['backgroundColor'] ); | |
| 345 | - $has_custom_background_color = ! empty( $attributes['style']['color']['background'] ); | |
| 346 | - $has_named_gradient = ! empty( $attributes['gradient'] ); | |
| 347 | - $has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] ); | |
| 348 | - if ( | |
| 349 | - $has_named_background_color || | |
| 350 | - $has_custom_background_color || | |
| 351 | - $has_named_gradient || | |
| 352 | - $has_custom_gradient | |
| 353 | - ) { | |
| 354 | - $classnames[] = 'has-background'; | |
| 355 | - } | |
| 356 | - if ( $has_named_background_color ) { | |
| 357 | - $classnames[] = sprintf( 'has-%s-background-color', $attributes['backgroundColor'] ); | |
| 358 | - } | |
| 359 | - if ( $has_named_gradient ) { | |
| 360 | - $classnames[] = sprintf( 'has-%s-gradient-background', $attributes['gradient'] ); | |
| 361 | 158 | } |
| 362 | 159 | |
| 363 | 160 | return implode( ' ', $classnames ); |
| 364 | 161 | } |
