styles_for_block_core_search

The timeline below displays how wordpress function styles_for_block_core_search has changed across different WordPress versions. If a version is not listed, refer to the next available version below.

WordPress Version: 6.3

/**
 * Builds an array of inline styles for the search block.
 *
 * The result will contain one entry for shared styles such as those for the
 * inner input or button and a second for the inner wrapper should the block
 * be positioning the button "inside".
 *
 * @param  array $attributes The block attributes.
 *
 * @return array Style HTML attribute.
 */
function styles_for_block_core_search($attributes)
{
    $wrapper_styles = array();
    $button_styles = array();
    $input_styles = array();
    $label_styles = array();
    $is_button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
    $show_label = isset($attributes['showLabel']) && false !== $attributes['showLabel'];
    // Add width styles.
    $has_width = !empty($attributes['width']) && !empty($attributes['widthUnit']);
    if ($has_width) {
        $wrapper_styles[] = sprintf('width: %d%s;', esc_attr($attributes['width']), esc_attr($attributes['widthUnit']));
    }
    // Add border width and color styles.
    apply_block_core_search_border_styles($attributes, 'width', $wrapper_styles, $button_styles, $input_styles);
    apply_block_core_search_border_styles($attributes, 'color', $wrapper_styles, $button_styles, $input_styles);
    apply_block_core_search_border_styles($attributes, 'style', $wrapper_styles, $button_styles, $input_styles);
    // Add border radius styles.
    $has_border_radius = !empty($attributes['style']['border']['radius']);
    if ($has_border_radius) {
        $default_padding = '4px';
        $border_radius = $attributes['style']['border']['radius'];
        if (is_array($border_radius)) {
            // Apply styles for individual corner border radii.
            foreach ($border_radius as $key => $value) {
                if (null !== $value) {
                    // Convert camelCase key to kebab-case.
                    $name = strtolower(preg_replace('/(?<!^)[A-Z]/', '-$0', $key));
                    // Add shared styles for individual border radii for input & button.
                    $border_style = sprintf('border-%s-radius: %s;', esc_attr($name), esc_attr($value));
                    $input_styles[] = $border_style;
                    $button_styles[] = $border_style;
                    // Add adjusted border radius styles for the wrapper element
                    // if button is positioned inside.
                    if ($is_button_inside && intval($value) !== 0) {
                        $wrapper_styles[] = sprintf('border-%s-radius: calc(%s + %s);', esc_attr($name), esc_attr($value), $default_padding);
                    }
                }
            }
        } else {
            // Numeric check is for backwards compatibility purposes.
            $border_radius = is_numeric($border_radius) ? $border_radius . 'px' : $border_radius;
            $border_style = sprintf('border-radius: %s;', esc_attr($border_radius));
            $input_styles[] = $border_style;
            $button_styles[] = $border_style;
            if ($is_button_inside && intval($border_radius) !== 0) {
                // Adjust wrapper border radii to maintain visual consistency
                // with inner elements when button is positioned inside.
                $wrapper_styles[] = sprintf('border-radius: calc(%s + %s);', esc_attr($border_radius), $default_padding);
            }
        }
    }
    // Add color styles.
    $has_text_color = !empty($attributes['style']['color']['text']);
    if ($has_text_color) {
        $button_styles[] = sprintf('color: %s;', $attributes['style']['color']['text']);
    }
    $has_background_color = !empty($attributes['style']['color']['background']);
    if ($has_background_color) {
        $button_styles[] = sprintf('background-color: %s;', $attributes['style']['color']['background']);
    }
    $has_custom_gradient = !empty($attributes['style']['color']['gradient']);
    if ($has_custom_gradient) {
        $button_styles[] = sprintf('background: %s;', $attributes['style']['color']['gradient']);
    }
    // Get typography styles to be shared across inner elements.
    $typography_styles = esc_attr(get_typography_styles_for_block_core_search($attributes));
    if (!empty($typography_styles)) {
        $label_styles[] = $typography_styles;
        $button_styles[] = $typography_styles;
        $input_styles[] = $typography_styles;
    }
    // Typography text-decoration is only applied to the label and button.
    if (!empty($attributes['style']['typography']['textDecoration'])) {
        $text_decoration_value = sprintf('text-decoration: %s;', esc_attr($attributes['style']['typography']['textDecoration']));
        $button_styles[] = $text_decoration_value;
        // Input opts out of text decoration.
        if ($show_label) {
            $label_styles[] = $text_decoration_value;
        }
    }
    return array('input' => (!empty($input_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $input_styles)))) : '', 'button' => (!empty($button_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $button_styles)))) : '', 'wrapper' => (!empty($wrapper_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $wrapper_styles)))) : '', 'label' => (!empty($label_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $label_styles)))) : '');
}

WordPress Version: 6.1

/**
 * Builds an array of inline styles for the search block.
 *
 * The result will contain one entry for shared styles such as those for the
 * inner input or button and a second for the inner wrapper should the block
 * be positioning the button "inside".
 *
 * @param  array $attributes The block attributes.
 *
 * @return array Style HTML attribute.
 */
function styles_for_block_core_search($attributes)
{
    $wrapper_styles = array();
    $button_styles = array();
    $input_styles = array();
    $label_styles = array();
    $is_button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
    $show_label = isset($attributes['showLabel']) && false !== $attributes['showLabel'];
    // Add width styles.
    $has_width = !empty($attributes['width']) && !empty($attributes['widthUnit']);
    $button_only = !empty($attributes['buttonPosition']) && 'button-only' === $attributes['buttonPosition'];
    if ($has_width && !$button_only) {
        $wrapper_styles[] = sprintf('width: %d%s;', esc_attr($attributes['width']), esc_attr($attributes['widthUnit']));
    }
    // Add border width and color styles.
    apply_block_core_search_border_styles($attributes, 'width', $wrapper_styles, $button_styles, $input_styles);
    apply_block_core_search_border_styles($attributes, 'color', $wrapper_styles, $button_styles, $input_styles);
    apply_block_core_search_border_styles($attributes, 'style', $wrapper_styles, $button_styles, $input_styles);
    // Add border radius styles.
    $has_border_radius = !empty($attributes['style']['border']['radius']);
    if ($has_border_radius) {
        $default_padding = '4px';
        $border_radius = $attributes['style']['border']['radius'];
        if (is_array($border_radius)) {
            // Apply styles for individual corner border radii.
            foreach ($border_radius as $key => $value) {
                if (null !== $value) {
                    // Convert camelCase key to kebab-case.
                    $name = strtolower(preg_replace('/(?<!^)[A-Z]/', '-$0', $key));
                    // Add shared styles for individual border radii for input & button.
                    $border_style = sprintf('border-%s-radius: %s;', esc_attr($name), esc_attr($value));
                    $input_styles[] = $border_style;
                    $button_styles[] = $border_style;
                    // Add adjusted border radius styles for the wrapper element
                    // if button is positioned inside.
                    if ($is_button_inside && intval($value) !== 0) {
                        $wrapper_styles[] = sprintf('border-%s-radius: calc(%s + %s);', esc_attr($name), esc_attr($value), $default_padding);
                    }
                }
            }
        } else {
            // Numeric check is for backwards compatibility purposes.
            $border_radius = is_numeric($border_radius) ? $border_radius . 'px' : $border_radius;
            $border_style = sprintf('border-radius: %s;', esc_attr($border_radius));
            $input_styles[] = $border_style;
            $button_styles[] = $border_style;
            if ($is_button_inside && intval($border_radius) !== 0) {
                // Adjust wrapper border radii to maintain visual consistency
                // with inner elements when button is positioned inside.
                $wrapper_styles[] = sprintf('border-radius: calc(%s + %s);', esc_attr($border_radius), $default_padding);
            }
        }
    }
    // Add color styles.
    $has_text_color = !empty($attributes['style']['color']['text']);
    if ($has_text_color) {
        $button_styles[] = sprintf('color: %s;', $attributes['style']['color']['text']);
    }
    $has_background_color = !empty($attributes['style']['color']['background']);
    if ($has_background_color) {
        $button_styles[] = sprintf('background-color: %s;', $attributes['style']['color']['background']);
    }
    $has_custom_gradient = !empty($attributes['style']['color']['gradient']);
    if ($has_custom_gradient) {
        $button_styles[] = sprintf('background: %s;', $attributes['style']['color']['gradient']);
    }
    // Get typography styles to be shared across inner elements.
    $typography_styles = esc_attr(get_typography_styles_for_block_core_search($attributes));
    if (!empty($typography_styles)) {
        $label_styles[] = $typography_styles;
        $button_styles[] = $typography_styles;
        $input_styles[] = $typography_styles;
    }
    // Typography text-decoration is only applied to the label and button.
    if (!empty($attributes['style']['typography']['textDecoration'])) {
        $text_decoration_value = sprintf('text-decoration: %s;', esc_attr($attributes['style']['typography']['textDecoration']));
        $button_styles[] = $text_decoration_value;
        // Input opts out of text decoration.
        if ($show_label) {
            $label_styles[] = $text_decoration_value;
        }
    }
    return array('input' => (!empty($input_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $input_styles)))) : '', 'button' => (!empty($button_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $button_styles)))) : '', 'wrapper' => (!empty($wrapper_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $wrapper_styles)))) : '', 'label' => (!empty($label_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $label_styles)))) : '');
}

WordPress Version: 9.5

/**
 * Builds an array of inline styles for the search block.
 *
 * The result will contain one entry for shared styles such as those for the
 * inner input or button and a second for the inner wrapper should the block
 * be positioning the button "inside".
 *
 * @param  array $attributes The block attributes.
 *
 * @return array Style HTML attribute.
 */
function styles_for_block_core_search($attributes)
{
    $wrapper_styles = array();
    $button_styles = array();
    $input_styles = array();
    // Add width styles.
    $has_width = !empty($attributes['width']) && !empty($attributes['widthUnit']);
    $button_only = !empty($attributes['buttonPosition']) && 'button-only' === $attributes['buttonPosition'];
    if ($has_width && !$button_only) {
        $wrapper_styles[] = sprintf('width: %d%s;', esc_attr($attributes['width']), esc_attr($attributes['widthUnit']));
    }
    // Add border radius styles.
    $has_border_radius = !empty($attributes['style']['border']['radius']);
    if ($has_border_radius) {
        $default_padding = '4px';
        $border_radius = $attributes['style']['border']['radius'];
        // Apply wrapper border radius if button placed inside.
        $is_button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
        if (is_array($border_radius)) {
            // Apply styles for individual corner border radii.
            foreach ($border_radius as $key => $value) {
                if (null !== $value) {
                    // Convert camelCase key to kebab-case.
                    $name = strtolower(preg_replace('/(?<!^)[A-Z]/', '-$0', $key));
                    // Add shared styles for individual border radii for input & button.
                    $border_style = sprintf('border-%s-radius: %s;', esc_attr($name), esc_attr($value));
                    $input_styles[] = $border_style;
                    $button_styles[] = $border_style;
                    // Add adjusted border radius styles for the wrapper element
                    // if button is positioned inside.
                    if ($is_button_inside && intval($value) !== 0) {
                        $wrapper_styles[] = sprintf('border-%s-radius: calc(%s + %s);', esc_attr($name), esc_attr($value), $default_padding);
                    }
                }
            }
        } else {
            // Numeric check is for backwards compatibility purposes.
            $border_radius = is_numeric($border_radius) ? $border_radius . 'px' : $border_radius;
            $border_style = sprintf('border-radius: %s;', esc_attr($border_radius));
            $input_styles[] = $border_style;
            $button_styles[] = $border_style;
            if ($is_button_inside && intval($border_radius) !== 0) {
                // Adjust wrapper border radii to maintain visual consistency
                // with inner elements when button is positioned inside.
                $wrapper_styles[] = sprintf('border-radius: calc(%s + %s);', esc_attr($border_radius), $default_padding);
            }
        }
    }
    // Add border color styles.
    $has_border_color = !empty($attributes['style']['border']['color']);
    if ($has_border_color) {
        $border_color = $attributes['style']['border']['color'];
        $is_button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
        // Apply wrapper border color if button placed inside.
        if ($is_button_inside) {
            $wrapper_styles[] = sprintf('border-color: %s;', esc_attr($border_color));
        } else {
            $button_styles[] = sprintf('border-color: %s;', esc_attr($border_color));
            $input_styles[] = sprintf('border-color: %s;', esc_attr($border_color));
        }
    }
    // Add color styles.
    $has_text_color = !empty($attributes['style']['color']['text']);
    if ($has_text_color) {
        $button_styles[] = sprintf('color: %s;', $attributes['style']['color']['text']);
    }
    $has_background_color = !empty($attributes['style']['color']['background']);
    if ($has_background_color) {
        $button_styles[] = sprintf('background-color: %s;', $attributes['style']['color']['background']);
    }
    $has_custom_gradient = !empty($attributes['style']['color']['gradient']);
    if ($has_custom_gradient) {
        $button_styles[] = sprintf('background: %s;', $attributes['style']['color']['gradient']);
    }
    return array('input' => (!empty($input_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $input_styles)))) : '', 'button' => (!empty($button_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $button_styles)))) : '', 'wrapper' => (!empty($wrapper_styles)) ? sprintf(' style="%s"', esc_attr(safecss_filter_attr(implode(' ', $wrapper_styles)))) : '');
}

WordPress Version: 5.9

/**
 * Builds an array of inline styles for the search block.
 *
 * The result will contain one entry for shared styles such as those for the
 * inner input or button and a second for the inner wrapper should the block
 * be positioning the button "inside".
 *
 * @param  array $attributes The block attributes.
 *
 * @return array Style HTML attribute.
 */
function styles_for_block_core_search($attributes)
{
    $wrapper_styles = array();
    $button_styles = array();
    $input_styles = array();
    // Add width styles.
    $has_width = !empty($attributes['width']) && !empty($attributes['widthUnit']);
    $button_only = !empty($attributes['buttonPosition']) && 'button-only' === $attributes['buttonPosition'];
    if ($has_width && !$button_only) {
        $wrapper_styles[] = sprintf('width: %d%s;', esc_attr($attributes['width']), esc_attr($attributes['widthUnit']));
    }
    // Add border radius styles.
    $has_border_radius = !empty($attributes['style']['border']['radius']);
    if ($has_border_radius) {
        $default_padding = '4px';
        $border_radius = $attributes['style']['border']['radius'];
        // Apply wrapper border radius if button placed inside.
        $is_button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
        if (is_array($border_radius)) {
            // Apply styles for individual corner border radii.
            foreach ($border_radius as $key => $value) {
                if (null !== $value) {
                    // Convert camelCase key to kebab-case.
                    $name = strtolower(preg_replace('/(?<!^)[A-Z]/', '-$0', $key));
                    // Add shared styles for individual border radii for input & button.
                    $border_style = sprintf('border-%s-radius: %s;', esc_attr($name), esc_attr($value));
                    $input_styles[] = $border_style;
                    $button_styles[] = $border_style;
                    // Add adjusted border radius styles for the wrapper element
                    // if button is positioned inside.
                    if ($is_button_inside && intval($value) !== 0) {
                        $wrapper_styles[] = sprintf('border-%s-radius: calc(%s + %s);', esc_attr($name), esc_attr($value), $default_padding);
                    }
                }
            }
        } else {
            // Numeric check is for backwards compatibility purposes.
            $border_radius = is_numeric($border_radius) ? $border_radius . 'px' : $border_radius;
            $border_style = sprintf('border-radius: %s;', esc_attr($border_radius));
            $input_styles[] = $border_style;
            $button_styles[] = $border_style;
            if ($is_button_inside && intval($border_radius) !== 0) {
                // Adjust wrapper border radii to maintain visual consistency
                // with inner elements when button is positioned inside.
                $wrapper_styles[] = sprintf('border-radius: calc(%s + %s);', esc_attr($border_radius), $default_padding);
            }
        }
    }
    // Add border color styles.
    $has_border_color = !empty($attributes['style']['border']['color']);
    if ($has_border_color) {
        $border_color = $attributes['style']['border']['color'];
        $is_button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
        // Apply wrapper border color if button placed inside.
        if ($is_button_inside) {
            $wrapper_styles[] = sprintf('border-color: %s;', esc_attr($border_color));
        } else {
            $button_styles[] = sprintf('border-color: %s;', esc_attr($border_color));
            $input_styles[] = sprintf('border-color: %s;', esc_attr($border_color));
        }
    }
    // Add color styles.
    $has_text_color = !empty($attributes['style']['color']['text']);
    if ($has_text_color) {
        $button_styles[] = sprintf('color: %s;', esc_attr($attributes['style']['color']['text']));
    }
    $has_background_color = !empty($attributes['style']['color']['background']);
    if ($has_background_color) {
        $button_styles[] = sprintf('background-color: %s;', esc_attr($attributes['style']['color']['background']));
    }
    $has_custom_gradient = !empty($attributes['style']['color']['gradient']);
    if ($has_custom_gradient) {
        $button_styles[] = sprintf('background: %s;', $attributes['style']['color']['gradient']);
    }
    return array('input' => (!empty($input_styles)) ? sprintf(' style="%s"', safecss_filter_attr(implode(' ', $input_styles))) : '', 'button' => (!empty($button_styles)) ? sprintf(' style="%s"', safecss_filter_attr(implode(' ', $button_styles))) : '', 'wrapper' => (!empty($wrapper_styles)) ? sprintf(' style="%s"', safecss_filter_attr(implode(' ', $wrapper_styles))) : '');
}

WordPress Version: 5.8

/**
 * Builds an array of inline styles for the search block.
 *
 * The result will contain one entry for shared styles such as those for the
 * inner input or button and a second for the inner wrapper should the block
 * be positioning the button "inside".
 *
 * @param  array $attributes The block attributes.
 *
 * @return array Style HTML attribute.
 */
function styles_for_block_core_search($attributes)
{
    $shared_styles = array();
    $wrapper_styles = array();
    // Add width styles.
    $has_width = !empty($attributes['width']) && !empty($attributes['widthUnit']);
    $button_only = !empty($attributes['buttonPosition']) && 'button-only' === $attributes['buttonPosition'];
    if ($has_width && !$button_only) {
        $wrapper_styles[] = sprintf('width: %d%s;', esc_attr($attributes['width']), esc_attr($attributes['widthUnit']));
    }
    // Add border radius styles.
    $has_border_radius = !empty($attributes['style']['border']['radius']);
    if ($has_border_radius) {
        // Shared style for button and input radius values.
        $border_radius = $attributes['style']['border']['radius'];
        $shared_styles[] = sprintf('border-radius: %spx;', esc_attr($border_radius));
        // Apply wrapper border radius if button placed inside.
        $button_inside = !empty($attributes['buttonPosition']) && 'button-inside' === $attributes['buttonPosition'];
        if ($button_inside) {
            // We adjust the border radius value for the outer wrapper element
            // to make it visually consistent with the radius applied to inner
            // elements.
            $default_padding = 4;
            $adjusted_radius = $border_radius + $default_padding;
            $wrapper_styles[] = sprintf('border-radius: %dpx;', esc_attr($adjusted_radius));
        }
    }
    return array('shared' => (!empty($shared_styles)) ? sprintf(' style="%s"', implode(' ', $shared_styles)) : '', 'wrapper' => (!empty($wrapper_styles)) ? sprintf(' style="%s"', implode(' ', $wrapper_styles)) : '');
}