Make WordPress Core

Opened 20 months ago

Last modified 9 months ago

#56747 reopened defect (bug)

Twenty Seventeen: Image Block captions are Italic on frontend but not in editor

Reported by: domainsupport's profile domainsupport Owned by: audrasjb's profile audrasjb
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing has-screenshots
Focuses: css Cc:

Description

If you add a caption to an image in the Image Block, the caption is in italics on the front end but not in the editor. This means that if you select the caption text you have the option to make it italic (which has no change on the front end) but not the option to deselect italics.

Either captions need to not be italic by default on the front end or the image block in Twenty Seventeen needs to have italic captions enabled by default.

Oliver

Attachments (7)

56747.patch (874 bytes) - added by sabernhardt 20 months ago.
accommodate captions when the block's classes list does not begin with wp-block-
56747.em.patch (1.7 KB) - added by sabernhardt 20 months ago.
reversing italics for em elements within captions
caption-with-emphasis-within-text.png (3.4 KB) - added by sabernhardt 20 months ago.
caption with emphasis within text (in editor, with 56747.em.patch)
56747.2.patch (2.0 KB) - added by sabernhardt 20 months ago.
adding cite and i
editor-blocks.css (21.4 KB) - added by seakashdiu 16 months ago.
56747.2.gallery_caption_not_italic_when_selected_italic_in_toolbar.png (1.9 MB) - added by hztyfoon 16 months ago.
56747.2 issue: gallery caption not italic when selected italic in toolbar
56747.2.gallery_caption_italic_when_not_selected_italic_in_toolbar.png (1.9 MB) - added by hztyfoon 16 months ago.
56747.2 issue: gallery caption shows italic when not selected italic in toolbar

Change History (37)

#1 @audrasjb
20 months ago

  • Version 6.0.2 deleted

@sabernhardt
20 months ago

accommodate captions when the block's classes list does not begin with wp-block-

#2 @sabernhardt
20 months ago

  • Keywords has-patch needs-testing added

Thanks for the report!

This is not the only theme that uses [class^="wp-block-"]. Ever since the editor added another class before any class name with this pattern, those styles have not applied within the editor context.

#3 @domainsupport
20 months ago

That was fast!

So the "version" was deleted because the issue is not specific to that version of WordPress? Just checking for future reports.

And when you add "needs-testing" who does the testing ... anyone or is there a specific person / people who have that job?

Thanks.

Oliver

#4 @sabernhardt
20 months ago

Bug tickets usually note the earliest known version where the problem occurs—see the handbook. You gave the version you used, which is important. However, I know it happens with 5.9 and suspect it goes back further.

And anyone can test patches :)

#5 @audrasjb
20 months ago

  • Milestone changed from Awaiting Review to 6.1
  • Owner set to audrasjb
  • Status changed from new to accepted

The patch fixes the issue on my side. Other tests are welcome!

I think we can probably safely commit this before 6.1 RC1, so let's move it to the current milestone :)

#6 @domainsupport
20 months ago

Hi,

I hate to put a spanner in the works but the patch does indeed fix the issue whereby the captions are now shown as italic in the editor ... but the italic option in the block tools is not highlighted and clicking on it does nothing.

So the block tool to make the caption text italic is effectively redundant.

Ideally, the italic tool would be on by default and there would be the ability to "turn it off" and apply font-style: normal;.

Is it possible for a non-FSE theme to specify global styles like this? (if that's where it would be stored)

Oliver

@sabernhardt
20 months ago

reversing italics for em elements within captions

#7 @sabernhardt
20 months ago

The I button is not related to global styles, but determines whether to wrap the selected text in an em (emphasis) tag. The stylesheets probably should reverse the font style for the em element, especially when that is only part of the caption. If this is too much to edit late in the cycle, the em part could be a separate ticket.

@sabernhardt
20 months ago

caption with emphasis within text (in editor, with 56747.em.patch)

#8 @domainsupport
20 months ago

Oh, I like that idea, clever :)

However, the GUI would be opposite whereby the highlighted item is meant to be "on" not "off" so could cause confusion?

And if a user were to change theme, all their captions would be italic when they should be normal and vice-versa.

And my final thought is that using CSS to make a base HTML tag do the opposite of its intended function doesn't feel right somehow ... ?

Oliver

#9 @sabernhardt
20 months ago

Let's ignore the em for now; cite and i elements probably should reverse the styling as well (those may require editing as HTML).

Ideally, people would not use the I button to italicize (or un-italicize) an entire caption. Several editors add em tags to style text as italic, but that is not the intended purpose of the element.

#10 @audrasjb
20 months ago

Yes, em is not supposed to apply italics at all, it is only meant to put emphasis on an element. So reversing the styling is theoretically the best option.

#11 @domainsupport
20 months ago

Oh wow, so surely that means that the italic Block tool uses the wrong element and should be using i rather than em?

And yes, agreed, in the context of emphasis, removing italics would indeed create emphasis in the context of the existing default italicised image block captions in this theme.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


20 months ago

@sabernhardt
20 months ago

adding cite and i

#13 @sabernhardt
20 months ago

The em may be appropriate more often than i, and span could be better than both, though the editor tag is a different discussion (see #54050).

I added the cite and i elements (but not dfn) to return them to normal style in the italic captions.

#14 @sabernhardt
20 months ago

  • Milestone changed from 6.1 to 6.2

#15 @riccardodicurti
19 months ago

At WordCamp Italia 2022 Contributor Day I reviewed patch 56747.2.patch on an LTR install and confirmed the proper behaviour on:

Chrome Mac Version 107.0.5304.87

Last edited 19 months ago by riccardodicurti (previous) (diff)

#16 @bgoewert
17 months ago

  • Keywords has-screenshots added

Test Report

Patch tested: 56747.2.patch

Environment

  • OS: Pop!_OS 22.04
  • Web Server: Docker-Desktop & wordpress-develop
  • PHP: 7.4.33
  • WordPress: 6.2-alpha-54642-src
  • Browser: Chrome 109, Firefox 108
  • Theme: Twenty Seventeen
  • Active Plugins: none

Actual Results

  • ✅ Image caption appears italic in the editor.

Additional Notes

  • I used the HTML editor (Edit as HTML) to add cite and i to the caption.
  • Enabling italics using the editor controls only applies to the unmodified and em portions of the caption, as expected. See figures 5 and 6.

Supplemental Artifacts

Figure 1: Front-end before patch.
https://i.imgur.com/iioD2b5.png

Figure 2: Editor before patch.
https://i.imgur.com/L2EpYZx.png

Figure 3: Front-end after patch.
https://i.imgur.com/cRwPVud.png

Figure 4: Editor after patch.
https://i.imgur.com/jq80SnJ.png

Figure 5: After enabling italics for the whole caption. Italicization is reversed. This displayed the same on the front-end.
https://i.imgur.com/DLGMb43.png

Figure 6: After disabling italics for the whole caption. The 'em' tags are removed, 'cite' and 'i' remain and reverse the italicization. This also displayed the same on the front-end.
https://i.imgur.com/Qs8Mis5.png

Last edited 17 months ago by bgoewert (previous) (diff)

#17 @sadmansakibnadvi
17 months ago

Test report of https://core.trac.wordpress.org/attachment/ticket/56747/56747.2.patch

Env

WordPress 6.1.1
PHP 7.4.1
Microsoft Edge Version 109.0.1518.52 (Official build) (x86_64)
macOS 13.0.1 (Ventura)
Theme: Twenty Seventeen (twentyseventeen) version 3.1
Gutenberg enabled
Plugins: Templately, Elementor, Essential Addons for Elementor, Essential Blocks

Steps to Test

  1. Navigate to Appearance > Themes
  2. Activate Twenty Seventeen
  3. Navigate to Posts > Add New > Took an image block and added the caption
  4. then update the post and check it.
  5. Found the issue. After that, I used the patch.
  6. The patch is working


Expected Results (✅)

The image caption appears italic in the editor.

Actual Results

The patch shows the image caption appears italic in the editor.

Screenshot:


  1. before the patch is applied: https://d.pr/i/VAZ6LW , https://d.pr/i/qPQ6jZ
  2. after the patch is applied: https://d.pr/i/pR7chq , https://d.pr/i/iG91jA

#18 follow-ups: @seakashdiu
16 months ago

  • Resolution set to invalid
  • Status changed from accepted to closed

Hi @sabernhardt
I think there is a small issue in your https://core.trac.wordpress.org/attachment/ticket/56747/56747.2.patch. In the editor, if the 'I' option is selected, the caption text should appear in italics. If the 'I' option is not selected, the caption text should appear in its normal font. However, it appears that in the current patch, this behavior is reversed.
So, in src/wp-content/themes/twentyseventeen/assets/css/blocks.css,
(line:24 and line: 465) would be ---

font-style: normal;

src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css
and line: 481 would be ---

font-style: italic;

Check the screenshot after I applied,

Normal Mode --
https://i.postimg.cc/Zq16njDP/screenshot-172.png

Front End
https://i.postimg.cc/nVKw8QCS/screenshot-175.png

When I option is selected --
https://i.postimg.cc/T2QhHCqk/screenshot-173.png

Front End
https://i.postimg.cc/Jh2CkHb5/screenshot-174.png

#19 @sabernhardt
16 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

This ticket was mentioned in PR #3885 on WordPress/wordpress-develop by @jakariaistauk.


16 months ago
#20

In the editor, if the 'I' option is selected, the caption text should appear in italics. If the 'I' option is not selected, the caption text should appear in its normal font. However, it appears that in the previous patch, this behavior is reversed. in this patch the reversed issue has been fixed.

Trac ticket: 56747

#21 in reply to: ↑ 18 @jakariaistauk
16 months ago

Replying to seakashdiu:

Hi @sabernhardt
I think there is a small issue in your https://core.trac.wordpress.org/attachment/ticket/56747/56747.2.patch. In the editor, if the 'I' option is selected, the caption text should appear in italics. If the 'I' option is not selected, the caption text should appear in its normal font. However, it appears that in the current patch, this behavior is reversed.
So, in src/wp-content/themes/twentyseventeen/assets/css/blocks.css,
(line:24 and line: 465) would be ---

font-style: normal;

src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css
and line: 481 would be ---

font-style: italic;

Thanks @seakashdiu for the findings. I also found the problem in my setup and provided a patch.

This ticket was mentioned in PR #3886 on WordPress/wordpress-develop by @jakariaistauk.


16 months ago
#22

…ue fixed

In the editor, if the 'I' option is selected, the caption text should appear in italics. If the 'I' option is not selected, the caption text should appear in its normal font. However, it appears that in the previous patch, this behavior is reversed. in this patch the reversed issue has been fixed.

Trac ticket: 56747

#23 @hztyfoon
16 months ago

Thanks seakashdiu for testing 56747.2.patch.
I also tested it & found the issue you reported.
I also found this same issue on gallery block's caption with 56747.2.patch.

gallery caption doesn't show italic when selected italic from toolbar in editor & it shows italic when italic not selected from toolbar.
Adding screenshots:

@hztyfoon
16 months ago

56747.2 issue: gallery caption not italic when selected italic in toolbar

@hztyfoon
16 months ago

56747.2 issue: gallery caption shows italic when not selected italic in toolbar

#24 @hztyfoon
16 months ago

I've also tested PR 3886 by jakariaistauk.
Although this PR appears to solve the main issue of this ticket however, I found it creates another issue in gallery block. That is:

Gallery caption shows italic on frontEnd but, it doesn't show italic in editor.

Editor:
https://i.postimg.cc/zGQzPDGp/56747-PR-Jakaria-initial-gallery-caption-not-italic-in-editor-but-italic-in-front-End.png

FrontEnd:
https://i.postimg.cc/dV3QBZwL/56747-PR-Jakaria-initial-gallery-caption-italic-in-front-End-but-not-italic-in-editor.png

Test report for PR 3886 so far:
❌ Solves the ticket's reported issue but creates another issue with 'gallery block'. ❌

#25 in reply to: ↑ 18 @bgoewert
16 months ago

Replying to seakashdiu:

In the editor, if the 'I' option is selected, the caption text should appear in italics. If the 'I' option is not selected, the caption text should appear in its normal font. However, it appears that in the current patch, this behavior is reversed.

This was already asked about in comment:6 and discussed in subsequent comments.

I believe this is an issue with Gutenberg and not with this theme. On Twenty Seventeen, look at the "Quote" block as an example which also applies italics by default. Under the "Typography" block settings, the "Appearance" option applies font-style as well as font-weight directly to the element. If you apply an italic "Appearance", you'll also notice that the I control is not selected. Additionally, this "Appearance" option is not available for the image caption. This is where I believe the issue lies, and why the italic reversal was added to the I control because you cannot otherwise change the font-style if the default is font-style: italic.

This same problem exists in the Twenty Thirteen theme, but has not yet been reported.

So, in src/wp-content/themes/twentyseventeen/assets/css/blocks.css,
(line:24 and line: 465) would be ---

font-style: normal;

src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css
and line: 481 would be ---

font-style: italic;

This would remove the default styles of the Twenty Seventeen theme and, in my opinion, is not a good solution.

It may be better, at least for this theme, to use the hook enqueue_block_editor_assets in order to extend the editor and apply the italic reversal to the I control so that it is enabled by default and disabled when em tags are applied.

Last edited 16 months ago by bgoewert (previous) (diff)

This ticket was mentioned in PR #3891 on WordPress/wordpress-develop by @bgoewert.


16 months ago
#26

Trac ticket: https://core.trac.wordpress.org/ticket/56747

Applies attachment:56747.2.patch and fixes the image caption italic control I to match the reversed styles.

#27 @bgoewert
16 months ago

PR 3891 attempts to address the I button issue. Note that this gets applied to all <figcaption> tags, meaning the gallery captions are affected as well.

The only known issue I encountered with this is on first click of the gallery caption, the Italic control is always enabled for a non-italic section. After clicking a second time or navigating using the arrow keys, the control properly displays as disabled.

First clicking on the non-italic gallery caption.
https://i.imgur.com/AYio3uf.png

After selecting a different portion of the non-italic gallery caption (using the arrow keys).
https://i.imgur.com/fRIWJr8.png

Last edited 16 months ago by bgoewert (previous) (diff)

#28 @poena
16 months ago

  • Milestone changed from 6.2 to Future Release

I believe what is needed is a way for the theme to pass a value to the caption toolbar so that the correct option is enabled by default.
I do not believe such a filter exists today?
It would need to be solved in the editor first.

I think that activating the i option to revert the themes default design would be confusing for users (As we have seen in the conversations above)

  • Perhaps the caption toolbar needs an option that removes all styling. A similar style option was implemented for the text decoration option.

For now I am moving this from the 6.2 milestone to future release.

#29 @poena
16 months ago

Upstream issue: https://github.com/WordPress/gutenberg/issues/47813

Also, this issue is not only affecting this theme, it is reproducible.

Note: See TracTickets for help on using tickets.