-
Notifications
You must be signed in to change notification settings - Fork 219
Add custom className support to Checkout Inner Blocks #4978
Conversation
|
||
const Main = ( { children, className } ) => { | ||
const Main = forwardRef( ( { children, className = '' }, ref ) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This allowed me to combine 2 wrapper divs into one (functional components do not support refs so we need to forward to the div).
Size Change: +811 B (0%) Total Size: 1.23 MB
ℹ️ View Unchanged
|
@senadir Should I avoid |
@@ -86,6 +90,7 @@ export const Edit = ( { | |||
<Block | |||
showReturnToCart={ showReturnToCart } | |||
cartPageId={ cartPageId } | |||
className={ className } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Classname should exist on the useBlockProps
here right?
Package? it's pretty lightweight and we already use it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is testing and looking fine! we will do Cart in a follow up
* Pass classname from DOM to react components * Actions Block ClassName support * Form step field classname support * Payment block className support * Classname support for fields and totals * Order summary classname support * Classname support for order note block * Express payment classname support * Terms block custom class * Let useBlockProps handle class in actions block
* Pass classname from DOM to react components * Actions Block ClassName support * Form step field classname support * Payment block className support * Classname support for fields and totals * Order summary classname support * Classname support for order note block * Express payment classname support * Terms block custom class * Let useBlockProps handle class in actions block
Updates
renderInnerBlocks
to pass the className to our components, and then adds classname support to all checkout inner blocks.Fixes #4963
Testing
How to test the changes in this Pull Request:
Changelog