Add product tabs to product layout #35862
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
focus: react admin
plugin: woocommerce
joshuatf
commented
Dec 6, 2022
| } | ||
|
|
||
| .woocommerce-admin-product-layout .woocommerce-layout__header { | ||
| min-height: $header-height + $product-form-tabs-height; |
Contributor
Author
There was a problem hiding this comment.
This is a hacky workaround. Ideally we would SlotFill this into the header, but there are 2 issues:
- We don't have a slot that works well for this case/layout.
- The
TabPaneldoes not have a way to separate out just the tabs, so we will end up just copying over most of that component from Gutenberg to separate the tabs and content.
This current solution will present issues if another plugin or party modifies the header height or menu widths. We should follow up on this to create the correct slots.
| }; | ||
| }, [] ); | ||
|
|
||
| const tabs = Children.map( children, ( child: JSX.Element ) => { |
Contributor
Author
There was a problem hiding this comment.
I opted to extract the tabs from children so we can avoid using applyFilters and create the necessary SlotFills for extensibility going forward.
See the ProductFormTab below for usage and how a plugin might extend or create a new tab.
Contributor
Test Results SummaryCommit SHA: fa8548d
To view the full API test report, click here. To view the full E2E test report, click here. To view all test reports, visit the WooCommerce Test Reports Dashboard. |
samueljseay
pushed a commit
that referenced
this pull request
Dec 15, 2022
* Add product form tabs to layout * Move product sections to respective tabs * Add tab styling * Add changelog entry * Scroll to top on tab change * Update font weight on active or inactive tabs * Add blank EOL
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
All Submissions:
Changes proposed in this Pull Request:
Adds in the product tabs to the header and moves sections to the respective tabs.
Note that this PR does not yet fully address extensibility, which will be saved for a future cycle.
Closes #35706 .
How to test the changes in this Pull Request:
Products -> Add new (MVP))Other information:
pnpm --filter=<project> changelog add?FOR PR REVIEWER ONLY: