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 $label_markup = ''; |
31 $classnames = classnames_for_block_core_search( $attributes ); |
32 $button_markup = ''; |
32 $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false; |
33 |
33 $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false; |
34 if ( ! empty( $attributes['label'] ) ) { |
34 $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true; |
35 $label_markup = sprintf( |
35 $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true; |
36 '<label for="%s" class="wp-block-search__label">%s</label>', |
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 />', |
37 $input_id, |
60 $input_id, |
38 $attributes['label'] |
61 esc_attr( get_search_query() ), |
|
62 esc_attr( $attributes['placeholder'] ), |
|
63 $inline_styles['shared'] |
39 ); |
64 ); |
40 } else { |
65 } |
41 $label_markup = sprintf( |
66 |
42 '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>', |
67 if ( $show_button ) { |
43 $input_id, |
68 $button_internal_markup = ''; |
44 __( 'Search' ) |
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 |
45 ); |
88 ); |
46 } |
89 } |
47 |
90 |
48 $input_markup = sprintf( |
91 $field_markup = sprintf( |
49 '<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" required />', |
92 '<div class="wp-block-search__inside-wrapper"%s>%s</div>', |
50 $input_id, |
93 $inline_styles['wrapper'], |
51 esc_attr( get_search_query() ), |
94 $input_markup . $button_markup |
52 esc_attr( $attributes['placeholder'] ) |
95 ); |
53 ); |
96 $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); |
54 |
|
55 if ( ! empty( $attributes['buttonText'] ) ) { |
|
56 $button_markup = sprintf( |
|
57 '<button type="submit" class="wp-block-search__button">%s</button>', |
|
58 $attributes['buttonText'] |
|
59 ); |
|
60 } |
|
61 |
|
62 $class = 'wp-block-search'; |
|
63 if ( isset( $attributes['className'] ) ) { |
|
64 $class .= ' ' . $attributes['className']; |
|
65 } |
|
66 if ( isset( $attributes['align'] ) ) { |
|
67 $class .= ' align' . $attributes['align']; |
|
68 } |
|
69 |
97 |
70 return sprintf( |
98 return sprintf( |
71 '<form class="%s" role="search" method="get" action="%s">%s</form>', |
99 '<form role="search" method="get" action="%s" %s>%s</form>', |
72 esc_attr( $class ), |
|
73 esc_url( home_url( '/' ) ), |
100 esc_url( home_url( '/' ) ), |
74 $label_markup . $input_markup . $button_markup |
101 $wrapper_attributes, |
|
102 $label_markup . $field_markup |
75 ); |
103 ); |
76 } |
104 } |
77 |
105 |
78 /** |
106 /** |
79 * Registers the `core/search` block on the server. |
107 * Registers the `core/search` block on the server. |
85 'render_callback' => 'render_block_core_search', |
113 'render_callback' => 'render_block_core_search', |
86 ) |
114 ) |
87 ); |
115 ); |
88 } |
116 } |
89 add_action( 'init', 'register_block_core_search' ); |
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 } |