Refactor layout controls to use ToolsPanel instead of PanelBody #59632
Conversation
|
Size Change: +163 B (0%) Total Size: 5.85 MB |
📝 WalkthroughWalkthroughThe changes update the email editor's layout controls by replacing the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LayoutControls
participant ToolsPanel
participant ToolsPanelItem
User->>LayoutControls: Interact with layout controls
LayoutControls->>ToolsPanel: Render ToolsPanel with resetAll prop
ToolsPanel->>ToolsPanelItem: Render ToolsPanelItem with hasValue and onDeselect
ToolsPanelItem->>LayoutControls: Trigger resetAll on deselect
LayoutControls->>LayoutControls: Remove justifyContent from layout attribute
📜 Recent review detailsConfiguration used: .coderabbit.yml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/js/email-editor/changelog/wooplug-4919-migrate-panelbody-to-toolspanel-in-the-email-editor(1 hunks)packages/js/email-editor/src/layouts/flex-email.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{php,js,ts,jsx,tsx}
Instructions used from:
Sources:
⚙️ CodeRabbit Configuration File
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: woocommerce/woocommerce#0
File: .cursor/rules/generate-pr-description.mdc:0-0
Timestamp: 2025-06-30T09:26:55.361Z
Learning: Provide clear, step-by-step instructions for how to test the changes in the PR description.
Learnt from: triple0t
PR: woocommerce/woocommerce#59186
File: packages/js/email-editor/src/store/initial-state.ts:9-10
Timestamp: 2025-06-26T12:13:32.062Z
Learning: In WooCommerce email editor store initialization (packages/js/email-editor/src/store/initial-state.ts), the current_post_id and current_post_type from window.WooCommerceEmailEditor are required parameters that should cause explicit errors if missing, rather than using fallback values or optional chaining. The design preference is to fail fast when critical initialization data is unavailable.
packages/js/email-editor/changelog/wooplug-4919-migrate-panelbody-to-toolspanel-in-the-email-editor (1)
Learnt from: triple0t
PR: woocommerce/woocommerce#59186
File: packages/js/email-editor/src/store/initial-state.ts:9-10
Timestamp: 2025-06-26T12:13:32.062Z
Learning: In WooCommerce email editor store initialization (packages/js/email-editor/src/store/initial-state.ts), the current_post_id and current_post_type from window.WooCommerceEmailEditor are required parameters that should cause explicit errors if missing, rather than using fallback values or optional chaining. The design preference is to fail fast when critical initialization data is unavailable.
packages/js/email-editor/src/layouts/flex-email.tsx (1)
Learnt from: samueljseay
PR: woocommerce/woocommerce#59051
File: plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx:66-70
Timestamp: 2025-06-23T05:47:52.696Z
Learning: For WooCommerce mini-cart blocks in plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/, the standardized conditional pattern for experimental features should be `if ( isExperimentalMiniCartEnabled() ) { blockSettings.save = () => <InnerBlocks.Content />; }` - defaulting to the traditional Save component and only overriding when the experimental feature is enabled.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Check Asset Sizes
- GitHub Check: build
🔇 Additional comments (3)
packages/js/email-editor/src/layouts/flex-email.tsx (2)
14-15: LGTM! Proper import of experimental components.The imports correctly use the experimental ToolsPanel components from @wordpress/components. The naming convention with
__experimentalprefix is appropriate for these components.
127-148: Well-structured ToolsPanel implementation.The refactoring from PanelBody to ToolsPanel is well-implemented:
- Proper use of
resetAllfunction for both ToolsPanel and ToolsPanelItem- Correct
isShownByDefaultprop for core layout controls- Appropriate nesting of controls within Flex layout
- Maintains the same functionality with improved UI structure
packages/js/email-editor/changelog/wooplug-4919-migrate-panelbody-to-toolspanel-in-the-email-editor (1)
1-5: LGTM! Accurate changelog entry.The changelog entry correctly documents this as a patch-level tweak that replaces PanelBody with ToolsPanel component. The description is concise and accurate.
Test using WordPress PlaygroundThe changes in this pull request can be previewed and tested using a WordPress Playground instance. Test this pull request with WordPress Playground. Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit. |
3a55347 to
ac958a7
Compare
Testing GuidelinesHi @triple0t , Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed. Reminder: PR reviewers are required to document testing performed. This includes:
|
Submission Review Guidelines:
Changes proposed in this Pull Request:
Closes WOOPLUG-4919
Screenshots or screen recordings:
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
core/buttonsblock and its configurationTesting that has already taken place:
Changelog entry
Changelog Entry Details
Significance
Type
Message
Changelog Entry Comment
Comment