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

Shadow: enable shadow for more blocks #57103

Closed
4 of 5 tasks
madhusudhand opened this issue Dec 15, 2023 · 11 comments
Closed
4 of 5 tasks

Shadow: enable shadow for more blocks #57103

madhusudhand opened this issue Dec 15, 2023 · 11 comments
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@madhusudhand
Copy link
Contributor

madhusudhand commented Dec 15, 2023

What problem does this address?

As of Gutenberg 17.3, only a button block supports shadow feature. Add support to more blocks.

What is your proposed solution?

Enable the shadow support to following blocks.

Enable for more blocks based on the feedback.

@madhusudhand madhusudhand added [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Dec 15, 2023
@madhusudhand madhusudhand changed the title Shadow: enable shadow to more blocks Dec 15, 2023
vcanales added a commit that referenced this issue Jan 18, 2024
Depends on: #57654
This PR adds box shadow support to the following blocks:

- [ ] Columns
- [ ] Cover
- [ ] Group
- [ ] Image

Issue: #57103
vcanales added a commit that referenced this issue Jan 22, 2024
Depends on: #57654
This PR adds box shadow support to the following blocks:

- [ ] Columns
- [ ] Cover
- [ ] Group
- [ ] Image

Issue: #57103
vcanales added a commit that referenced this issue Jan 24, 2024
Depends on: #57654
This PR adds box shadow support to the following blocks:

- [ ] Columns
- [ ] Cover
- [ ] Group
- [ ] Image

Issue: #57103
vcanales added a commit that referenced this issue Jan 29, 2024
Depends on: #57654
This PR adds box shadow support to the following blocks:

- [ ] Columns
- [ ] Cover
- [ ] Group
- [ ] Image

Issue: #57103
madhusudhand pushed a commit that referenced this issue Feb 5, 2024
Depends on: #57654
This PR adds box shadow support to the following blocks:

- [ ] Columns
- [ ] Cover
- [ ] Group
- [ ] Image

Issue: #57103
vcanales added a commit that referenced this issue Feb 5, 2024
Depends on: #57654
This PR adds box shadow support to the following blocks:

- [ ] Columns
- [ ] Cover
- [ ] Group
- [ ] Image

Issue: #57103
vcanales added a commit that referenced this issue Feb 5, 2024
This PR adds box shadow support to the following blocks:

- Columns
- Cover
- Group
- Image

Issue: #57103

* Add shadow support for image block

* add shadow support for columns block

* add shadow support for individual column block

* add shadow support to cover block

* fix issue where global shadow isn't applied

* revert additional shadow styling for column and columns blocks

* fix image block and skip serialization

* revert changes related to group block

---------

Co-authored-by: vcanales <vcanales@git.wordpress.org>
Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
Co-authored-by: dianeco <dianeco@git.wordpress.org>
@annezazu
Copy link
Contributor

annezazu commented Feb 9, 2024

With Column, Columns, and Image support added, I'm going to assume this can be removed from 6.5 with GB 17.7RC1 shipped today. Happy to add back if needed though.

@colinduwe
Copy link
Contributor

Here's a PR to add shadow support to the Post Featured Image Block
#59616

@markhowellsmead
Copy link

markhowellsmead commented Mar 24, 2024

Was there an explicit decision made to exclude the group block this time around? It would seem to be one of the most logical container blocks to include in the first launch. It would be good to understand and communicate the reasoning by only including particular blocks when adding features which make sense globally.

@annezazu
Copy link
Contributor

Yes! There was an explicit decision made as you can see in this PR: #57982 TLDR: more testing is needed.

@markhowellsmead
Copy link

markhowellsmead commented Mar 24, 2024

Thanks for the reply, Anne. I can see that testing is needed from that but it’s unclear what issues require more extensive testing than any of the other blocks which now have support. Is the implementation of the control to the group block more complicated than on other containers? Is there any testing I can do which would help?

@vcanales
Copy link
Member

Is the implementation of the control to the group block more complicated than on other containers?

This is more or less it. The group and cover block would require changes in the block markup, such as additional wrappers, to make sure that the shadow is rendered correctly and in accordance with the blocks border style. It's not necessarily more complicated, but additional markup wrappers have the potential to introduce regressions down the line.

@markhowellsmead
Copy link

Thanks for the explanation. Is the necessity because of multiple box shadows? How is that different from a column block?

@colorful-tones
Copy link
Member

Hi folks,
We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.

@markhowellsmead
Copy link

The question remains unanswered: why does the addition of box-shadow require additional HTML elements?

vcanales added a commit that referenced this issue May 22, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103
@vcanales
Copy link
Member

@markhowellsmead The question remains unanswered: why does the addition of box-shadow require additional HTML elements?

When I initially enabled support for the cover block, there were inconsistencies between what was seen in the editor and what was in the frontend. In particular, the border radius was not being respected by the shadow. I've tried to enable support again without any modifications to the cover block itself, and it seems to be working fine now — no idea what changed!

PR: #61883

vcanales added a commit that referenced this issue May 23, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103
vcanales added a commit that referenced this issue May 23, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103
vcanales added a commit that referenced this issue May 23, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103
vcanales added a commit that referenced this issue May 25, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103

Co-authored-by: vcanales <vcanales@git.wordpress.org>
Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
vcanales added a commit that referenced this issue May 25, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103

Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
@madhusudhand
Copy link
Contributor Author

With the introduction of the shadow to cover block, marking this issue as complete.
Shadow will be enabled in future for Group block and may be other blocks based on feedback from the community.

carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this issue Jun 4, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: WordPress#57103

Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
vcanales added a commit that referenced this issue Jun 11, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: #57103

Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this issue Jun 17, 2024
On previous attempts to do this, the cover block was displaying
inconsistencies between how it was rendered in the editor vs the
frontend; that doesn't seem to be the case anymore, so we should be
able to enable shadow support without any modifications to the block itself.

I'd still appreciate some eyes on this, because I don't know what
exactly has changed since the first time I attempted this.

Tracking issue: WordPress#57103

Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
6 participants