[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Server-side rendering of the `core/gallery` block.
   4   *
   5   * @package WordPress
   6   */
   7  
   8  /**
   9   * Handles backwards compatibility for Gallery Blocks,
  10   * whose images feature a `data-id` attribute.
  11   *
  12   * Now that the Gallery Block contains inner Image Blocks,
  13   * we add a custom `data-id` attribute before rendering the gallery
  14   * so that the Image Block can pick it up in its render_callback.
  15   *
  16   * @param array $parsed_block The block being rendered.
  17   * @return array The migrated block object.
  18   */
  19  function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
  20      if ( 'core/gallery' === $parsed_block['blockName'] ) {
  21          foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) {
  22              if ( 'core/image' === $inner_block['blockName'] ) {
  23                  if ( ! isset( $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] ) && isset( $inner_block['attrs']['id'] ) ) {
  24                      $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] );
  25                  }
  26              }
  27          }
  28      }
  29  
  30      return $parsed_block;
  31  }
  32  
  33  add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
  34  
  35  /**
  36   * Adds a style tag for the --wp--style--unstable-gallery-gap var.
  37   *
  38   * The Gallery block needs to recalculate Image block width based on
  39   * the current gap setting in order to maintain the number of flex columns
  40   * so a css var is added to allow this.
  41   *
  42   * @param array  $attributes Attributes of the block being rendered.
  43   * @param string $content Content of the block being rendered.
  44   * @return string The content of the block being rendered.
  45   */
  46  function block_core_gallery_render( $attributes, $content ) {
  47      $gap = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
  48      // Skip if gap value contains unsupported characters.
  49      // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
  50      // because we only want to match against the value, not the CSS attribute.
  51      $gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
  52      $class   = wp_unique_id( 'wp-block-gallery-' );
  53      $content = preg_replace(
  54          '/' . preg_quote( 'class="', '/' ) . '/',
  55          'class="' . $class . ' ',
  56          $content,
  57          1
  58      );
  59      // --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
  60      // gap on the gallery.
  61      $gap_value = $gap ? $gap : 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
  62      $style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; gap: ' . $gap_value . '}';
  63      // Ideally styles should be loaded in the head, but blocks may be parsed
  64      // after that, so loading in the footer for now.
  65      // See https://core.trac.wordpress.org/ticket/53494.
  66      add_action(
  67          'wp_footer',
  68          function () use ( $style ) {
  69              echo '<style> ' . $style . '</style>';
  70          }
  71      );
  72      return $content;
  73  }
  74  /**
  75   * Registers the `core/gallery` block on server.
  76   */
  77  function register_block_core_gallery() {
  78      register_block_type_from_metadata(
  79          __DIR__ . '/gallery',
  80          array(
  81              'render_callback' => 'block_core_gallery_render',
  82          )
  83      );
  84  }
  85  
  86  add_action( 'init', 'register_block_core_gallery' );