[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-includes/block-supports/ -> typography.php (source)

   1  <?php
   2  /**
   3   * Typography block support flag.
   4   *
   5   * @package WordPress
   6   * @since 5.6.0
   7   */
   8  
   9  /**
  10   * Registers the style and typography block attributes for block types that support it.
  11   *
  12   * @since 5.6.0
  13   * @access private
  14   *
  15   * @param WP_Block_Type $block_type Block Type.
  16   */
  17  function wp_register_typography_support( $block_type ) {
  18      if ( ! property_exists( $block_type, 'supports' ) ) {
  19          return;
  20      }
  21  
  22      $has_font_size_support       = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
  23      $has_font_style_support      = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
  24      $has_font_weight_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
  25      $has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
  26      $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
  27      $has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
  28  
  29      $has_typography_support = $has_font_size_support
  30          || $has_font_weight_support
  31          || $has_font_style_support
  32          || $has_line_height_support
  33          || $has_text_transform_support
  34          || $has_text_decoration_support;
  35  
  36      if ( ! $block_type->attributes ) {
  37          $block_type->attributes = array();
  38      }
  39  
  40      if ( $has_typography_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
  41          $block_type->attributes['style'] = array(
  42              'type' => 'object',
  43          );
  44      }
  45  
  46      if ( $has_font_size_support && ! array_key_exists( 'fontSize', $block_type->attributes ) ) {
  47          $block_type->attributes['fontSize'] = array(
  48              'type' => 'string',
  49          );
  50      }
  51  }
  52  
  53  /**
  54   * Add CSS classes and inline styles for typography features such as font sizes
  55   * to the incoming attributes array. This will be applied to the block markup in
  56   * the front-end.
  57   *
  58   * @since 5.6.0
  59   * @access private
  60   *
  61   * @param  WP_Block_Type $block_type       Block type.
  62   * @param  array         $block_attributes Block attributes.
  63   *
  64   * @return array Typography CSS classes and inline styles.
  65   */
  66  function wp_apply_typography_support( $block_type, $block_attributes ) {
  67      if ( ! property_exists( $block_type, 'supports' ) ) {
  68          return array();
  69      }
  70  
  71      $classes = array();
  72      $styles  = array();
  73  
  74      $has_font_family_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontFamily' ), false );
  75      $has_font_style_support      = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
  76      $has_font_weight_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
  77      $has_font_size_support       = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
  78      $has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
  79      $has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
  80      $has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
  81  
  82      // Font Size.
  83      if ( $has_font_size_support ) {
  84          $has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
  85          $has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
  86  
  87          // Apply required class or style.
  88          if ( $has_named_font_size ) {
  89              $classes[] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] );
  90          } elseif ( $has_custom_font_size ) {
  91              $styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] );
  92          }
  93      }
  94  
  95      // Font Family.
  96      if ( $has_font_family_support ) {
  97          $has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );
  98          // Apply required class and style.
  99          if ( $has_font_family ) {
 100              $font_family = $block_attributes['style']['typography']['fontFamily'];
 101              if ( strpos( $font_family, 'var:preset|font-family' ) !== false ) {
 102                  // Get the name from the string and add proper styles.
 103                  $index_to_splice  = strrpos( $font_family, '|' ) + 1;
 104                  $font_family_name = substr( $font_family, $index_to_splice );
 105                  $styles[]         = sprintf( 'font-family: var(--wp--preset--font-family--%s);', $font_family_name );
 106              } else {
 107                  $styles[] = sprintf( 'font-family: %s;', $block_attributes['style']['color']['fontFamily'] );
 108              }
 109          }
 110      }
 111  
 112      // Font style.
 113      if ( $has_font_style_support ) {
 114          // Apply font style.
 115          $font_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
 116          if ( $font_style ) {
 117              $styles[] = $font_style;
 118          }
 119      }
 120  
 121      // Font weight.
 122      if ( $has_font_weight_support ) {
 123          // Apply font weight.
 124          $font_weight = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
 125          if ( $font_weight ) {
 126              $styles[] = $font_weight;
 127          }
 128      }
 129  
 130      // Line Height.
 131      if ( $has_line_height_support ) {
 132          $has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
 133          // Add the style (no classes for line-height).
 134          if ( $has_line_height ) {
 135              $styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
 136          }
 137      }
 138  
 139      // Text Decoration.
 140      if ( $has_text_decoration_support ) {
 141          $text_decoration_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
 142          if ( $text_decoration_style ) {
 143              $styles[] = $text_decoration_style;
 144          }
 145      }
 146  
 147      // Text Transform.
 148      if ( $has_text_transform_support ) {
 149          $text_transform_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
 150          if ( $text_transform_style ) {
 151              $styles[] = $text_transform_style;
 152          }
 153      }
 154  
 155      $attributes = array();
 156      if ( ! empty( $classes ) ) {
 157          $attributes['class'] = implode( ' ', $classes );
 158      }
 159      if ( ! empty( $styles ) ) {
 160          $attributes['style'] = implode( ' ', $styles );
 161      }
 162  
 163      return $attributes;
 164  }
 165  
 166  /**
 167   * Generates an inline style for a typography feature e.g. text decoration,
 168   * text transform, and font style.
 169   *
 170   * @since 5.8.0
 171   * @access private
 172   *
 173   * @param array  $attributes   Block's attributes.
 174   * @param string $feature      Key for the feature within the typography styles.
 175   * @param string $css_property Slug for the CSS property the inline style sets.
 176   *
 177   * @return string              CSS inline style.
 178   */
 179  function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
 180      // Retrieve current attribute value or skip if not found.
 181      $style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
 182      if ( ! $style_value ) {
 183          return;
 184      }
 185  
 186      // If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
 187      if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
 188          return sprintf( '%s:%s;', $css_property, $style_value );
 189      }
 190  
 191      // We have a preset CSS variable as the style.
 192      // Get the style value from the string and return CSS style.
 193      $index_to_splice = strrpos( $style_value, '|' ) + 1;
 194      $slug            = substr( $style_value, $index_to_splice );
 195  
 196      // Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
 197      return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
 198  }
 199  
 200  // Register the block support.
 201  WP_Block_Supports::get_instance()->register(
 202      'typography',
 203      array(
 204          'register_attribute' => 'wp_register_typography_support',
 205          'apply'              => 'wp_apply_typography_support',
 206      )
 207  );


Generated: Wed Apr 21 01:00:05 2021 Cross-referenced by PHPXref 0.7.1