Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block Library: Allow changing Site Title block heading level. #20361

Merged
merged 4 commits into from
Feb 24, 2020
Merged

Block Library: Allow changing Site Title block heading level. #20361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55db86c
Core Data: Fix null property access.
epiqueras Feb 21, 2020
e09fa01
Edit Site: Provide site entity.
epiqueras Feb 21, 2020
f125007
Block Library: Allow changing Site Title block heading level.
epiqueras Feb 21, 2020
04584fe
E2E Tests: Update fixtures.
epiqueras Feb 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/block-library/src/site-title/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
{
"name": "core/site-title",
"category": "layout"
"category": "layout",
"attributes": {
"level": {
"type": "number",
"default": 1
}
}
}
19 changes: 0 additions & 19 deletions packages/block-library/src/site-title/edit.js
View file
Open in desktop

This file was deleted.

38 changes: 38 additions & 0 deletions packages/block-library/src/site-title/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* WordPress dependencies
*/
import { useEntityProp } from '@wordpress/core-data';
import { BlockControls, RichText } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import LevelToolbar from './level-toolbar';

export default function SiteTitleEdit( {
attributes: { level },
setAttributes,
} ) {
const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
const tagName = level === 0 ? 'p' : `h${ level }`;
return (
<>
<BlockControls>
<LevelToolbar
level={ level }
onChange={ ( newLevel ) =>
setAttributes( { level: newLevel } )
}
/>
</BlockControls>
<RichText
tagName={ tagName }
placeholder={ __( 'Site Title' ) }
value={ title }
onChange={ setTitle }
allowedFormats={ [] }
/>
</>
);
}
27 changes: 27 additions & 0 deletions packages/block-library/src/site-title/edit/level-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/components';

export default function LevelIcon( { level, isPressed = false } ) {
const levelToPath = {
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',
1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
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',
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',
4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
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',
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',
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would we save memory if we moved this const out of the function (and into module level) so it's not re-initialized each time the function is called?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably not a relevant amount.

return (
<SVG
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
isPressed={ isPressed }
>
<Path d={ levelToPath[ level ] } />
</SVG>
);
}
38 changes: 38 additions & 0 deletions packages/block-library/src/site-title/edit/level-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* WordPress dependencies
*/
import { ToolbarGroup } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import LevelIcon from './level-icon';

export default function LevelToolbar( { level, onChange } ) {
return (
<ToolbarGroup
isCollapsed
icon={ <LevelIcon level={ level } /> }
controls={ [ 0, 1, 2, 3, 4, 5, 6 ].map( ( currentLevel ) => {
const isActive = currentLevel === level;
return {
icon: (
<LevelIcon
level={ currentLevel }
isPressed={ isActive }
/>
),
title:
currentLevel === 0
? __( 'Paragraph' )
: // translators: %s: heading level e.g: "1", "2", "3"
sprintf( __( 'Heading %d' ), currentLevel ),
isActive,
onClick: () => onChange( currentLevel ),
};
} ) }
label={ __( 'Change heading level' ) }
/>
);
}
10 changes: 8 additions & 2 deletions packages/block-library/src/site-title/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@
/**
* Renders the `core/site-title` block on the server.
*
* @param array $attributes The block attributes.
*
* @return string The render.
*/
function render_block_core_site_title() {
return sprintf( '<h1>%s</h1>', get_bloginfo( 'name' ) );
function render_block_core_site_title( $attributes ) {
$tag_name = 'h1';
if ( isset( $attributes['level'] ) ) {
$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
}
return sprintf( '<%1$s>%2$s</%1$s>', $tag_name, get_bloginfo( 'name' ) );
}

/**
Expand Down
15 changes: 6 additions & 9 deletions packages/core-data/src/entity-provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,23 +84,20 @@ export function useEntityId( kind, type ) {
*/
export function useEntityProp( kind, type, prop ) {
const id = useEntityId( kind, type );

const { value, fullValue } = useSelect(
( select ) => {
const { getEntityRecord, getEditedEntityRecord } = select( 'core' );
const entity = getEntityRecord( kind, type, id ); // Trigger resolver.
const editedEntity = getEditedEntityRecord( kind, type, id );
return (
entity &&
editedEntity && {
value: editedEntity[ prop ],
fullValue: entity[ prop ],
}
);
return entity && editedEntity
? {
value: editedEntity[ prop ],
fullValue: entity[ prop ],
}
: {};
},
[ kind, type, id, prop ]
);

const { editEntityRecord } = useDispatch( 'core' );
const setValue = useCallback(
( newValue ) => {
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/fixtures/blocks/core__site-title.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"clientId": "_clientId_0",
"name": "core/site-title",
"isValid": true,
"attributes": {},
"attributes": {
"level": 1
},
"innerBlocks": [],
"originalContent": ""
}
Expand Down
26 changes: 14 additions & 12 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,20 @@ function Editor( { settings: _settings } ) {
return template ? (
<SlotFillProvider>
<DropZoneProvider>
<EntityProvider
kind="postType"
type={ settings.templateType }
id={ settings.templateId }
>
<Context.Provider value={ context }>
<Notices />
<Header />
<Sidebar />
<BlockEditor />
<Popover.Slot />
</Context.Provider>
<EntityProvider kind="root" type="site">
<EntityProvider
kind="postType"
type={ settings.templateType }
id={ settings.templateId }
>
<Context.Provider value={ context }>
<Notices />
<Header />
<Sidebar />
<BlockEditor />
<Popover.Slot />
</Context.Provider>
</EntityProvider>
</EntityProvider>
</DropZoneProvider>
</SlotFillProvider>
Expand Down