[wp-trac] [WordPress Trac] #56747: Twenty Seventeen: Image Block captions are Italic on frontend but not in editor

[WordPress Trac]

#56747: Twenty Seventeen: Image Block captions are Italic on frontend but not in
editor
-------------------------------------------------+-------------------------
 Reporter:  domainsupport                        |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  reopened
 Priority:  normal                               |   Milestone:  6.2
Component:  Bundled Theme                        |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch needs-testing has-         |     Focuses:  css
  screenshots                                    |
-------------------------------------------------+-------------------------

Comment (by bgoewert):

 Replying to [comment:18 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.

 In my opinion, 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. Also notice that this "Appearance"
 option is not available for the image caption. This is where 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
 [https://core.trac.wordpress.org/query?status=accepted&status=assigned&status=closed&status=new&status=reopened&status=reviewing&component=Bundled+Theme&summary=~caption&desc=1&order=id
 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 [https://developer.wordpress.org
 /block-editor/how-to-guides/javascript/extending-the-block-editor/ extend
 the editor] and apply the italic reversal to the `I` button so that it is
 enabled by default and disabled when `em` tags are applied.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56747#comment:25>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform