gutenberg / lib / block-supports / typography.php

typography.php in Gutenberg 9.8.0, at lib/block-supports/typography.php

198 lines 7.4 KB

Raw Download Zip

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