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

[domainsupport]

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

[sabernhardt]

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

[sabernhardt]

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.

[domainsupport]

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

[sabernhardt]

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 :)

[audrasjb]

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 :)

[domainsupport]

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]

reversing italics for em elements within captions

[sabernhardt]

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]

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

[domainsupport]

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

[sabernhardt]

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.

[audrasjb]

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.

[domainsupport]

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.

[sabernhardt]

adding cite and i

[sabernhardt]

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.

[riccardodicurti]

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

[bgoewert]

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.

Figure 2: Editor before patch.

Figure 3: Front-end after patch.

Figure 4: Editor after patch.

Figure 5: After enabling italics for the whole caption. Italicization is reversed. This displayed the same on the front-end.

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.

[sadmansakibnadvi]

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

[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;

Check the screenshot after I applied,

Normal Mode --

Front End

When I option is selected --

Front End

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

[jakariaistauk]

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.

…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

[hztyfoon]

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]

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

[hztyfoon]

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

[hztyfoon]

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:

FrontEnd:

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

[bgoewert]

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.

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.

[bgoewert]

​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.

After selecting a different portion of the non-italic gallery caption (using the arrow keys).

[poena]

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.

[poena]

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

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

[sabernhardt]

Related: #58708