Skip to content

Commit 988ba5d

Browse files
epiquerasepiqueras
authored
Block Library: Allow changing Site Title block heading level. (#20361)
* Core Data: Fix null property access. * Edit Site: Provide site entity. * Block Library: Allow changing Site Title block heading level. * E2E Tests: Update fixtures.
1 parent 771a975 commit 988ba5d

File tree

9 files changed

+141
-44
lines changed

9 files changed

+141
-44
lines changed

‎packages/block-library/src/site-title/block.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
{
22
"name": "core/site-title",
3-
"category": "layout"
3+
"category": "layout",
4+
"attributes": {
5+
"level": {
6+
"type": "number",
7+
"default": 1
8+
}
9+
}
410
}

‎packages/block-library/src/site-title/edit.js

-19
This file was deleted.

‎packages/block-library/src/site-title/edit/index.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useEntityProp } from '@wordpress/core-data';
5+
import { BlockControls, RichText } from '@wordpress/block-editor';
6+
import { __ } from '@wordpress/i18n';
7+
8+
/**
9+
* Internal dependencies
10+
*/
11+
import LevelToolbar from './level-toolbar';
12+
13+
export default function SiteTitleEdit( {
14+
attributes: { level },
15+
setAttributes,
16+
} ) {
17+
const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
18+
const tagName = level === 0 ? 'p' : `h${ level }`;
19+
return (
20+
<>
21+
<BlockControls>
22+
<LevelToolbar
23+
level={ level }
24+
onChange={ ( newLevel ) =>
25+
setAttributes( { level: newLevel } )
26+
}
27+
/>
28+
</BlockControls>
29+
<RichText
30+
tagName={ tagName }
31+
placeholder={ __( 'Site Title' ) }
32+
value={ title }
33+
onChange={ setTitle }
34+
allowedFormats={ [] }
35+
/>
36+
</>
37+
);
38+
}

‎packages/block-library/src/site-title/edit/level-icon.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { SVG, Path } from '@wordpress/components';
5+
6+
export default function LevelIcon( { level, isPressed = false } ) {
7+
const levelToPath = {
8+
0: 'M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z',
9+
1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
10+
2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
11+
3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
12+
4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
13+
5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
14+
6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
15+
};
16+
return (
17+
<SVG
18+
width="20"
19+
height="20"
20+
viewBox="0 0 20 20"
21+
xmlns="http://www.w3.org/2000/svg"
22+
isPressed={ isPressed }
23+
>
24+
<Path d={ levelToPath[ level ] } />
25+
</SVG>
26+
);
27+
}

‎packages/block-library/src/site-title/edit/level-toolbar.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { ToolbarGroup } from '@wordpress/components';
5+
import { __, sprintf } from '@wordpress/i18n';
6+
7+
/**
8+
* Internal dependencies
9+
*/
10+
import LevelIcon from './level-icon';
11+
12+
export default function LevelToolbar( { level, onChange } ) {
13+
return (
14+
<ToolbarGroup
15+
isCollapsed
16+
icon={ <LevelIcon level={ level } /> }
17+
controls={ [ 0, 1, 2, 3, 4, 5, 6 ].map( ( currentLevel ) => {
18+
const isActive = currentLevel === level;
19+
return {
20+
icon: (
21+
<LevelIcon
22+
level={ currentLevel }
23+
isPressed={ isActive }
24+
/>
25+
),
26+
title:
27+
currentLevel === 0
28+
? __( 'Paragraph' )
29+
: // translators: %s: heading level e.g: "1", "2", "3"
30+
sprintf( __( 'Heading %d' ), currentLevel ),
31+
isActive,
32+
onClick: () => onChange( currentLevel ),
33+
};
34+
} ) }
35+
label={ __( 'Change heading level' ) }
36+
/>
37+
);
38+
}

‎packages/block-library/src/site-title/index.php

+8-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,16 @@
88
/**
99
* Renders the `core/site-title` block on the server.
1010
*
11+
* @param array $attributes The block attributes.
12+
*
1113
* @return string The render.
1214
*/
13-
function render_block_core_site_title() {
14-
return sprintf( '<h1>%s</h1>', get_bloginfo( 'name' ) );
15+
function render_block_core_site_title( $attributes ) {
16+
$tag_name = 'h1';
17+
if ( isset( $attributes['level'] ) ) {
18+
$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
19+
}
20+
return sprintf( '<%1$s>%2$s</%1$s>', $tag_name, get_bloginfo( 'name' ) );
1521
}
1622

1723
/**

‎packages/core-data/src/entity-provider.js

+6-9
Original file line numberDiff line numberDiff line change
@@ -84,23 +84,20 @@ export function useEntityId( kind, type ) {
8484
*/
8585
export function useEntityProp( kind, type, prop ) {
8686
const id = useEntityId( kind, type );
87-
8887
const { value, fullValue } = useSelect(
8988
( select ) => {
9089
const { getEntityRecord, getEditedEntityRecord } = select( 'core' );
9190
const entity = getEntityRecord( kind, type, id ); // Trigger resolver.
9291
const editedEntity = getEditedEntityRecord( kind, type, id );
93-
return (
94-
entity &&
95-
editedEntity && {
96-
value: editedEntity[ prop ],
97-
fullValue: entity[ prop ],
98-
}
99-
);
92+
return entity && editedEntity
93+
? {
94+
value: editedEntity[ prop ],
95+
fullValue: entity[ prop ],
96+
}
97+
: {};
10098
},
10199
[ kind, type, id, prop ]
102100
);
103-
104101
const { editEntityRecord } = useDispatch( 'core' );
105102
const setValue = useCallback(
106103
( newValue ) => {

‎packages/e2e-tests/fixtures/blocks/core__site-title.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"clientId": "_clientId_0",
44
"name": "core/site-title",
55
"isValid": true,
6-
"attributes": {},
6+
"attributes": {
7+
"level": 1
8+
},
79
"innerBlocks": [],
810
"originalContent": ""
911
}

‎packages/edit-site/src/components/editor/index.js

+14-12
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,20 @@ function Editor( { settings: _settings } ) {
4747
return template ? (
4848
<SlotFillProvider>
4949
<DropZoneProvider>
50-
<EntityProvider
51-
kind="postType"
52-
type={ settings.templateType }
53-
id={ settings.templateId }
54-
>
55-
<Context.Provider value={ context }>
56-
<Notices />
57-
<Header />
58-
<Sidebar />
59-
<BlockEditor />
60-
<Popover.Slot />
61-
</Context.Provider>
50+
<EntityProvider kind="root" type="site">
51+
<EntityProvider
52+
kind="postType"
53+
type={ settings.templateType }
54+
id={ settings.templateId }
55+
>
56+
<Context.Provider value={ context }>
57+
<Notices />
58+
<Header />
59+
<Sidebar />
60+
<BlockEditor />
61+
<Popover.Slot />
62+
</Context.Provider>
63+
</EntityProvider>
6264
</EntityProvider>
6365
</DropZoneProvider>
6466
</SlotFillProvider>

0 commit comments

Comments
 (0)