search.php (6726B)
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 * @param array $attributes The block attributes. 12 * 13 * @return string The search block markup. 14 */ 15 function render_block_core_search( $attributes ) { 16 static $instance_id = 0; 17 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-block-search__input-' . ++$instance_id; 31 $classnames = 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 $inline_styles = styles_for_block_core_search( $attributes ); 40 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 } 55 } 56 57 if ( $show_input ) { 58 $input_markup = sprintf( 59 '<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />', 60 $input_id, 61 esc_attr( get_search_query() ), 62 esc_attr( $attributes['placeholder'] ), 63 $inline_styles['shared'] 64 ); 65 } 66 67 if ( $show_button ) { 68 $button_internal_markup = ''; 69 $button_classes = ''; 70 71 if ( ! $use_icon_button ) { 72 if ( ! empty( $attributes['buttonText'] ) ) { 73 $button_internal_markup = $attributes['buttonText']; 74 } 75 } else { 76 $button_classes .= 'has-icon'; 77 $button_internal_markup = 78 '<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> 80 </svg>'; 81 } 82 83 $button_markup = sprintf( 84 '<button type="submit" class="wp-block-search__button %s"%s>%s</button>', 85 $button_classes, 86 $inline_styles['shared'], 87 $button_internal_markup 88 ); 89 } 90 91 $field_markup = sprintf( 92 '<div class="wp-block-search__inside-wrapper"%s>%s</div>', 93 $inline_styles['wrapper'], 94 $input_markup . $button_markup 95 ); 96 $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); 97 98 return sprintf( 99 '<form role="search" method="get" action="%s" %s>%s</form>', 100 esc_url( home_url( '/' ) ), 101 $wrapper_attributes, 102 $label_markup . $field_markup 103 ); 104 } 105 106 /** 107 * Registers the `core/search` block on the server. 108 */ 109 function register_block_core_search() { 110 register_block_type_from_metadata( 111 __DIR__ . '/search', 112 array( 113 'render_callback' => 'render_block_core_search', 114 ) 115 ); 116 } 117 add_action( 'init', 'register_block_core_search' ); 118 119 /** 120 * Builds the correct top level classnames for the 'core/search' block. 121 * 122 * @param array $attributes The block attributes. 123 * 124 * @return string The classnames used in the block. 125 */ 126 function classnames_for_block_core_search( $attributes ) { 127 $classnames = array(); 128 129 if ( ! empty( $attributes['buttonPosition'] ) ) { 130 if ( 'button-inside' === $attributes['buttonPosition'] ) { 131 $classnames[] = 'wp-block-search__button-inside'; 132 } 133 134 if ( 'button-outside' === $attributes['buttonPosition'] ) { 135 $classnames[] = 'wp-block-search__button-outside'; 136 } 137 138 if ( 'no-button' === $attributes['buttonPosition'] ) { 139 $classnames[] = 'wp-block-search__no-button'; 140 } 141 142 if ( 'button-only' === $attributes['buttonPosition'] ) { 143 $classnames[] = 'wp-block-search__button-only'; 144 } 145 } 146 147 if ( isset( $attributes['buttonUseIcon'] ) ) { 148 if ( ! empty( $attributes['buttonPosition'] ) && 'no-button' !== $attributes['buttonPosition'] ) { 149 if ( $attributes['buttonUseIcon'] ) { 150 $classnames[] = 'wp-block-search__icon-button'; 151 } else { 152 $classnames[] = 'wp-block-search__text-button'; 153 } 154 } 155 } 156 157 return implode( ' ', $classnames ); 158 } 159 160 /** 161 * Builds an array of inline styles for the search block. 162 * 163 * The result will contain one entry for shared styles such as those for the 164 * inner input or button and a second for the inner wrapper should the block 165 * be positioning the button "inside". 166 * 167 * @param array $attributes The block attributes. 168 * 169 * @return array Style HTML attribute. 170 */ 171 function styles_for_block_core_search( $attributes ) { 172 $shared_styles = array(); 173 $wrapper_styles = array(); 174 175 // Add width styles. 176 $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] ); 177 $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition']; 178 179 if ( $has_width && ! $button_only ) { 180 $wrapper_styles[] = sprintf( 181 'width: %d%s;', 182 esc_attr( $attributes['width'] ), 183 esc_attr( $attributes['widthUnit'] ) 184 ); 185 } 186 187 // Add border radius styles. 188 $has_border_radius = ! empty( $attributes['style']['border']['radius'] ); 189 190 if ( $has_border_radius ) { 191 // Shared style for button and input radius values. 192 $border_radius = $attributes['style']['border']['radius']; 193 $shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) ); 194 195 // Apply wrapper border radius if button placed inside. 196 $button_inside = ! empty( $attributes['buttonPosition'] ) && 197 'button-inside' === $attributes['buttonPosition']; 198 199 if ( $button_inside ) { 200 // We adjust the border radius value for the outer wrapper element 201 // to make it visually consistent with the radius applied to inner 202 // elements. 203 $default_padding = 4; 204 $adjusted_radius = $border_radius + $default_padding; 205 $wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) ); 206 } 207 } 208 209 return array( 210 'shared' => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '', 211 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '', 212 ); 213 }