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

Update post author block functionality and visual parity #22877

Merged
merged 30 commits into from
Jun 8, 2020

Conversation

Addison-Stavlo
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo commented Jun 4, 2020

Description

Update the post author block functionality as issued in #21087.

This introduces:

  • Author font size
  • Byline font size
  • Bio font size
  • __experimentalFontSize support
  • Relative sizing for byline and bio fields.
  • Remaining Rich Text capabilities for the byline.

This also fixes issues with:

  • Text alignment
  • Font and Background Colors
  • Default attributes
  • Overall parity between editors and front-end

editing-post-author

A note on front-end parity:

Preset font sizes ( 'Normal', 'Large', etc. ) run on class names that may have styles added by themes. For example, TwentyTwenty adds styles such as:

.entry-content .has-large-font-size {
    font-size: 1.25em;
    line-height: 1.4;
}

This overwrites the standard definition for large text on the front end and causes it to be a different size than the expected 36px as is shown in the editor. Im not sure what we can/should do about this, as if we force parity on this we disable the themes ability to have control over preset sizing.

How has this been tested?

Tested on local docker environment.
Test various settings, save, and verify visual parity between site editor, post editor, and front end.

Screenshots

Screen Shot 2020-06-04 at 7 05 32 PM

Screen Shot 2020-06-04 at 8 16 14 PM

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

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.

@Addison-Stavlo Addison-Stavlo self-assigned this Jun 4, 2020
@github-actions
Copy link

github-actions bot commented Jun 4, 2020

Size Change: +4.38 kB (0%)

Total Size: 1.13 MB

Filename Size Change
build/a11y/index.js 1.14 kB +1 B
build/annotations/index.js 3.62 kB +2 B (0%)
build/api-fetch/index.js 3.4 kB +1 B
build/autop/index.js 2.83 kB +2 B (0%)
build/block-directory/index.js 6.77 kB +24 B (0%)
build/block-editor/index.js 106 kB +295 B (0%)
build/block-editor/style-rtl.css 11.4 kB +14 B (0%)
build/block-editor/style.css 11.4 kB +12 B (0%)
build/block-library/editor-rtl.css 7.88 kB +10 B (0%)
build/block-library/editor.css 7.89 kB +10 B (0%)
build/block-library/index.js 127 kB +1.22 kB (0%)
build/block-library/style-rtl.css 7.72 kB +33 B (0%)
build/block-library/style.css 7.72 kB +38 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB -2 B (0%)
build/block-serialization-spec-parser/index.js 3.1 kB +1 B
build/blocks/index.js 48.1 kB -9 B (0%)
build/components/index.js 194 kB +775 B (0%)
build/components/style-rtl.css 19.5 kB +9 B (0%)
build/components/style.css 19.5 kB +5 B (0%)
build/compose/index.js 9.31 kB -11 B (0%)
build/core-data/index.js 11.4 kB +2 B (0%)
build/data/index.js 8.45 kB -3 B (0%)
build/date/index.js 5.47 kB +3 B (0%)
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 3.17 kB +55 B (1%)
build/edit-navigation/index.js 8.25 kB +1 B
build/edit-navigation/style-rtl.css 918 B +40 B (4%)
build/edit-navigation/style.css 919 B +43 B (4%)
build/edit-post/index.js 303 kB +311 B (0%)
build/edit-post/style-rtl.css 5.6 kB +168 B (3%)
build/edit-post/style.css 5.6 kB +168 B (3%)
build/edit-site/index.js 15.5 kB +533 B (3%)
build/edit-widgets/index.js 9.34 kB +511 B (5%) 🔍
build/editor/index.js 44.8 kB +121 B (0%)
build/format-library/index.js 7.72 kB +3 B (0%)
build/hooks/index.js 2.13 kB -3 B (0%)
build/i18n/index.js 3.56 kB +1 B
build/keyboard-shortcuts/index.js 2.51 kB -1 B
build/media-utils/index.js 5.3 kB +1 B
build/notices/index.js 1.79 kB +1 B
build/nux/index.js 3.41 kB +2 B (0%)
build/plugins/index.js 2.56 kB -1 B
build/redux-routine/index.js 2.85 kB -1 B
build/rich-text/index.js 14.8 kB -3 B (0%)
build/server-side-render/index.js 2.68 kB +3 B (0%)
build/token-list/index.js 1.28 kB -1 B
build/viewport/index.js 1.85 kB -1 B
build/wordcount/index.js 1.17 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/data-controls/index.js 1.29 kB 0 B
build/deprecated/index.js 771 B 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 621 B 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/url/index.js 4.06 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@Addison-Stavlo Addison-Stavlo marked this pull request as ready for review June 5, 2020 00:27
@Addison-Stavlo Addison-Stavlo changed the title WIP - Update post author block functionality Update post author block functionality and visual parity Jun 5, 2020
@Addison-Stavlo Addison-Stavlo requested a review from vindl June 5, 2020 00:28
@epiqueras
Copy link
Contributor

It's a new way of doing font sizes.

Perhaps the secondary text should be sized relative to the "master" font size? Otherwise, it sounds like they should be their own child blocks.

@Addison-Stavlo
Copy link
Contributor Author

Addison-Stavlo commented Jun 5, 2020

It's a new way of doing font sizes.

Ah gotcha. Im not familiar with it atm, but can take a look tomorrow. This would require breaking the 3 sections up into child blocks and using this file?

export function FontSizeEdit( props ) {

The withFontSizes lets us set up all 3 without the need to create child blocks, would this not make more sense currently? I just kind of took off with the font size tool this had been initialized with, but it seems to have good control.

@epiqueras
Copy link
Contributor

The Heading block is an example of how to use it.

We need __experimentalFontSize to hook into global styles. For now, I recommend the various font sizes are set relative to the font size set for the entire block. Later, if people require it, we can look at creating child blocks or using __experimentalSelector to overwrite specific font sizes.

@Addison-Stavlo
Copy link
Contributor Author

Interesting! Thanks for pointing me in the right direction.

I have updated this to use the __experimentalFontSize instead, and converted the byline and bio texts to be sized relative to that standard fontSize (0.5em and 0.7em respectively). There may be more appropriate values to set for these. 🤔

Im still a bit uncertain regarding global styles: would this then inherit what is set for global styles by default, and once we specifically save a font size on the block it will use that instead?

@epiqueras
Copy link
Contributor

Im still a bit uncertain regarding global styles: would this then inherit what is set for global styles by default, and once we specifically save a font size on the block it will use that instead?

Yes

},
],
colorDetector: { targetRef: ref },
colorPanelProps: {
initialOpen: true,
},
},
[ fontSize.size ]
[ contrastCheckFontSize ]
Copy link
Contributor

Choose a reason for hiding this comment

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

We need to change this to __experimentalUseColors.

Copy link
Contributor

Choose a reason for hiding this comment

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

(In a different PR.)

Comment on lines -208 to -213
withoutInteractiveFormatting
allowedFormats={ [
'core/bold',
'core/italic',
'core/strikethrough',
] }
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the reasoning behind this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I figured that if the goal was to have parity with paragraph block's functionalities, that the editable text should be able to have links and the remaining text formatting options. Removing these removes the restrictions and enables them.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think these specific restrictions were put in place because other formatting options don't make sense in the context of a byline.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why restrict it thought? If a user wants a word in their byline to be a link, then all of a sudden a link makes sense in the context of a byline for them. A similar argument for subscript/superscript, etc.

packages/block-library/src/post-author/editor.scss Outdated Show resolved Hide resolved
packages/block-library/src/post-author/index.php Outdated Show resolved Hide resolved
packages/block-library/src/post-author/index.php Outdated Show resolved Hide resolved
@Addison-Stavlo
Copy link
Contributor Author

Addison-Stavlo commented Jun 5, 2020

I'm still not super happy about the byline and bio being a fixed ratio.

I'm thinking it would make sense to update this to allow those ratios to be adjusted and saved as well.

@Addison-Stavlo Addison-Stavlo merged commit 46b4161 into master Jun 8, 2020
@Addison-Stavlo Addison-Stavlo deleted the update/post-author-block-functionality branch June 8, 2020 20:18
@github-actions github-actions bot added this to the Gutenberg 8.4 milestone Jun 8, 2020
@ellatrix ellatrix mentioned this pull request Jun 16, 2020
12 tasks
This was referenced Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants