Make WordPress Core

Opened 8 weeks ago

Last modified 7 weeks ago

#60872 new defect (bug)

Twenty Nineteen : Read More Block Text Decoration is not working properly

Reported by: pitamdey's profile pitamdey Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch changes-requested
Focuses: css Cc:

Description

In the Twenty Nineteen theme when we add the Read More Block then there is no text decoration on the editor side but on the front, it is showing text decoration underlined. So it is not the same in both the end.

Attachments (4)

Editor.png (177.5 KB) - added by pitamdey 8 weeks ago.
Editor Side
Frontend.png (157.5 KB) - added by pitamdey 8 weeks ago.
Frontend View
60872.patch (892 bytes) - added by pitamdey 8 weeks ago.
After applying this solution the issue is resolved
60872.1.patch (463 bytes) - added by pitamdey 6 weeks ago.
In other's theme it is following different style like in some the default is text-decoration is underlined and in some it is none in both the side. So I am doing the changes particular for this theme only. So here is the patch that applied the changes in scss file

Download all attachments as: .zip

Change History (5)

@pitamdey
8 weeks ago

Editor Side

@pitamdey
8 weeks ago

Frontend View

@pitamdey
8 weeks ago

After applying this solution the issue is resolved

#1 @poena
7 weeks ago

  • Keywords has-patch changes-requested added

Hi

I can reproduce the issue with the styles in the editor and front not matching. (6.6 alpha, theme version 2.8).

When the text decoration option is explicitly set to no underline, underline or strikethrough, the style works both in the editor and front because the style is inline in the style attribute. But the default does not match:
The default style for the block is to not show the underline.
The default style for the theme is to show the underline.

With the PR, all text decoration settings work, as well as the default.
The PR changes the link style of the read more on the front of the site, this is minor, but it is an unexpected change on existing sites. The link style no longer matches the original theme design, or other links in the content.

I would like to make the following change requests:

  • Twenty Nineteen uses SASS. This means that any changes that are made directly to the .css files will be overwritten when the SASS files are built. CSS changes need to made in the .scss files.
  • Try adding the underline to the block in the editor instead, so that the editor matches the front.
  • Make sure that all text decoration settings still work after changing the editor style.

I believe this is the WordPress core editor block style that needs to be overwritten:

.wp-block-read-more:where(:not([style*=text-decoration])) {
    text-decoration: none;
}

@pitamdey
6 weeks ago

In other's theme it is following different style like in some the default is text-decoration is underlined and in some it is none in both the side. So I am doing the changes particular for this theme only. So here is the patch that applied the changes in scss file

Note: See TracTickets for help on using tickets.