Add Product Query Support for Atomic SKU Block #7385
Conversation
The release ZIP for this PR is accessible via:
|
Size Change: +29 B (0%) Total Size: 990 kB
ℹ️ View Unchanged
|
5bee5ec
to
2d34612
Compare
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the |
4e60efa
to
1fcf246
Compare
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.
The UI of the block is identical to on the editor side.
For me, UI looks different in editor vs frontend.
Editor | Frontend |
---|---|
Also, in this PR for the Rating block, you converted js to ts. I am not sure if that is something we wanna cover in this PR too.
1fcf246
to
d6952b0
Compare
@imanish003 nice catch, thank you! Fixed in d6952b0. The TS conversion took place separately but I have rebased this PR to include those changes from |
TypeScript Errors ReportFiles with errors: 440
assets/js/atomic/blocks/product-elements/sku/index.ts
|
@@ -17,11 +17,16 @@ import { | |||
} from './constants'; | |||
|
|||
const blockConfig: BlockConfiguration = { | |||
...sharedConfig, |
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.
Just want to confirm we don't need this here, as we're spreading/merging the same config object in the registerExperimentalBlockType
function below.
It seems redundant to spread it here in this definition, unless I'm missing something.
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.
Verified, Now UI on Editor and Frontend looks the same 🚀
b2fab83
to
f458d5c
Compare
- Adds isDescendentOfQueryLoop attribute and sets up usage in editor. - Connects Context (via useContext) in editor. - Sets up necessary hierarchy in block index file settings.
Reassign parent array to ancestor array which allows for blocks to be included with more flexibility - i.e., added within groups that are children of the ancestor block.
SSR markup was accidentally using rating classname instead of sku so it was not applying the proper text transform seen in the editor.
This keeps things consistent with the type naming on the other blocks.
We don't need to spread the `sharedConfig` object into the `blockConfig` object when defining `blockConfig` since we spread/merge these two objects when registering the block via `registerExperimentalBlockType`.
3a81110
to
71aace4
Compare
* Add attributes, settings, and editor PQ settings. - Adds isDescendentOfQueryLoop attribute and sets up usage in editor. - Connects Context (via useContext) in editor. - Sets up necessary hierarchy in block index file settings. * Update parent inner blocks config. Reassign parent array to ancestor array which allows for blocks to be included with more flexibility - i.e., added within groups that are children of the ancestor block. * Add dynamic render function for PQ support. * Update to use correct classnames on PHP side. SSR markup was accidentally using rating classname instead of sku so it was not applying the proper text transform seen in the editor. * Rename BlockAttributes type to Attributes This keeps things consistent with the type naming on the other blocks. * Remove redundant spread of sharedConfig object. We don't need to spread the `sharedConfig` object into the `blockConfig` object when defining `blockConfig` since we spread/merge these two objects when registering the block via `registerExperimentalBlockType`. * bot: update checkstyle.xml * bot: update checkstyle.xml * Empty commit to trigger checks. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Adds Product Query support for the atomic SKU block.
On the client side, when the SKU Block is used within the Product Query block, the markup will be rendered on the server side - no javascript related to the SKU block will be loaded.
Fixes #7332
Testing
npm start
(need to run thestart
command to catch the experimental flags).woocommerce/product-sku
block to the Product QueryINNER_BLOCKS_TEMPLATE
inassets/js/blocks/product-query/constants.ts
under line 54 (only for testing, remove afterwards).product-sku-frontend.js
).product-sku-frontend.js
is loaded.WooCommerce Visibility