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.

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

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

Merged
merged 4 commits into from
Feb 24, 2020

Conversation

epiqueras
Copy link
Contributor

Closes #20333

Description

This PR makes the heading level of the Site Title block configurable through the block toolbar. It allows you to set it to all six heading levels or a paragraph level.

It also fixes a bug in core-data where a null value was having properties accessed.

How has this been tested?

It was verified that changing the heading level works as expected in the editor and the front end.

Types of Changes

New Feature: The Site Title block's heading level can now be configured.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@epiqueras epiqueras added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks [Feature] Full Site Editing labels Feb 21, 2020
@epiqueras epiqueras added this to the Gutenberg 7.6 milestone Feb 21, 2020
@epiqueras epiqueras self-assigned this Feb 21, 2020
@epiqueras epiqueras requested a review from ntwb as a code owner February 21, 2020 17:23
@github-actions
Copy link

github-actions bot commented Feb 21, 2020

Size Change: +1.27 kB (0%)

Total Size: 865 kB

Filename Size Change
build/block-library/index.js 115 kB +1.26 kB (1%)
build/core-data/index.js 10.5 kB +1 B
build/edit-site/index.js 4.59 kB +12 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 104 kB 0 B
build/block-editor/style-rtl.css 9.78 kB 0 B
build/block-editor/style.css 9.77 kB 0 B
build/block-library/editor-rtl.css 7.67 kB 0 B
build/block-library/editor.css 7.67 kB 0 B
build/block-library/style-rtl.css 7.47 kB 0 B
build/block-library/style.css 7.48 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 190 kB 0 B
build/components/style-rtl.css 16.1 kB 0 B
build/components/style.css 16 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.7 kB 0 B
build/edit-post/style-rtl.css 8.7 kB 0 B
build/edit-post/style.css 8.69 kB 0 B
build/edit-site/style-rtl.css 2.77 kB 0 B
build/edit-site/style.css 2.76 kB 0 B
build/edit-widgets/index.js 4.36 kB 0 B
build/edit-widgets/style-rtl.css 2.8 kB 0 B
build/edit-widgets/style.css 2.79 kB 0 B
build/editor/editor-styles-rtl.css 327 B 0 B
build/editor/editor-styles.css 328 B 0 B
build/editor/index.js 45.1 kB 0 B
build/editor/style-rtl.css 4.13 kB 0 B
build/editor/style.css 4.11 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 kB 0 B
build/format-library/style-rtl.css 500 B 0 B
build/format-library/style.css 501 B 0 B
build/hooks/index.js 1.92 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.45 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 215 B 0 B
build/list-reusable-blocks/style.css 216 B 0 B
build/media-utils/index.js 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 878 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@johnstonphilip
Copy link
Contributor

@epiqueras This is great!

Screen Shot 2020-02-21 at 1 38 02 PM

I am curious if it makes sense to add a None option so that it can be used inline. Say, as part of a blog post body as a nested block:

Example:
Here's another blog post coming at you from [site_title_block_here]. We love to change our name often though, so keep an eye on that sentence for when we change it again next week!

Thoughts?

@johnstonphilip
Copy link
Contributor

One issue I just noticed as well, is that while changing the setting in wp-admin works, it does not change the output on the frontend, as it still uses <h1>.

@epiqueras
Copy link
Contributor Author

I am curious if it makes sense to add a None option so that it can be used inline. Say, as part of a blog post body as a nested block:

I am not sure; I think this block needs a proper full design with more features like colors and alignments.

One issue I just noticed as well, is that while changing the setting in wp-admin works, it does not change the output on the frontend, as it still uses <h1>.

Are you sure you rebuilt things? I see it changing as expected.

@johnstonphilip
Copy link
Contributor

@epiqueras I did double check that yeah. Everything has rebuilt properly, and I am seeing the js changes from this PR in action.

I think the issue might be that I have the Site Title block in both my header.html file, and in the body of a post on the same page.

I added some debugging to the output function, and the first time the attributes are an empty array, and the second time it has level 3, though both are still using H1.

Screen Shot 2020-02-21 at 2 03 10 PM

@shaunandrews
Copy link
Contributor

Its kind of weird to have the Paragraph option in the list. I expected that I'd get all the features of the normal Paragraph block (bolding and the like), but it doesn't do that.

@epiqueras epiqueras force-pushed the add/site-title-block-features branch from 70d9ecb to 04584fe Compare February 21, 2020 19:14
@epiqueras
Copy link
Contributor Author

@johnstonphilip Short-circuiting wasn't working right; it's fixed now.

Its kind of weird to have the Paragraph option in the list. I expected that I'd get all the features of the normal Paragraph block (bolding and the like), but it doesn't do that.

That would be a block transformation. Where would you put it instead?

@johnstonphilip
Copy link
Contributor

@epiqueras Working now! 👍

@epiqueras
Copy link
Contributor Author

Thanks for testing!

@johnstonphilip
Copy link
Contributor

@epiqueras I think you mentioned this but I just want to confirm: Based on my testing, this also appears to fix #20337

Is that right?

@epiqueras
Copy link
Contributor Author

Yes, it does.

@shaunandrews
Copy link
Contributor

shaunandrews commented Feb 21, 2020

That would be a block transformation. Where would you put it instead?

Sorry, I'm not suggesting a transformation.

I think my hesitation is that this menu is essentially changing the html tag that is wrapped around the site title. I haven't seen an example where we do this in the toolbar, nor have I seen an instance where we've combined both heading levels with the concept of a "paragraph level" option. This blurs the line between the font-size, and the semantic tag used.

That said, if we want to keep the paragraph option, I think it should be the last in the list. Its both visually the smallest, and semantically less important.

Site Title Size

@paaljoachim
Copy link
Contributor

paaljoachim commented Feb 22, 2020

Is there any connection with this PR?
#20246

As the same UI would apply to both.

@epiqueras
Copy link
Contributor Author

epiqueras commented Feb 22, 2020 via email

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.

Copy link
Contributor

@ockham ockham left a comment

Choose a reason for hiding this comment

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

Looking good overall!

I agree with Shaun that if we're going to keep the option to format the site title as a paragraph, the paragraph option should be last in the format picker (even if that makes looping over 0..6 harder).

Another (more architectural yet vague) question: I seem to recall that there were plans to support composing blocks from others, with the composed (outermost) block controlling the composing blocks' attributes, and having the composed block 'inherit' the toolbar (and inspector?) controls from the composing ones. (Unfortunately, I can't seem to find any references right now.) Would it thus be possible to compose the site title block from a heading block?

@epiqueras
Copy link
Contributor Author

Would it thus be possible to compose the site title block from a heading block?

That's more for blocks that have a hierarchy, e.g., nav menu -> nav link.

@epiqueras epiqueras merged commit 988ba5d into master Feb 24, 2020
@epiqueras epiqueras deleted the add/site-title-block-features branch February 24, 2020 17:03
@ockham
Copy link
Contributor

ockham commented Feb 25, 2020

Would it thus be possible to compose the site title block from a heading block?

That's more for blocks that have a hierarchy, e.g., nav menu -> nav link.

Not sure we're on the same page here, I don't mean the established Inner Blocks pattern, but a pattern that I thought has been emerging more recently -- with a more rigid connection between the 'outer' (composed) and 'inner' (composing) blocks. I thought I'd seen something to that effect, but maybe I'm mistaken 🤔

@ockham
Copy link
Contributor

ockham commented Feb 25, 2020

Would it thus be possible to compose the site title block from a heading block?

That's more for blocks that have a hierarchy, e.g., nav menu -> nav link.

Not sure we're on the same page here, I don't mean the established Inner Blocks pattern, but a pattern that I thought has been emerging more recently -- with a more rigid connection between the 'outer' (composed) and 'inner' (composing) blocks. I thought I'd seen something to that effect, but maybe I'm mistaken

Ahh, I think I was mostly thinking of your own context concepts from #19685 and #19572 😊

@epiqueras
Copy link
Contributor Author

That still is for hierarchical blocks.

The only block I can think of that absorbs the toolbar, as you describe, is the Navigation block.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site Title block: do not force h1 on all pages
5 participants