Skip to content

Commit 8c2c469

Browse files
jorgefilipecostamcsfntsekourasellatrixjasmussen
authored and
gutenbergplugin
committed
[Readd] Stretch text and strech heading variation (#73056)
Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: mcsf <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]>
1 parent e0b5927 commit 8c2c469

26 files changed

+209
-266
lines changed

‎packages/block-editor/src/components/global-styles/typography-panel.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ export default function TypographyPanel( {
178178
settings,
179179
panelId,
180180
defaultControls = DEFAULT_CONTROLS,
181+
fitText = false,
181182
} ) {
182183
const decodeValue = ( rawValue ) =>
183184
getValueFromVariable( { settings }, '', rawValue );
@@ -447,7 +448,7 @@ export default function TypographyPanel( {
447448
/>
448449
</ToolsPanelItem>
449450
) }
450-
{ hasFontSizeEnabled && (
451+
{ hasFontSizeEnabled && ! fitText && (
451452
<ToolsPanelItem
452453
label={ __( 'Size' ) }
453454
hasValue={ hasFontSize }

‎packages/block-editor/src/hooks/fit-text.js‎

Lines changed: 2 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@ import { addFilter } from '@wordpress/hooks';
55
import { hasBlockSupport } from '@wordpress/blocks';
66
import { useEffect, useCallback } from '@wordpress/element';
77
import { useSelect } from '@wordpress/data';
8-
import { __ } from '@wordpress/i18n';
9-
import {
10-
ToggleControl,
11-
__experimentalToolsPanelItem as ToolsPanelItem,
12-
} from '@wordpress/components';
138

149
const EMPTY_OBJECT = {};
1510

@@ -19,7 +14,6 @@ const EMPTY_OBJECT = {};
1914
import { optimizeFitText } from '../utils/fit-text-utils';
2015
import { store as blockEditorStore } from '../store';
2116
import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
22-
import InspectorControls from '../components/inspector-controls';
2317

2418
export const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';
2519

@@ -207,76 +201,6 @@ function useFitText( { fitText, name, clientId } ) {
207201
] );
208202
}
209203

210-
/**
211-
* Fit text control component for the typography panel.
212-
*
213-
* @param {Object} props Component props.
214-
* @param {string} props.clientId Block client ID.
215-
* @param {Function} props.setAttributes Function to set block attributes.
216-
* @param {string} props.name Block name.
217-
* @param {boolean} props.fitText Whether fit text is enabled.
218-
* @param {string} props.fontSize Font size slug.
219-
* @param {Object} props.style Block style object.
220-
*/
221-
export function FitTextControl( {
222-
clientId,
223-
fitText = false,
224-
setAttributes,
225-
name,
226-
fontSize,
227-
style,
228-
} ) {
229-
if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
230-
return null;
231-
}
232-
return (
233-
<InspectorControls group="typography">
234-
<ToolsPanelItem
235-
hasValue={ () => fitText }
236-
label={ __( 'Fit text' ) }
237-
onDeselect={ () => setAttributes( { fitText: undefined } ) }
238-
resetAllFilter={ () => ( { fitText: undefined } ) }
239-
panelId={ clientId }
240-
>
241-
<ToggleControl
242-
__nextHasNoMarginBottom
243-
label={ __( 'Fit text' ) }
244-
checked={ fitText }
245-
onChange={ () => {
246-
const newFitText = ! fitText || undefined;
247-
const updates = { fitText: newFitText };
248-
249-
// When enabling fit text, clear font size if it has a value
250-
if ( newFitText ) {
251-
if ( fontSize ) {
252-
updates.fontSize = undefined;
253-
}
254-
if ( style?.typography?.fontSize ) {
255-
updates.style = {
256-
...style,
257-
typography: {
258-
...style?.typography,
259-
fontSize: undefined,
260-
},
261-
};
262-
}
263-
}
264-
265-
setAttributes( updates );
266-
} }
267-
help={
268-
fitText
269-
? __( 'Text will resize to fit its container.' )
270-
: __(
271-
'The text will resize to fit its container, resetting other font size settings.'
272-
)
273-
}
274-
/>
275-
</ToolsPanelItem>
276-
</InspectorControls>
277-
);
278-
}
279-
280204
/**
281205
* Override props applied to the block element on save.
282206
*
@@ -338,7 +262,7 @@ const hasFitTextSupport = ( blockNameOrType ) => {
338262
export default {
339263
useBlockProps,
340264
addSaveProps,
341-
attributeKeys: [ 'fitText', 'fontSize', 'style' ],
265+
attributeKeys: [ 'fitText' ],
342266
hasSupport: hasFitTextSupport,
343-
edit: FitTextControl,
267+
edit: () => null,
344268
};

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,16 @@ function addSaveProps( props, blockNameOrType, attributes ) {
9292
*/
9393
export function FontSizeEdit( props ) {
9494
const {
95-
attributes: { fontSize, style },
95+
attributes: { fontSize, style, fitText },
9696
setAttributes,
9797
} = props;
98+
9899
const [ fontSizes ] = useSettings( 'typography.fontSizes' );
99100

101+
// Hide font size UI when fitText is enabled
102+
if ( fitText ) {
103+
return null;
104+
}
100105
const onChange = ( value, selectedItem ) => {
101106
// Use the selectedItem's slug if available, otherwise fall back to finding by value
102107
const fontSizeSlug =
@@ -211,7 +216,7 @@ function useBlockProps( { name, fontSize, style } ) {
211216
export default {
212217
useBlockProps,
213218
addSaveProps,
214-
attributeKeys: [ 'fontSize', 'style' ],
219+
attributeKeys: [ 'fontSize', 'style', 'fitText' ],
215220
hasSupport( name ) {
216221
return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
217222
},

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,16 +130,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
130130
);
131131

132132
const onChange = ( newStyle ) => {
133-
const newAttributes = styleToAttributes( newStyle );
134-
135-
// If setting a font size and fitText is currently enabled, disable it
136-
const hasFontSize =
137-
newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
138-
if ( hasFontSize && fitText ) {
139-
newAttributes.fitText = undefined;
140-
}
141-
142-
setAttributes( newAttributes );
133+
setAttributes( styleToAttributes( newStyle ) );
143134
};
144135

145136
if ( ! isEnabled ) {
@@ -159,6 +150,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
159150
value={ value }
160151
onChange={ onChange }
161152
defaultControls={ defaultControls }
153+
fitText={ fitText }
162154
/>
163155
);
164156
}

‎packages/block-editor/src/store/selectors.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2263,6 +2263,8 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
22632263
} ) );
22642264
}
22652265

2266+
// Hardcode: Collect stretch variations separately to add at the end
2267+
const stretchVariations = [];
22662268
const items = blockTypeInserterItems.reduce(
22672269
( accumulator, item ) => {
22682270
const { variations = [] } = item;
@@ -2275,14 +2277,26 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
22752277
state,
22762278
item
22772279
);
2278-
accumulator.push(
2279-
...variations.map( variationMapper )
2280-
);
2280+
variations
2281+
.map( variationMapper )
2282+
.forEach( ( variation ) => {
2283+
if (
2284+
variation.id ===
2285+
'core/paragraph/stretchy-paragraph' ||
2286+
variation.id ===
2287+
'core/heading/stretchy-heading'
2288+
) {
2289+
stretchVariations.push( variation );
2290+
} else {
2291+
accumulator.push( variation );
2292+
}
2293+
} );
22812294
}
22822295
return accumulator;
22832296
},
22842297
[]
22852298
);
2299+
items.push( ...stretchVariations );
22862300

22872301
// Ensure core blocks are prioritized in the returned results,
22882302
// because third party blocks can be registered earlier than

‎packages/block-library/src/heading/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import edit from './edit';
1313
import metadata from './block.json';
1414
import save from './save';
1515
import transforms from './transforms';
16+
import variations from './variations';
1617

1718
const { name } = metadata;
1819

@@ -65,6 +66,7 @@ export const settings = {
6566
},
6667
edit,
6768
save,
69+
variations,
6870
};
6971

7072
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/heading/variations.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
import { Path, SVG } from '@wordpress/primitives';
6+
7+
const variations = [
8+
// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
9+
// to make Stretchy variations appear as the last of their sections in the inserter.
10+
{
11+
name: 'stretchy-heading',
12+
title: __( 'Stretchy Heading' ),
13+
description: __( 'Heading that resizes to fit its container.' ),
14+
icon: (
15+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
16+
<Path d="m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" />
17+
</SVG>
18+
),
19+
attributes: { fitText: true },
20+
scope: [ 'inserter' ],
21+
isActive: ( blockAttributes ) => blockAttributes.fitText === true,
22+
},
23+
];
24+
25+
export default variations;

‎packages/block-library/src/paragraph/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import edit from './edit';
1313
import metadata from './block.json';
1414
import save from './save';
1515
import transforms from './transforms';
16+
import variations from './variations';
1617

1718
const { name } = metadata;
1819

@@ -54,6 +55,7 @@ export const settings = {
5455
},
5556
edit,
5657
save,
58+
variations,
5759
};
5860

5961
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/paragraph/variations.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __ } from '@wordpress/i18n';
5+
import { Path, SVG } from '@wordpress/primitives';
6+
7+
const variations = [
8+
// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
9+
// to make Stretchy variations appear as the last of their sections in the inserter.
10+
{
11+
name: 'stretchy-paragraph',
12+
title: __( 'Stretchy Paragraph' ),
13+
description: __( 'Paragraph that resizes to fit its container.' ),
14+
icon: (
15+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
16+
<Path d="M3 9c0 2.8 2.2 5 5 5v-.2V20h1.5V5.5H12V20h1.5V5.5h3V4H8C5.2 4 3 6.2 3 9Zm16.2-.2v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" />
17+
</SVG>
18+
),
19+
attributes: {
20+
fitText: true,
21+
},
22+
scope: [ 'inserter' ],
23+
isActive: ( blockAttributes ) => blockAttributes.fitText === true,
24+
},
25+
];
26+
27+
export default variations;

‎test/e2e/specs/editor/blocks/details.spec.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ test.describe( 'Details', () => {
123123
await expect(
124124
listView.getByRole( 'link', {
125125
name: 'Paragraph',
126+
exact: true,
126127
} )
127128
).toBeVisible();
128129

@@ -131,6 +132,7 @@ test.describe( 'Details', () => {
131132
await expect(
132133
listView.getByRole( 'link', {
133134
name: 'Paragraph',
135+
exact: true,
134136
} )
135137
).toBeFocused();
136138

0 commit comments

Comments
 (0)