Twenty Nineteen: Read More block is too wide in the editor

[pitamdey]

in the Twenty Nineteen theme, The Read More block width is different in the editor & frontend.
I have also attached a screenshot for better understanding

[pitamdey]

Editor View

[pitamdey]

Frontend View

[pitamdey]

After applying this solution the issue is resolved

[pitamdey]

I have compared this with other themes and found that we have to make changes for the editor side. So I have added a patch accordingly

[poena]

6.5, before patch

[poena]

Trunk, before patch

[poena]

Hi @pitamdey
Thank you for reporting and working on this issue.
Is there a way to solve it without using important?

---

Ideally ​the theme should not be setting the max width and width like this, then we would not need to override it for this block, but maybe it was needed for older versions of WordPress.

---

@isabel_brison
There is a visible difference between the padding on this block in 6.5 and trunk, so at first, I was confused about why my test showed a different result than the screenshots that were added to this ticket.
In both tests, the block has a background color added.

I am not sure that this spacing change is intentional.
This should be explored further. I do not see any changes to the padding in the block's history:
​https://github.com/WordPress/gutenberg/commits/trunk/packages/block-library/src/read-more

6.5:

element.style {
    white-space: pre-wrap;
    min-width: 1px;
    background-color: rgb(0, 115, 168);
    padding-top: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--40);
    padding-left: var(--wp--preset--spacing--40);
}

Trunk:

element.style {
    white-space: pre-wrap;
    min-width: 1px;
    background-color: rgb(0, 115, 168);
}

Applies the Read More block's width in the theme by adding more classes (total of three when combined with .editor-styles-wrapper):

.editor-styles-wrapper .wp-block-read-more.wp-block-read-more {
  width: -moz-fit-content;
  width: fit-content;
}

to override

.editor-styles-wrapper .wp-block .wp-block {
  width: initial;
}

Trac 61126

[sabernhardt]

Adding one more class should be enough to avoid using !important, and I do not find a need to repeat display: block in the theme styles.

I switched this to .wp-block.wp-block-read-more so it does not look like a mistake.

[isabel_brison]

@poena I can't reproduce that padding on 6.5.2 with Twenty Nineteen.

Was the markup you used created with the Twenty Nineteen theme active? Those wp--preset--spacing properties are usually generated by global styles, so I wouldn't expect to see them on a classic theme.

I switched this to .wp-block.wp-block-read-more so it does not look like a mistake.

Fwiw I personally prefer the classname repetition, as it makes it clear that the intent is to bump up specificity.

[poena]

I reset my WP install including the theme (version 2.8) and I can't reproduce the padding issue anymore.

[karmatosed]

I am unable to reproduce this myself so for now I am going to recommend this is closed. If anyone can we can always reopen.

[karmatosed]

I am going to follow through and close this, thank you everyone.

The ticket is closed, without changing the theme.