Enable more style options for the Featured Category block #6276
Conversation
rubikuserbot
requested review from
a team and
tjcafferkey
and removed request for
a team
Script Dependencies ReportThe
This comment was automatically generated by the |
|
Size Change: +3.67 kB (0%) Total Size: 867 kB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Each step checks out, and works as you described. However the block on the frontend does not look like it does in the editor. I've screenshotted what I've seen on my end along with the settings I have for the block.
| Syntax | Description |
|---|---|
| Settings 1 |  |
| Settings 2 |  |
| Editor |  |
| Frontend |  |
| @@ -70,6 +77,14 @@ const FeaturedCategory = ( { | |||
| debouncedSpeak, | |||
| triggerUrlUpdate = () => void null, | |||
| } ) => { | |||
| const { gradientValue, setGradient } = useGradient(); | |||
| const onResize = useCallback( | |||
There was a problem hiding this comment.
Do you think it is worth debouncing this callback if it's going to be executed on every resize event?
There was a problem hiding this comment.
Actually it looks like it's already taken care of within the <ConstrainedResizable /> component, but if you could just confirm?
There was a problem hiding this comment.
Yep, I can confirm. I've added useThrottle in this commit to make it easier to create throttled callbacks. I decided to go with throttling instead of debouncing here, because the approach in this case felt a bit more appropriate and responsive.
Gutenberg doesn't do this, by the way, and I was thinking whether I should make a PR to things like the Cover block to throttle/debounce their resize events at some point.
Script Dependencies ReportThe
This comment was automatically generated by the |
Thanks for spotting that. I think I know the problem, I'll take care of it at once! |
Script Dependencies ReportThe
This comment was automatically generated by the |
|
@tjcafferkey This should work now 🙏 |
|
For some reason I'm still not getting a consistent block between the editor and the frontend? I'm using theme TwentyTwenty-Two, perhaps I am doing something wrong but I can't see what? It looks like you also missed a suggested change which is resulting in a corrupt block. #6276 (comment) Editor: Frontend |
This seems to indicate the problem, maybe pulling was unsuccessful on your side or something like that? 🤔 I have included your suggested change in this commit. So, something seems to be wrong with updating? 🤔 |
Sorry, I was also testing the Featured Product block (where you also made changes) which is the other place I suggested you make the same change you made in that commit (so there are two in total) |
|
Oh I see, thanks for pointing that out! Fixed! |
Script Dependencies ReportThe
This comment was automatically generated by the |
* Fix the focal point picker * Fix the resizeable handle * Fix the overlay and move to own section * Enable gradient and duotone * Add padding and fix min height
Co-authored-by: Tom Cafferkey <[email protected]>
sunyatasattva
force-pushed
the
feature/6151-featured-category-styles
branch
from
9bce994 to
daaa085
Compare
Script Dependencies ReportThe
This comment was automatically generated by the |
Script Dependencies ReportThe
This comment was automatically generated by the |
Script Dependencies ReportThe
This comment was automatically generated by the |
|
Thanks for making those changes @sunyatasattva it looks like it is almost there! One thing I've noticed is when I add some padding (
|
Script Dependencies ReportThe
This comment was automatically generated by the |
|
Failing E2E test is unrelated. Merging anyway. |
tarunvijwani
added
type: enhancement
This PR adds several style options to the Featured Product block. The current status of features supported and planned for each block can be seen in this spreadsheet.
This PR fixes the following problems:
Colorsection of the sidebar, while its opacity was controlled elsewhere. This PR consolidates the controls under theOverlaysection.This PR adds the following features:
Closes #6151
Screenshots
Testing
Automated Tests
Manual Testing
How to test the changes in this Pull Request:
Overlaysection and change the overlay color to a gradient.padding-topof the block and notice that the content can't get pushed out of the container, but instead the container resizes.User Facing Testing
These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).
Known issues
Currently, the
bordercontrols don't seem to work. This appears to be an issue related to the current Gutenberg version shipped with Core (Slack thread).❗ Note: Since this PR includes several changes, we agreed that it should have a multi-line changelog. I checked the automation script which creates the changelog, and it seems to be fine with that. There might be some formatting issues with newlines and such, so perhaps, release lead, you might have to adjust a few things before publishing.
Changelog