[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      $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  }