Skip to content

Commit 6da7fe0

Browse files
jorgefilipecostajorgefilipecosta
committed
Extract fontSize logic from paragraph and make fontSizes configurable from editor settings.
1 parent 09db904 commit 6da7fe0

File tree

11 files changed

+283
-65
lines changed

11 files changed

+283
-65
lines changed

‎core-blocks/paragraph/index.js‎

Lines changed: 13 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* External dependencies
33
*/
44
import classnames from 'classnames';
5-
import { isFinite, find, omit } from 'lodash';
5+
import { isFinite, omit } from 'lodash';
66

77
/**
88
* WordPress dependencies
@@ -14,20 +14,22 @@ import {
1414
RawHTML,
1515
} from '@wordpress/element';
1616
import {
17-
FontSizePicker,
1817
PanelBody,
1918
ToggleControl,
2019
withFallbackStyles,
2120
} from '@wordpress/components';
2221
import {
2322
getColorClass,
23+
getFontSizeClass,
2424
withColors,
2525
AlignmentToolbar,
2626
BlockControls,
2727
ContrastChecker,
28+
FontSizePicker,
2829
InspectorControls,
2930
PanelColor,
3031
RichText,
32+
withFontSizes,
3133
} from '@wordpress/editor';
3234
import {
3335
createBlock,
@@ -55,37 +57,12 @@ const FallbackStyles = withFallbackStyles( ( node, ownProps ) => {
5557
};
5658
} );
5759

58-
const FONT_SIZES = [
59-
{
60-
name: 'small',
61-
shortName: 'S',
62-
size: 14,
63-
},
64-
{
65-
name: 'regular',
66-
shortName: 'M',
67-
size: 16,
68-
},
69-
{
70-
name: 'large',
71-
shortName: 'L',
72-
size: 36,
73-
},
74-
{
75-
name: 'larger',
76-
shortName: 'XL',
77-
size: 48,
78-
},
79-
];
80-
8160
class ParagraphBlock extends Component {
8261
constructor() {
8362
super( ...arguments );
8463

8564
this.onReplace = this.onReplace.bind( this );
8665
this.toggleDropCap = this.toggleDropCap.bind( this );
87-
this.getFontSize = this.getFontSize.bind( this );
88-
this.setFontSize = this.setFontSize.bind( this );
8966
this.splitBlock = this.splitBlock.bind( this );
9067
}
9168

@@ -112,36 +89,6 @@ class ParagraphBlock extends Component {
11289
return checked ? __( 'Showing large initial letter.' ) : __( 'Toggle to show a large initial letter.' );
11390
}
11491

115-
getFontSize() {
116-
const { customFontSize, fontSize } = this.props.attributes;
117-
if ( fontSize ) {
118-
const fontSizeObj = find( FONT_SIZES, { name: fontSize } );
119-
if ( fontSizeObj ) {
120-
return fontSizeObj.size;
121-
}
122-
}
123-
124-
if ( customFontSize ) {
125-
return customFontSize;
126-
}
127-
}
128-
129-
setFontSize( fontSizeValue ) {
130-
const { setAttributes } = this.props;
131-
const thresholdFontSize = find( FONT_SIZES, { size: fontSizeValue } );
132-
if ( thresholdFontSize ) {
133-
setAttributes( {
134-
fontSize: thresholdFontSize.name,
135-
customFontSize: undefined,
136-
} );
137-
return;
138-
}
139-
setAttributes( {
140-
fontSize: undefined,
141-
customFontSize: fontSizeValue,
142-
} );
143-
}
144-
14592
/**
14693
* Split handler for RichText value, namely when content is pasted or the
14794
* user presses the Enter key.
@@ -199,6 +146,8 @@ class ParagraphBlock extends Component {
199146
fallbackBackgroundColor,
200147
fallbackTextColor,
201148
fallbackFontSize,
149+
fontSize,
150+
setFontSize,
202151
} = this.props;
203152

204153
const {
@@ -208,8 +157,6 @@ class ParagraphBlock extends Component {
208157
placeholder,
209158
} = attributes;
210159

211-
const fontSize = this.getFontSize();
212-
213160
return (
214161
<Fragment>
215162
<BlockControls>
@@ -223,10 +170,9 @@ class ParagraphBlock extends Component {
223170
<InspectorControls>
224171
<PanelBody title={ __( 'Text Settings' ) } className="blocks-font-size">
225172
<FontSizePicker
226-
fontSizes={ FONT_SIZES }
227173
fallbackFontSize={ fallbackFontSize }
228-
value={ fontSize }
229-
onChange={ this.setFontSize }
174+
value={ fontSize.size }
175+
onChange={ setFontSize }
230176
/>
231177
<ToggleControl
232178
label={ __( 'Drop Cap' ) }
@@ -251,10 +197,10 @@ class ParagraphBlock extends Component {
251197
textColor={ textColor.value }
252198
backgroundColor={ backgroundColor.value }
253199
{ ...{
254-
fontSize,
255200
fallbackBackgroundColor,
256201
fallbackTextColor,
257202
} }
203+
fontSize={ fontSize.size }
258204
/>
259205
</InspectorControls>
260206
<RichText
@@ -264,11 +210,12 @@ class ParagraphBlock extends Component {
264210
'has-drop-cap': dropCap,
265211
[ backgroundColor.class ]: backgroundColor.class,
266212
[ textColor.class ]: textColor.class,
213+
[ fontSize.class ]: fontSize.class,
267214
} ) }
268215
style={ {
269216
backgroundColor: backgroundColor.value,
270217
color: textColor.value,
271-
fontSize: fontSize ? fontSize + 'px' : undefined,
218+
fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
272219
textAlign: align,
273220
} }
274221
value={ content }
@@ -489,6 +436,7 @@ export const settings = {
489436

490437
edit: compose( [
491438
withColors( 'backgroundColor', { textColor: 'color' } ),
439+
withFontSizes( 'fontSize' ),
492440
FallbackStyles,
493441
] )( ParagraphBlock ),
494442

@@ -507,7 +455,7 @@ export const settings = {
507455

508456
const textClass = getColorClass( 'color', textColor );
509457
const backgroundClass = getColorClass( 'background-color', backgroundColor );
510-
const fontSizeClass = fontSize && `is-${ fontSize }-text`;
458+
const fontSizeClass = getFontSizeClass( fontSize );
511459

512460
const className = classnames( {
513461
'has-background': backgroundColor || customBackgroundColor,

‎core-blocks/style.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,19 @@
8585
.has-very-dark-gray-color {
8686
color: #313131;
8787
}
88+
89+
.has-small-font-size {
90+
font-size: 14px;
91+
}
92+
93+
.has-regular-font-size {
94+
font-size: 16px;
95+
}
96+
97+
.has-large-font-size {
98+
font-size: 36px;
99+
}
100+
101+
.has-larger-font-size {
102+
font-size: 48px;
103+
}

‎docs/extensibility/theme-support.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,53 @@ Themes are responsible for creating the classes that apply the colors in differe
9090

9191
The class name is built appending 'has-', followed by the class name *using* kebab case and ending with the context name.
9292

93+
### Block Font Sizes:
94+
95+
Blocks may allow the user to configure the font sizes they use, e.g., the paragraph block. Gutenberg provides a default set of font sizes, but a theme can overwrite it and provide its own:
96+
97+
98+
```php
99+
add_theme_support( 'editor-font-sizes', array(
100+
array(
101+
'name' => __( 'extra small', 'themeLangDomain' ),
102+
'shortName' => __( 'XS', 'themeLangDomain' ),
103+
'size' => 8,
104+
'slug' => 'extra-small'
105+
),
106+
array(
107+
'name' => __( 'small', 'themeLangDomain' ),
108+
'shortName' => __( 'S', 'themeLangDomain' ),
109+
'size' => 12,
110+
'slug' => 'small'
111+
),
112+
array(
113+
'name' => __( 'regular', 'themeLangDomain' ),
114+
'shortName' => __( 'M', 'themeLangDomain' ),
115+
'size' => 16,
116+
'slug' => 'regular'
117+
),
118+
array(
119+
'name' => __( 'large', 'themeLangDomain' ),
120+
'shortName' => __( 'L', 'themeLangDomain' ),
121+
'size' => 36,
122+
'slug' => 'large'
123+
)
124+
) );
125+
```
126+
127+
The font sizes are rendered on the font size picker in the order themes provide them.
128+
129+
Themes are responsible for creating the classes that apply the correct font size styles.
130+
The class name is built appending 'has-', followed by the font size name *using* kebab case and ending in -font-size.
131+
132+
As an example for the regular font size, a theme may provide the following class.
133+
134+
```css
135+
.has-regular-font-size {
136+
font-size: 16px;
137+
}
138+
```
139+
93140
### Disabling custom colors in block Color Palettes
94141

95142
By default, the color palette offered to blocks, allows the user to select a custom color different from the editor or theme default colors.

‎edit-post/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@ export function initializeEditor( id, postType, postId, settings, overridePost )
5555
const reboot = reinitializeEditor.bind( null, postType, postId, target, settings, overridePost );
5656

5757
// Global deprecations which cannot otherwise be injected into known usage.
58+
deprecated( 'class set is-small-text, ..., is-large-text', {
59+
version: '3.5',
60+
alternative: 'has-small-font-size, ..., has-large-font-size class set',
61+
plugin: 'Gutenberg',
62+
hint: 'If paragraphs using this classes are opened in the editor new classes are automatically applied the post just needs to be saved. This is a global warning, shown regardless of whether the classes are used in the current post.',
63+
} );
64+
5865
deprecated( 'block `id` prop in `edit` function', {
5966
version: '3.4',
6067
alternative: 'block `clientId` prop',

‎editor/components/font-sizes/font-size-picker.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { FontSizePicker } from '@wordpress/components';
5+
import { withSelect } from '@wordpress/data';
6+
7+
export default withSelect(
8+
( select ) => {
9+
const { fontSizes } = select( 'core/editor' ).getEditorSettings();
10+
return {
11+
fontSizes,
12+
};
13+
}
14+
)( FontSizePicker );

‎editor/components/font-sizes/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { getFontSize, getFontSizeClass } from './utils';
2+
export { default as FontSizePicker } from './font-size-picker';
3+
export { default as withFontSizes } from './with-font-sizes';

‎editor/components/font-sizes/utils.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { find, kebabCase } from 'lodash';
5+
6+
/**
7+
* Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
8+
* If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
9+
*
10+
* @param {Array} fontSizes Array of font size objects containing at least the "name" and "size" values as properties.
11+
* @param {?string} fontSizeAttribute Content of the font size attribute (slug).
12+
* @param {?number} customFontSizeAttribute Contents of the custom font size attribute (value).
13+
*
14+
* @return {?string} If fontSizeAttribute is set and an equal slug is found in fontSizes it returns the font size object for that slug.
15+
* Otherwise, an object with just the size value based on customFontSize is returned.
16+
*/
17+
export const getFontSize = ( fontSizes, fontSizeAttribute, customFontSizeAttribute ) => {
18+
if ( fontSizeAttribute ) {
19+
const fontSizeObject = find( fontSizes, { slug: fontSizeAttribute } );
20+
if ( fontSizeObject ) {
21+
return fontSizeObject;
22+
}
23+
}
24+
return {
25+
size: customFontSizeAttribute,
26+
};
27+
};
28+
29+
/**
30+
* Returns a class based on fontSizeName.
31+
*
32+
* @param {string} fontSizeSlug Slug of the fontSize.
33+
*
34+
* @return {string} String with the class corresponding to the fontSize passed.
35+
* The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
36+
*/
37+
export function getFontSizeClass( fontSizeSlug ) {
38+
if ( ! fontSizeSlug ) {
39+
return;
40+
}
41+
42+
return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
43+
}

0 commit comments

Comments
 (0)