#52287 closed defect (bug) (fixed)
Twenty Twenty One: Inline Images displaying on new lines (as display: block)
Reported by: | talldanwp | Owned by: | peterwilsoncc |
---|---|---|---|
Milestone: | 5.7 | Priority: | normal |
Severity: | normal | Version: | 5.6 |
Component: | Bundled Theme | Keywords: | good-first-bug has-patch commit |
Focuses: | css | Cc: |
Description (last modified by )
In Twenty Twenty One, inline images are display: block
instead of display: inline-block
.
This is the case both in the editor and in the front-end.
There's a similar ticket here for Twenty Twenty that could be worth fixing at the same time: #50418
Steps to reproduce:
- Add a paragraph block
- Type some text
- Add an inline image
Expected behavior:
The image displays on the same row as the text.
Actual behavior:
The image displays on a new line.
Attachments (10)
Change History (32)
#2
@
4 years ago
@mukesh27 Is that Twenty Twenty One? It doesn't look like the same theme, but granted you might have changed some options.
I'll upload an example of what I see.
This ticket was mentioned in PR #874 on WordPress/wordpress-develop by gonzalezlopezjm.
4 years ago
#3
- Keywords has-patch added; needs-patch removed
Prevents that an inline image inserted into editor goes into new line in the TwentyTwentyOne Theme
Trac ticket: https://core.trac.wordpress.org/ticket/52287
#4
@
4 years ago
Hi!
I have tested the pull request. I did not see any side effects except the following:
There is a style in the image block file that affects all images, not only the block: sass/05-blocks/image/_style.scss#L41
This is duplicating the height and the max width that is already added in the sass/04-elements/media.scss file,
and it is adding a vertical-align:middle
to the images on the front.
Because of the vertical alignment, the inline images do not look the same in the editor and front when the PR is applied.
I do not know the reason why the vertical alignment was included, further testing is needed to see if removing it has any side effects.
The left image is in the editor, right is on the front.
#6
@
4 years ago
- Keywords needs-testing added
Agree with @poena either we have to remove that vertical alignment from the front CSS or we have to include vertical alignment in editor CSS to make the same style on both front and editor.
needs-testing
keyword added for more testing.
#7
follow-up:
↓ 8
@
4 years ago
Tested a local site with Twenty Twenty theme.
Added some text to a paragraph block.
Added an inline image.
Noticed it showed up on a separate line.
Testing the patch.
Command:
npm run grunt patch:https://github.com/WordPress/wordpress-develop/pull/874
I noticed no difference from before and after applying the above.
I also added
npm run build
To see if that would help. No difference.
I assume I am doing something wrong.
#8
in reply to:
↑ 7
@
4 years ago
Replying to paaljoachim:
Tested a local site with Twenty Twenty theme.
Added some text to a paragraph block.
Added an inline image.
Noticed it showed up on a separate line.
Testing the patch.
Command:
npm run grunt patch:https://github.com/WordPress/wordpress-develop/pull/874I noticed no difference from before and after applying the above.
I also added
npm run buildTo see if that would help. No difference.
I assume I am doing something wrong.
This ticket is for Twenty Twenty-One, not Twenty Twenty, but maybe the above was a typo?
#9
@
4 years ago
Hi @poena
That is correct. It was a typo. I am testing with Twenty Twenty One. I am retesting now and applied the patch and even rebuilt the local environment. This is what I see.
#10
@
4 years ago
Did you run npm build inside the twentytwentyone folder?
If you select the image in the editor and look at the source (in the browser dev tools),
does it say
.editor-styles-wrapper img { display: inline-block; height: auto; max-width: 100%; }
#11
@
4 years ago
Went into:
cd wordpress-develop
Added:
git reset --hard
Added:
npm run grunt patch:https://github.com/WordPress/wordpress-develop/pull/874
Added:
npm run dev
Checked http://localhost:8889/
Noticed that the image even a very small one was added to a seperate line.
Checking the Chrome console.
It did not say inline-block. Which means I have not been able to test the patch yet.
CSS seen:
.editor-styles-wrapper img { display: block; height: auto; max-width: 100%; }
---
Logged out of the localhost dev environment site.
Next back in terminal. I added:
npm run build:dev
Hmm I am still not able to successfully test the patch.
@hellofromtonya
Any thoughts?
This ticket was mentioned in Slack in #core by paaljoachim. View the logs.
4 years ago
#13
@
4 years ago
With help from @desrosj and @davidb in the core slack channel I got the patch working.
I added the instructions for testing 2019, 2020 and 2021 here:
https://meta.trac.wordpress.org/ticket/5581#comment:3
#14
@
4 years ago
I've tested the patch for Twenty Twenty One and can confirm together with @rolfsiebers that the inline-block patch does work as intended. Had some trouble finding the correct steps to build the theme as well, but found the correct steps thanks to @paaljoachim.
This ticket was mentioned in Slack in #core by francina. View the logs.
4 years ago
#16
@
4 years ago
- Keywords needs-refresh added
If I understand correctly the current patch has been tested, but not whether the
vertical-align:middle
in comment #4 can be safely removed.
I will mark this as needs refresh.
#19
@
4 years ago
- Keywords commit added; needs-testing needs-refresh removed
Patch 52287.patch is a cleaner patch for inline images with vertical-align: middle
, and only includes the changes to the scss files, not the built files.
#20
@
4 years ago
- Owner set to peterwilsoncc
- Resolution set to fixed
- Status changed from new to closed
In 50351:
This ticket was mentioned in Slack in #core by monikarao. View the logs.
4 years ago
hellofromtonya commented on PR #874:
4 years ago
#22
Ticket closed with changeset https://core.trac.wordpress.org/changeset/50351
In my test on admin inline image working fine.