Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Featured Image Block: Center alignment does not work #37936

Open
jordesign opened this issue Jan 13, 2022 · 9 comments
Open

Featured Image Block: Center alignment does not work #37936

jordesign opened this issue Jan 13, 2022 · 9 comments
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Type] Bug An existing feature does not function as intended

Comments

@jordesign
Copy link
Contributor

jordesign commented Jan 13, 2022

Description

When Center alignment for the Featured Image block is selected - it does not change the alingment.

I expected selecting center alignment to center the image - but it remained left aligned.

Step-by-step reproduction instructions

  1. Make sure your site has at least one post with a Featured Image uploading
  2. Open the index template in the site editor
  3. Add or select a Featured Image block inside the Query Loop > Post Object
  4. Use the 'Dimensions' settings to make the image smaller (200px or so)
  5. Use the alignment tool (in the toolbar) to select left alignment for the Featured Image

Screenshots, screen recording, code snippet

Screen Shot 2022-01-13 at 4 11 16 pm

Environment info

  • WP 5.8.3
  • Gutenberg 12.3.2
  • tested with Quadrat and TT1 Blocks themes

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@amustaque97 amustaque97 added the [Block] Post Featured Image Affects the Post Featured Image Block label Jan 13, 2022
@devinmaeztri devinmaeztri added the [Type] Bug An existing feature does not function as intended label Jan 13, 2022
@devinmaeztri
Copy link
Member

Hi @jordesign! Thanks for reporting this. I'm able to reproduce the steps.
To add a context, the featured image can't be centered when custom width is applied.

@annezazu
Copy link
Contributor

Noting that this is still an issue with WordPress 6.0.1 and Gutenberg 13.6. This was repeated during the fifteenth call for testing for the FSE Outreach Program when @paaljoachim was trying to left align a featured image. After dimensions are changed, it seems as though aligning the block doesn't work at all. I'm not sure how/if this might overlap with general block support tracking issues: #41113

@paaljoachim
Copy link
Contributor

@draganescu and @ntsekouras would this be something for you to take a closer look at?

@draganescu
Copy link
Contributor

draganescu commented Aug 23, 2022

(edited) Tested this:

  • the problem seems to only appear when the block is used inside a query loop
    • stand alone featured image block gets properly aligned
    • featured image block in a query loop's post template does not get aligned I think this is another issue. In the theme I tested the featured image was properly aligned in the query loop if it is in a group block in the post template. It does not work if it is directly in the post template.

@parashshresh
Copy link

Set the margin of the featured image in theme.json.

"blocks":
{
"core/post-featured-image": {
"spacing": {
"margin": {
"bottom": "0px",
"top": "0px",
"left": "auto",
"right": "auto"
}
}
}

@draganescu
Copy link
Contributor

I think this may have been fixed in trunk.

@masperber
Copy link

Noting that this is still an issue in WordPress 6.1.1 and Gutenberg 14.7.3

@carolinan
Copy link
Contributor

This seems to be true for multiple blocks inside a query loop / post template block that has an alignment setting and not a text alignment. I quickly tested the following blocks in 6.2 RC and Twenty Twenty Three:

Cannot be right aligned or centered:
Image, post featured image, calendar, table., search.

Except for the two image blocks, I can't think of any reasons to add these blocks to the query, but they are allowed and they should work.

Can be right aligned or centered:
File block

@carolinan
Copy link
Contributor

I can see that the file block specifically adds the following CSS:

	&.aligncenter {
		text-align: center;
	}

	&.alignright {
		/*rtl:ignore*/
		text-align: right;
	}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

9 participants