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