Skip to content

Commit ec83961

Browse files
Qjorgefilipecosta
Q
and
jorgefilipecosta
authored
Component System: Upgrade FontSizePicker (WordPress#27594)
* Update min/max for FontSizeControl and improve getSelectOptions() to assign option object (+5 squashed commits) Squashed commits: [3b2e8cd71d] Update @wp-g2/components to latest v0.0.127 [144a98e] Add new font size picker to global styles [80beed6] Remove additional props [8d288e5] Move font size component into gutenberg repository. [1cf09cb] Component System: Upgrade FontSizePicker * Update @wp-g2 packages to latest 0.0.135 with babel runtime handling * Update package-lock.json * Update @wp-g2 to latest 0.0.139 * Re-enabled E2E font-size-picker reset test * Update @wp-g2 to v0.0.140 - Removing @wp-g2/substate as a dependency * Refactor usage of noop and is utils Co-authored-by: Jorge <jorge.costa@developer.pt>
1 parent ac988d0 commit ec83961

19 files changed

+1115
-58
lines changed

‎package-lock.json

+481-27
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"npm": ">=6.9.0"
2020
},
2121
"config": {
22-
"GUTENBERG_PHASE": 2
22+
"GUTENBERG_PHASE": 2,
23+
"COMPONENT_SYSTEM_PHASE": 0
2324
},
2425
"dependencies": {
2526
"@wordpress/a11y": "file:packages/a11y",

‎packages/block-editor/src/hooks/font-size.js

+13-11
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,6 @@ export function FontSizeEdit( props ) {
105105
const isDisabled = useIsFontSizeDisabled( props );
106106
const fontSizes = useEditorFeature( 'typography.fontSizes' );
107107

108-
if ( isDisabled ) {
109-
return null;
110-
}
111-
112-
const fontSizeObject = getFontSize(
113-
fontSizes,
114-
fontSize,
115-
style?.typography?.fontSize
116-
);
117108
const onChange = ( value ) => {
118109
const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
119110

@@ -129,9 +120,20 @@ export function FontSizeEdit( props ) {
129120
} );
130121
};
131122

132-
return (
133-
<FontSizePicker value={ fontSizeObject.size } onChange={ onChange } />
123+
if ( isDisabled ) {
124+
return null;
125+
}
126+
127+
const fontSizeObject = getFontSize(
128+
fontSizes,
129+
fontSize,
130+
style?.typography?.fontSize
134131
);
132+
133+
const fontSizeValue =
134+
fontSizeObject?.size || style?.typography?.fontSize || fontSize;
135+
136+
return <FontSizePicker onChange={ onChange } value={ fontSizeValue } />;
135137
}
136138

137139
/**

‎packages/block-editor/src/hooks/typography.js

+16-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
* WordPress dependencies
33
*/
44
import { hasBlockSupport } from '@wordpress/blocks';
5-
import { PanelBody } from '@wordpress/components';
5+
/**
6+
* External dependencies
7+
*/
8+
import {
9+
PanelBody,
10+
__unstableComponentSystemProvider as ComponentSystemProvider,
11+
} from '@wordpress/components';
612
import { Platform } from '@wordpress/element';
713
import { __ } from '@wordpress/i18n';
814

@@ -61,11 +67,15 @@ export function TypographyPanel( props ) {
6167
return (
6268
<InspectorControls>
6369
<PanelBody title={ __( 'Typography' ) }>
64-
<FontFamilyEdit { ...props } />
65-
<FontSizeEdit { ...props } />
66-
<FontAppearanceEdit { ...props } />
67-
<LineHeightEdit { ...props } />
68-
<TextDecorationAndTransformEdit { ...props } />
70+
<ComponentSystemProvider
71+
__unstableNextInclude={ [ 'WPComponentsFontSizePicker' ] }
72+
>
73+
<FontFamilyEdit { ...props } />
74+
<FontSizeEdit { ...props } />
75+
<FontAppearanceEdit { ...props } />
76+
<LineHeightEdit { ...props } />
77+
<TextDecorationAndTransformEdit { ...props } />
78+
</ComponentSystemProvider>
6979
</PanelBody>
7080
</InspectorControls>
7181
);

‎packages/components/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
"@wordpress/primitives": "file:../primitives",
4646
"@wordpress/rich-text": "file:../rich-text",
4747
"@wordpress/warning": "file:../warning",
48+
"@wp-g2/components": "^0.0.140",
49+
"@wp-g2/context": "^0.0.140",
50+
"@wp-g2/styles": "^0.0.140",
51+
"@wp-g2/utils": "^0.0.140",
4852
"classnames": "^2.2.5",
4953
"dom-scroll-into-view": "^1.2.1",
5054
"downshift": "^5.4.0",
@@ -57,7 +61,7 @@
5761
"react-merge-refs": "^1.0.0",
5862
"react-resize-aware": "^3.0.1",
5963
"react-spring": "^8.0.20",
60-
"react-use-gesture": "^7.0.15",
64+
"react-use-gesture": "^7.0.16",
6165
"reakit": "^1.3.4",
6266
"rememo": "^3.0.0",
6367
"tinycolor2": "^1.4.1",

‎packages/components/src/__next/context/component-system-provider.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { ContextSystemProvider } from '@wp-g2/components';
5+
6+
export function ComponentSystemProvider( {
7+
__unstableNextInclude = [],
8+
children,
9+
value = {},
10+
} ) {
11+
if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) {
12+
const contextValue = { ...value };
13+
14+
__unstableNextInclude.forEach( ( namespace ) => {
15+
const baseValue = contextValue[ namespace ] || {};
16+
contextValue[ namespace ] = {
17+
...baseValue,
18+
__unstableVersion: 'next',
19+
};
20+
} );
21+
22+
return (
23+
<ContextSystemProvider value={ contextValue }>
24+
{ children }
25+
</ContextSystemProvider>
26+
);
27+
}
28+
29+
return children;
30+
}

‎packages/components/src/__next/context/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { ComponentSystemProvider as __unstableComponentSystemProvider } from './component-system-provider';
2+
export { withNext as __unstableWithNext } from './with-next';

‎packages/components/src/__next/context/with-next.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { contextConnect, useContextSystem } from '@wp-g2/components';
5+
/**
6+
* WordPress dependencies
7+
*/
8+
import { forwardRef } from '@wordpress/element';
9+
10+
export function withNext(
11+
CurrentComponent = () => null,
12+
NextComponent = () => null,
13+
namespace = 'Component',
14+
adapter = ( p ) => p
15+
) {
16+
if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) {
17+
const WrappedComponent = ( props, ref ) => {
18+
const { __unstableVersion, ...otherProps } = useContextSystem(
19+
props,
20+
namespace
21+
);
22+
23+
if ( __unstableVersion === 'next' ) {
24+
const nextProps = adapter( otherProps );
25+
return <NextComponent { ...nextProps } ref={ ref } />;
26+
}
27+
28+
return <CurrentComponent { ...props } ref={ ref } />;
29+
};
30+
31+
return contextConnect( WrappedComponent, namespace );
32+
}
33+
34+
return forwardRef( CurrentComponent );
35+
}

‎packages/components/src/font-size-picker/index.js

+18-9
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Button from '../button';
1818
import RangeControl from '../range-control';
1919
import CustomSelectControl from '../custom-select-control';
2020
import VisuallyHidden from '../visually-hidden';
21+
import { withNextComponent } from './next/';
2122

2223
const DEFAULT_FONT_SIZE = 'default';
2324
const CUSTOM_FONT_SIZE = 'custom';
@@ -52,14 +53,17 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
5253
} ) );
5354
}
5455

55-
export default function FontSizePicker( {
56-
fallbackFontSize,
57-
fontSizes = [],
58-
disableCustomFontSizes = false,
59-
onChange,
60-
value,
61-
withSlider = false,
62-
} ) {
56+
function FontSizePicker(
57+
{
58+
fallbackFontSize,
59+
fontSizes = [],
60+
disableCustomFontSizes = false,
61+
onChange,
62+
value,
63+
withSlider = false,
64+
},
65+
ref
66+
) {
6367
const hasUnits =
6468
isString( value ) ||
6569
( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) );
@@ -90,7 +94,10 @@ export default function FontSizePicker( {
9094
const fontSizePickerNumberId = `components-font-size-picker__number#${ instanceId }`;
9195

9296
return (
93-
<fieldset className="components-font-size-picker">
97+
<fieldset
98+
className="components-font-size-picker"
99+
{ ...( ref ? {} : { ref } ) }
100+
>
94101
<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
95102
<div className="components-font-size-picker__controls">
96103
{ fontSizes.length > 0 && (
@@ -169,3 +176,5 @@ export default function FontSizePicker( {
169176
</fieldset>
170177
);
171178
}
179+
180+
export default withNextComponent( FontSizePicker );

‎packages/components/src/font-size-picker/next/font-size-control-select.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
6+
/**
7+
* External dependencies
8+
*/
9+
import { noop } from 'lodash';
10+
import { contextConnect, useContextSystem } from '@wp-g2/context';
11+
import {
12+
Grid,
13+
TextInput,
14+
SelectDropdown,
15+
FormGroup,
16+
Button,
17+
View,
18+
} from '@wp-g2/components';
19+
20+
/**
21+
* Internal dependencies
22+
*/
23+
import { getSelectTemplateColumns } from './font-size-control-utils';
24+
25+
function renderItem( { name, style } ) {
26+
return <span style={ style }>{ name }</span>;
27+
}
28+
29+
function FontSizeControlSelect( props, forwardedRef ) {
30+
const {
31+
customLabel,
32+
disabled,
33+
inputValue,
34+
isDefaultValue,
35+
label,
36+
max,
37+
min,
38+
onChange = noop,
39+
onInputChange = noop,
40+
onReset = noop,
41+
options = [],
42+
size,
43+
value,
44+
withNumberInput,
45+
withSelect,
46+
...otherProps
47+
} = useContextSystem( props, 'FontSizeControlSelect' );
48+
49+
const templateColumns = getSelectTemplateColumns( withNumberInput );
50+
const subControlsTemplateColumns = withNumberInput ? '1fr 1fr' : '1fr';
51+
52+
return (
53+
<Grid alignment="bottom" templateColumns={ templateColumns }>
54+
{ withSelect && (
55+
<FormGroup label={ label }>
56+
<SelectDropdown
57+
disabled={ disabled }
58+
max={ 260 }
59+
onChange={ onChange }
60+
options={ options }
61+
renderItem={ renderItem }
62+
ref={ forwardedRef }
63+
size={ size }
64+
value={ value }
65+
{ ...otherProps }
66+
/>
67+
</FormGroup>
68+
) }
69+
<Grid
70+
alignment="bottom"
71+
templateColumns={ subControlsTemplateColumns }
72+
>
73+
{ withNumberInput && (
74+
<FormGroup label={ customLabel }>
75+
<TextInput
76+
disabled={ disabled }
77+
max={ max }
78+
min={ min }
79+
onChange={ onInputChange }
80+
size={ size }
81+
type="number"
82+
value={ inputValue }
83+
/>
84+
</FormGroup>
85+
) }
86+
<View>
87+
<Button
88+
disabled={ isDefaultValue }
89+
isBlock
90+
onClick={ onReset }
91+
>
92+
{ __( 'Reset' ) }
93+
</Button>
94+
</View>
95+
</Grid>
96+
</Grid>
97+
);
98+
}
99+
100+
export default contextConnect( FontSizeControlSelect, 'FontSizeControlSelect' );

‎packages/components/src/font-size-picker/next/font-size-control-slider.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
6+
/**
7+
* External dependencies
8+
*/
9+
import { noop } from 'lodash';
10+
11+
/**
12+
* Internal dependencies
13+
*/
14+
import {
15+
ControlLabel,
16+
Grid,
17+
Slider,
18+
TextInput,
19+
VStack,
20+
} from '@wp-g2/components';
21+
import { getSliderTemplateColumns } from './font-size-control-utils';
22+
23+
function FontSizeControlSlider( props ) {
24+
const {
25+
label = __( 'Custom size' ),
26+
disabled,
27+
min,
28+
max,
29+
onChange = noop,
30+
size,
31+
value,
32+
withSlider,
33+
} = props;
34+
35+
if ( ! withSlider ) return null;
36+
37+
const templateColumns = getSliderTemplateColumns();
38+
39+
const controlProps = {
40+
disabled,
41+
min,
42+
max,
43+
onChange,
44+
size,
45+
value,
46+
};
47+
48+
return (
49+
<VStack spacing={ 0 }>
50+
<ControlLabel>{ label }</ControlLabel>
51+
<Grid templateColumns={ templateColumns }>
52+
<Slider { ...controlProps } />
53+
<TextInput { ...controlProps } type="number" />
54+
</Grid>
55+
</VStack>
56+
);
57+
}
58+
59+
export default FontSizeControlSlider;

‎packages/components/src/font-size-picker/next/font-size-control-styles.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { css } from '@wp-g2/styles';
5+
6+
export const FontSizeControl = css`
7+
appearance: none;
8+
border: none;
9+
margin: 0;
10+
padding: 0;
11+
`;

0 commit comments

Comments
 (0)