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

Add aside wrapper to pullquote #9599

Merged
merged 5 commits into from Sep 12, 2018

Conversation

@jasmussen
Contributor

jasmussen commented Sep 4, 2018

This is an alternative, per discussion, to #8821.

It adds some semantic value to the pullquote, indicating that it is intended to be separate content.

Note that we should consider doing a few other enhancements to the pullquote, if we intend to keep it:

  • Let's add a transformation from Quote to Pullquote and back
  • For some reason, the alignment values are not output in the markup in the editor, only on the frontend, which means the max-width we apply does not affect the content.

I could use help with both of these. I also imagine the deprecation handler needs a little extra now. @gziolo do you have bandwidth?

Screenshot showing the max width not being applied (note, this is not a new regression, this is in 3.7):

screen shot 2018-09-04 at 09 01 54

@jasmussen jasmussen self-assigned this Sep 4, 2018

@jasmussen jasmussen requested review from gziolo and WordPress/gutenberg-core Sep 4, 2018

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Sep 4, 2018

Contributor

Sorry but the <aside> usage here is arguable. I've read the discussion on #8821 but it's based on a wrong assumption. Although one of the examples in the HTML specification is a pullquote, the <aside> element has an intrinsic role of cpmplementary and as such it's considered a landmark role.

We should definitely avoid a pullquote is listed and announced as a landmark region by assistive technologies. In the editor, there should be just the main landmark regions defined by Gutenberg.

In the front-end, the usage of an <aside> element is more appropriate for sections of content, not for a single pullquote. From the spec:

https://www.w3.org/TR/html52/sections.html#the-aside-element

The aside element represents a section of a page that consists of content that is tangentially related to the content of the parenting sectioning content, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Assistive Technology may convey the semantics of the aside to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "complementary", can be announced by screen reader software when a user navigates to an aside element. User Agents may also provide methods to navigate to aside elements.

Note the same issue as discussed time ago for the core widgets (can't find the Trac ticket right now), as in some themes each widget in a sidebar uses an <aside> element, which is simply wrong.

Contributor

afercia commented Sep 4, 2018

Sorry but the <aside> usage here is arguable. I've read the discussion on #8821 but it's based on a wrong assumption. Although one of the examples in the HTML specification is a pullquote, the <aside> element has an intrinsic role of cpmplementary and as such it's considered a landmark role.

We should definitely avoid a pullquote is listed and announced as a landmark region by assistive technologies. In the editor, there should be just the main landmark regions defined by Gutenberg.

In the front-end, the usage of an <aside> element is more appropriate for sections of content, not for a single pullquote. From the spec:

https://www.w3.org/TR/html52/sections.html#the-aside-element

The aside element represents a section of a page that consists of content that is tangentially related to the content of the parenting sectioning content, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Assistive Technology may convey the semantics of the aside to users. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "complementary", can be announced by screen reader software when a user navigates to an aside element. User Agents may also provide methods to navigate to aside elements.

Note the same issue as discussed time ago for the core widgets (can't find the Trac ticket right now), as in some themes each widget in a sidebar uses an <aside> element, which is simply wrong.

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 4, 2018

Contributor

I think in this case a "figure" might be more semantic given the intention.

Contributor

mtias commented Sep 4, 2018

I think in this case a "figure" might be more semantic given the intention.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Sep 4, 2018

Contributor

Whatever, as long as it's not an aside 🙂
Worth reminding semantics is not perceived directly by humans. It is by software and, through software, by humans that use that software. To my knowledge, screen readers are basically the only software that communicate semantics to users.

Contributor

afercia commented Sep 4, 2018

Whatever, as long as it's not an aside 🙂
Worth reminding semantics is not perceived directly by humans. It is by software and, through software, by humans that use that software. To my knowledge, screen readers are basically the only software that communicate semantics to users.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Sep 4, 2018

Contributor

Thanks for the change. I wonder why <figure> is used on the editor and not in the front-end though. I'd say it should either be removed in the editor or added in the front-end?

Just to document what was happening with the <aside> element, see in the screenshot below 2 pullquotes listed as complementary regions in the available landmarks:

landmarks pullquote aside

Contributor

afercia commented Sep 4, 2018

Thanks for the change. I wonder why <figure> is used on the editor and not in the front-end though. I'd say it should either be removed in the editor or added in the front-end?

Just to document what was happening with the <aside> element, see in the screenshot below 2 pullquotes listed as complementary regions in the available landmarks:

landmarks pullquote aside

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 4, 2018

Contributor

Should be added to front-end too, yes.

Contributor

mtias commented Sep 4, 2018

Should be added to front-end too, yes.

@ZebulanStanphill ZebulanStanphill referenced this pull request Sep 6, 2018

Open

Block Audit: Archives #9280

0 of 2 tasks complete
@aduth

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Sep 6, 2018

Member

Noting that we might need to account for migration if this would invalidate previously-saved pullquote blocks.

Member

aduth commented Sep 6, 2018

Noting that we might need to account for migration if this would invalidate previously-saved pullquote blocks.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 7, 2018

Contributor

Noting that we might need to account for migration if this would invalidate previously-saved pullquote blocks.

Great point. This is what happens now; this is a pullquote created in master:

screen shot 2018-09-07 at 10 45 16

This is what I saw when checking out this branch on the same post:

screen shot 2018-09-07 at 10 45 46

This is what happens when I pressed "Convert to blocks":

screen shot 2018-09-07 at 10 45 51

So looks like citation is lost, but I feel like that's tracked somewhere?

Would appreciate input on how to provide a migration path if anyone has time.

Contributor

jasmussen commented Sep 7, 2018

Noting that we might need to account for migration if this would invalidate previously-saved pullquote blocks.

Great point. This is what happens now; this is a pullquote created in master:

screen shot 2018-09-07 at 10 45 16

This is what I saw when checking out this branch on the same post:

screen shot 2018-09-07 at 10 45 46

This is what happens when I pressed "Convert to blocks":

screen shot 2018-09-07 at 10 45 51

So looks like citation is lost, but I feel like that's tracked somewhere?

Would appreciate input on how to provide a migration path if anyone has time.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Sep 7, 2018

Contributor

@jasmussen You could just use the deprecated block API in this case. The Paragraph block has some examples of using it.

https://wordpress.org/gutenberg/handbook/block-api/deprecated-blocks/

Contributor

ZebulanStanphill commented Sep 7, 2018

@jasmussen You could just use the deprecated block API in this case. The Paragraph block has some examples of using it.

https://wordpress.org/gutenberg/handbook/block-api/deprecated-blocks/

@jorgefilipecosta

I rebased this PR, and had a final look at it. I think the changes look good 👍

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Sep 11, 2018

Contributor

Just for reference:

A figure element’s contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the figure and figcaption elements can be used to explicitly provide a caption for that figure. For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn’t part of the content, it’s a repetition of the content for the purposes of enticing readers or highlighting key topics.

https://www.w3.org/TR/html52/grouping-content.html#the-figure-element

So we are definitely going against the spec on this. That said, I understand the reasoning, so I am fine with using a <figure> instead. It is more semantically correct than a <div> or no wrapper.

Contributor

ZebulanStanphill commented Sep 11, 2018

Just for reference:

A figure element’s contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the figure and figcaption elements can be used to explicitly provide a caption for that figure. For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn’t part of the content, it’s a repetition of the content for the purposes of enticing readers or highlighting key topics.

https://www.w3.org/TR/html52/grouping-content.html#the-figure-element

So we are definitely going against the spec on this. That said, I understand the reasoning, so I am fine with using a <figure> instead. It is more semantically correct than a <div> or no wrapper.

jasmussen and others added some commits Sep 4, 2018

Add aside wrapper to pullquote
This is an alternative, per discussion, to #8821.

It adds some semantic value to the pullquote, indicating that it is intended to be separate content.

Note that we should consider doing a few other enhancements to the pullquote, if we intend to keep it:

- Let's add a transformation from Quote to Pullquote and back
- For some reason, the alignment values are not output in the markup in the editor, only on the frontend, which means the max-width we apply does not affect the content.

I could use help with both of these. I also imagine the deprecation handler needs a little extra now. @gziolo do you have bandwidth?

@jasmussen jasmussen added this to the 3.9 milestone Sep 12, 2018

@jasmussen jasmussen merged commit 4883a7e into master Sep 12, 2018

2 checks passed

codecov/project 49.01% (-0.01%) compared to a0dfb14
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
);
},
deprecated: [ {
attributes: {
...blockAttributes,

This comment has been minimized.

@aduth

aduth Sep 12, 2018

Member

Minor: Spread operator is not necessary here (and has a small performance cost), vs. just assigning directly as attributes: blockAttributes

@aduth

aduth Sep 12, 2018

Member

Minor: Spread operator is not necessary here (and has a small performance cost), vs. just assigning directly as attributes: blockAttributes

This comment has been minimized.

@ZebulanStanphill

ZebulanStanphill Sep 12, 2018

Contributor

If the blockAttributes variable was just called attributes, you could make it even shorter:
attributes,

@ZebulanStanphill

ZebulanStanphill Sep 12, 2018

Contributor

If the blockAttributes variable was just called attributes, you could make it even shorter:
attributes,

@talldan talldan deleted the try/pullquote-aside branch Sep 13, 2018

@aduth

This comment has been minimized.

Show comment
Hide comment
@aduth

aduth Sep 14, 2018

Member

The demo content should have been updated here. While the deprecation migration saves it from being flagged as invalid, it does cause the demo post to trigger an autosave after delay.

Block validation: Block validation failed for `core/pullquote` ({name: "core/pullquote", title: "Pullquote", description: "Highlight a quote from your post or page by displaying it as a graphic element.", icon: {…}, category: "formatting", …}).

Expected:

<figure class="wp-block-pullquote"><blockquote><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote></figure>

Actual:

<blockquote class="wp-block-pullquote"><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote>
Member

aduth commented Sep 14, 2018

The demo content should have been updated here. While the deprecation migration saves it from being flagged as invalid, it does cause the demo post to trigger an autosave after delay.

Block validation: Block validation failed for `core/pullquote` ({name: "core/pullquote", title: "Pullquote", description: "Highlight a quote from your post or page by displaying it as a graphic element.", icon: {…}, category: "formatting", …}).

Expected:

<figure class="wp-block-pullquote"><blockquote><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote></figure>

Actual:

<blockquote class="wp-block-pullquote"><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment