[Summary view] [Print] [Text view]

   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      $width_styles    = '';
  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" required />',
  60              $input_id,
  61              esc_attr( get_search_query() ),
  62              esc_attr( $attributes['placeholder'] )
  63          );
  64      }
  65  
  66      if ( $show_button ) {
  67          $button_internal_markup = '';
  68          $button_classes         = '';
  69  
  70          if ( ! $use_icon_button ) {
  71              if ( ! empty( $attributes['buttonText'] ) ) {
  72                  $button_internal_markup = $attributes['buttonText'];
  73              }
  74          } else {
  75              $button_classes        .= 'has-icon';
  76              $button_internal_markup =
  77                  '<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
  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>
  79                  </svg>';
  80          }
  81  
  82          $button_markup = sprintf(
  83              '<button type="submit"class="wp-block-search__button ' . $button_classes . '">%s</button>',
  84              $button_internal_markup
  85          );
  86      }
  87  
  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,
  97          $input_markup . $button_markup
  98      );
  99      $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 100  
 101      return sprintf(
 102          '<form role="search" method="get" action="%s" %s>%s</form>',
 103          esc_url( home_url( '/' ) ),
 104          $wrapper_attributes,
 105          $label_markup . $field_markup
 106      );
 107  }
 108  
 109  /**
 110   * Registers the `core/search` block on the server.
 111   */
 112  function register_block_core_search() {
 113      register_block_type_from_metadata(
 114          __DIR__ . '/search',
 115          array(
 116              'render_callback' => 'render_block_core_search',
 117          )
 118      );
 119  }
 120  add_action( 'init', 'register_block_core_search' );
 121  
 122  /**
 123   * Builds the correct top level classnames for the 'core/search' block.
 124   *
 125   * @param array $attributes The block attributes.
 126   *
 127   * @return string The classnames used in the block.
 128   */
 129  function classnames_for_block_core_search( $attributes ) {
 130      $classnames = array();
 131  
 132      if ( ! empty( $attributes['buttonPosition'] ) ) {
 133          if ( 'button-inside' === $attributes['buttonPosition'] ) {
 134              $classnames[] = 'wp-block-search__button-inside';
 135          }
 136  
 137          if ( 'button-outside' === $attributes['buttonPosition'] ) {
 138              $classnames[] = 'wp-block-search__button-outside';
 139          }
 140  
 141          if ( 'no-button' === $attributes['buttonPosition'] ) {
 142              $classnames[] = 'wp-block-search__no-button';
 143          }
 144  
 145          if ( 'button-only' === $attributes['buttonPosition'] ) {
 146              $classnames[] = 'wp-block-search__button-only';
 147          }
 148      }
 149  
 150      if ( isset( $attributes['buttonUseIcon'] ) ) {
 151          if ( ! empty( $attributes['buttonPosition'] ) && 'no-button' !== $attributes['buttonPosition'] ) {
 152              if ( $attributes['buttonUseIcon'] ) {
 153                  $classnames[] = 'wp-block-search__icon-button';
 154              } else {
 155                  $classnames[] = 'wp-block-search__text-button';
 156              }
 157          }
 158      }
 159  
 160      return implode( ' ', $classnames );
 161  }