Skip to content

Adding attributes block to product block editor. #38051

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.

Sign up for GitHub

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

Jump to bottom
Merged
joelclimbsthings merged 12 commits into from
May 3, 2023
Merged

Adding attributes block to product block editor. #38051

joelclimbsthings merged 12 commits into from
May 3, 2023

Conversation

@joelclimbsthings
Copy link
Contributor

@joelclimbsthings joelclimbsthings commented Apr 28, 2023 •
edited by jarekmorawski
Loading

Submission Review Guidelines:

Changes proposed in this Pull Request:

This moves all attributes components (there are many) to the product-editor package and adds a block container. Certain logic and styling changes are made to match the updated design.

Note that some of the changes also impact the old editor using the same component(s), in a slightly less than ideal but non-breaking way. This is considered fine since it will be deprecated very soon.

Also note that dragging does not work for the same reason as the images, and I'm a bit uncertain on how to handle thus far.

Closes #37728 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Checkout branch and enable product-block-editor feature flag with the WCA Test Helper plugin.
  2. Navigate to Products -> Add new to view the new block editor.
  3. At the bottom of the initial "General" tab you will find the attributes section.
  4. Compare it to the design: AkVNGImLgSqCObTQ3idVn7-fi-1761-446426&t=kYXzUnc4UoMZ91dd-4
  5. Try adding attributes, deleting them, and ensuring they persist after saving and refreshing the page.
  6. Do not try dragging/reordering, as that functionality currently does not work.

@github-actions github-actions bot added focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Apr 28, 2023
@joelclimbsthings joelclimbsthings force-pushed the add/block-attributes-37728 branch from 8bfa2f4 to 03605ef Compare April 28, 2023 21:45
@joelclimbsthings joelclimbsthings requested a review from a team April 28, 2023 21:54
@joelclimbsthings joelclimbsthings self-assigned this Apr 28, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 28, 2023 •
edited
Loading

Hi @joshuatf,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@joelclimbsthings joelclimbsthings marked this pull request as ready for review April 28, 2023 21:54
@joelclimbsthings joelclimbsthings changed the title Relocating all attribute section components to product-editor package Adding attributes block to product block editor. Apr 28, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Apr 28, 2023 •
edited
Loading

Test Results Summary

Commit SHA: 47752bc

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests26700202690m 50s
E2E Tests1870010019721m 44s
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.

joshuatf
joshuatf previously approved these changes May 1, 2023
View reviewed changes
Copy link
Contributor

@joshuatf joshuatf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Left one question about an unused component, but pre-approving.

Noting that the drag and drop functionality does not work here, but I think we should get this merged and continue to iterate on this experience once we've made some decisions around how we want to handle that.

packages/js/product-editor/package.json
"@woocommerce/currency": "workspace:*",
"@woocommerce/customer-effort-score": "workspace:*",
"@woocommerce/data": "workspace:^4.1.0",
"@woocommerce/data": "workspace:*",
Copy link
Contributor

@joshuatf joshuatf May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

packages/js/product-editor/src/components/attribute-empty-state/attribute-empty-state.tsx Outdated

export const AttributeEmptyState: React.FC< AttributeEmptyStateProps > = ( {
image = AttributeEmptyStateLogo,
image,
Copy link
Contributor

@joshuatf joshuatf May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for removing the default image here? Looks like we're also no longer using this component.

Copy link
Contributor Author

@joelclimbsthings joelclimbsthings May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope! Not a good one. Just removed that component in 9048f92.

packages/js/product-editor/src/components/attribute-empty-state/attribute-empty-state.tsx Outdated
onNewClick?: () => void;
};

export const AttributeEmptyState: React.FC< AttributeEmptyStateProps > = ( {
Copy link
Contributor

@joshuatf joshuatf May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason we need to keep this component if it's no longer in use?

Copy link
Contributor Author

@joelclimbsthings joelclimbsthings May 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, just removed in 9048f92 👍🏻

@joelclimbsthings joelclimbsthings force-pushed the add/block-attributes-37728 branch from 53c7eff to 9048f92 Compare May 1, 2023 19:35
@joelclimbsthings
Copy link
Contributor Author

joelclimbsthings commented May 1, 2023

Thanks @joshuatf , just removed that component as suggested. 👍🏻

@joelclimbsthings joelclimbsthings requested a review from joshuatf May 1, 2023 19:48
joshuatf
joshuatf approved these changes May 3, 2023
View reviewed changes
Copy link
Contributor

@joshuatf joshuatf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for removing that extra component. LGTM!

@joelclimbsthings joelclimbsthings merged commit 3679f01 into trunk May 3, 2023
@joelclimbsthings joelclimbsthings deleted the add/block-attributes-37728 branch May 3, 2023 04:13
@github-actions github-actions bot added this to the 7.8.0 milestone May 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@joshuatf joshuatf joshuatf approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@joelclimbsthings joelclimbsthings

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.8.0

Development

Successfully merging this pull request may close these issues.

Product Block Editor: Create product attributes block

3 participants

@joelclimbsthings @joshuatf