Keine Beschreibung

search.php 6.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <?php
  2. /**
  3. * Server-side rendering of the `core/search` block.
  4. *
  5. * @package WordPress
  6. */
  7. /**
  8. * Dynamically renders the `core/search` block.
  9. *
  10. * @param array $attributes The block attributes.
  11. *
  12. * @return string The search block markup.
  13. */
  14. function render_block_core_search( $attributes ) {
  15. static $instance_id = 0;
  16. // Older versions of the Search block defaulted the label and buttonText
  17. // attributes to `__( 'Search' )` meaning that many posts contain `<!--
  18. // wp:search /-->`. Support these by defaulting an undefined label and
  19. // buttonText to `__( 'Search' )`.
  20. $attributes = wp_parse_args(
  21. $attributes,
  22. array(
  23. 'label' => __( 'Search' ),
  24. 'buttonText' => __( 'Search' ),
  25. )
  26. );
  27. $input_id = 'wp-block-search__input-' . ++$instance_id;
  28. $classnames = classnames_for_block_core_search( $attributes );
  29. $show_label = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
  30. $use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
  31. $show_input = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
  32. $show_button = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
  33. $label_markup = '';
  34. $input_markup = '';
  35. $button_markup = '';
  36. $inline_styles = styles_for_block_core_search( $attributes );
  37. if ( $show_label ) {
  38. if ( ! empty( $attributes['label'] ) ) {
  39. $label_markup = sprintf(
  40. '<label for="%s" class="wp-block-search__label">%s</label>',
  41. $input_id,
  42. $attributes['label']
  43. );
  44. } else {
  45. $label_markup = sprintf(
  46. '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>',
  47. $input_id,
  48. __( 'Search' )
  49. );
  50. }
  51. }
  52. if ( $show_input ) {
  53. $input_markup = sprintf(
  54. '<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />',
  55. $input_id,
  56. esc_attr( get_search_query() ),
  57. esc_attr( $attributes['placeholder'] ),
  58. $inline_styles['shared']
  59. );
  60. }
  61. if ( $show_button ) {
  62. $button_internal_markup = '';
  63. $button_classes = '';
  64. if ( ! $use_icon_button ) {
  65. if ( ! empty( $attributes['buttonText'] ) ) {
  66. $button_internal_markup = $attributes['buttonText'];
  67. }
  68. } else {
  69. $button_classes .= 'has-icon';
  70. $button_internal_markup =
  71. '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
  72. <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>
  73. </svg>';
  74. }
  75. $button_markup = sprintf(
  76. '<button type="submit" class="wp-block-search__button %s"%s>%s</button>',
  77. $button_classes,
  78. $inline_styles['shared'],
  79. $button_internal_markup
  80. );
  81. }
  82. $field_markup = sprintf(
  83. '<div class="wp-block-search__inside-wrapper"%s>%s</div>',
  84. $inline_styles['wrapper'],
  85. $input_markup . $button_markup
  86. );
  87. $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
  88. return sprintf(
  89. '<form role="search" method="get" action="%s" %s>%s</form>',
  90. esc_url( home_url( '/' ) ),
  91. $wrapper_attributes,
  92. $label_markup . $field_markup
  93. );
  94. }
  95. /**
  96. * Registers the `core/search` block on the server.
  97. */
  98. function register_block_core_search() {
  99. register_block_type_from_metadata(
  100. __DIR__ . '/search',
  101. array(
  102. 'render_callback' => 'render_block_core_search',
  103. )
  104. );
  105. }
  106. add_action( 'init', 'register_block_core_search' );
  107. /**
  108. * Builds the correct top level classnames for the 'core/search' block.
  109. *
  110. * @param array $attributes The block attributes.
  111. *
  112. * @return string The classnames used in the block.
  113. */
  114. function classnames_for_block_core_search( $attributes ) {
  115. $classnames = array();
  116. if ( ! empty( $attributes['buttonPosition'] ) ) {
  117. if ( 'button-inside' === $attributes['buttonPosition'] ) {
  118. $classnames[] = 'wp-block-search__button-inside';
  119. }
  120. if ( 'button-outside' === $attributes['buttonPosition'] ) {
  121. $classnames[] = 'wp-block-search__button-outside';
  122. }
  123. if ( 'no-button' === $attributes['buttonPosition'] ) {
  124. $classnames[] = 'wp-block-search__no-button';
  125. }
  126. if ( 'button-only' === $attributes['buttonPosition'] ) {
  127. $classnames[] = 'wp-block-search__button-only';
  128. }
  129. }
  130. if ( isset( $attributes['buttonUseIcon'] ) ) {
  131. if ( ! empty( $attributes['buttonPosition'] ) && 'no-button' !== $attributes['buttonPosition'] ) {
  132. if ( $attributes['buttonUseIcon'] ) {
  133. $classnames[] = 'wp-block-search__icon-button';
  134. } else {
  135. $classnames[] = 'wp-block-search__text-button';
  136. }
  137. }
  138. }
  139. return implode( ' ', $classnames );
  140. }
  141. /**
  142. * Builds an array of inline styles for the search block.
  143. *
  144. * The result will contain one entry for shared styles such as those for the
  145. * inner input or button and a second for the inner wrapper should the block
  146. * be positioning the button "inside".
  147. *
  148. * @param array $attributes The block attributes.
  149. *
  150. * @return array Style HTML attribute.
  151. */
  152. function styles_for_block_core_search( $attributes ) {
  153. $shared_styles = array();
  154. $wrapper_styles = array();
  155. // Add width styles.
  156. $has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
  157. $button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
  158. if ( $has_width && ! $button_only ) {
  159. $wrapper_styles[] = sprintf(
  160. 'width: %d%s;',
  161. esc_attr( $attributes['width'] ),
  162. esc_attr( $attributes['widthUnit'] )
  163. );
  164. }
  165. // Add border radius styles.
  166. $has_border_radius = ! empty( $attributes['style']['border']['radius'] );
  167. if ( $has_border_radius ) {
  168. // Shared style for button and input radius values.
  169. $border_radius = $attributes['style']['border']['radius'];
  170. $shared_styles[] = sprintf( 'border-radius: %spx;', esc_attr( $border_radius ) );
  171. // Apply wrapper border radius if button placed inside.
  172. $button_inside = ! empty( $attributes['buttonPosition'] ) &&
  173. 'button-inside' === $attributes['buttonPosition'];
  174. if ( $button_inside ) {
  175. // We adjust the border radius value for the outer wrapper element
  176. // to make it visually consistent with the radius applied to inner
  177. // elements.
  178. $default_padding = 4;
  179. $adjusted_radius = $border_radius + $default_padding;
  180. $wrapper_styles[] = sprintf( 'border-radius: %dpx;', esc_attr( $adjusted_radius ) );
  181. }
  182. }
  183. return array(
  184. 'shared' => ! empty( $shared_styles ) ? sprintf( ' style="%s"', implode( ' ', $shared_styles ) ) : '',
  185. 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', implode( ' ', $wrapper_styles ) ) : '',
  186. );
  187. }