Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Ensure Slot/Fills render in editor #8111

Merged
merged 3 commits into from
Jan 6, 2023
Merged

Ensure Slot/Fills render in editor #8111

merged 3 commits into from
Jan 6, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Jan 5, 2023

This PR will ensure Slot/Fills are rendered in the editor. To do this the Edit functions for the Cart and Checkout blocks now render a SlotFillProvider from the @woocommerce/blocks-checkout package.

Fixes #7939

Screenshots

Before After
image image

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

Internal Developer Testing

  1. Go to your plugins directory, execute: npx @wordpress/create-block -t @woocommerce/extend-cart-checkout-block slot-fill-test.
  2. Activate the "Slot fill test" plugin.
  3. Open slot-fill-test and edit src/js/index.js. Change the file to this:
/**
 * External dependencies
 */
import { registerPlugin } from '@wordpress/plugins';
import {
	ExperimentalOrderMeta,
	ExperimentalOrderShippingPackages,
} from '@woocommerce/blocks-checkout';
import { getSetting } from '@woocommerce/settings';
/**
 * Internal dependencies
 */
import './style.scss';

import { registerFilters } from './filters';
import { ExampleComponent } from './ExampleComponent';

const exampleDataFromSettings = getSetting('slot-fill-test_data');

const render = () => {
	return (
		<>
			<ExperimentalOrderShippingPackages>
				<div>test</div>
			</ExperimentalOrderShippingPackages>
			<ExperimentalOrderMeta>
				<ExampleComponent data={exampleDataFromSettings} />
			</ExperimentalOrderMeta>
		</>
	);
};

registerPlugin('slot-fill-test', {
	render,
	scope: 'woocommerce-checkout',
});

registerFilters();
  1. run npm run build
  2. Add the Checkout block to a page and ensure the test div you added is rendered.
  3. Ensure you can also see the Data passed to this component: This is some example data from the server Fill rendered under the Checkout sidebar.
  4. Open the Cart in the editor and ensure you can see Data passed to this component: This is some example data from the server rendered below the sidebar.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Allow Slot/Fills in the Cart and Checkout blocks to correctly render in the Block Editor.

opr added 3 commits January 5, 2023 16:27
@opr
Wrap Checkout Edit in SlotFillProvider
cdce1ea 
Required to render Slot/Fills in the editor
@opr
Remove editor check when rendering ExperimentalOrderShippingPackages
05d5477 
We want to render it in the editor and on the front end, so checking is no longer necessary
@opr
Wrap Cart in SlotFillProvider when in editor
d9d4783 
This is so Slot/Fills can be rendered in the preview
@opr opr added status: needs review type: bug The issue/PR concerns a confirmed bug. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Jan 5, 2023
@opr opr self-assigned this Jan 5, 2023
@woocommercebot woocommercebot requested review from a team and alexflorisca and removed request for a team January 5, 2023 17:27
@github-actions
Copy link
Contributor

github-actions bot commented Jan 5, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8111.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 412
  • Total errors: 1906

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jan 5, 2023

Size Change: -133 B (0%)

Total Size: 1.01 MB

Filename Size Change
build/all-products.js 33.5 kB -2 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.5 kB -43 B (0%)
build/cart-frontend.js 28.1 kB -3 B (0%)
build/cart.js 46.9 kB -12 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 14.6 kB -43 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.55 kB -23 B (-1%)
build/checkout.js 40.9 kB -6 B (0%)
build/single-product.js 9.96 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.8 kB
build/active-filters-wrapper-frontend.js 6.07 kB
build/active-filters.js 7.37 kB
build/all-products-frontend.js 11.4 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.8 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.44 kB
build/attribute-filter-wrapper-frontend.js 5.08 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 39.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.64 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.3 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.25 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 344 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/actions-frontend.js 1.86 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.86 kB
build/checkout-blocks/billing-address-frontend.js 1.12 kB
build/checkout-blocks/contact-information-frontend.js 2 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.93 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.25 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.34 kB
build/checkout-blocks/shipping-address-frontend.js 1.11 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 29.4 kB
build/customer-account.js 3.08 kB
build/featured-category.js 13.1 kB
build/featured-product.js 13.3 kB
build/filter-wrapper-frontend.js 13.9 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.22 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 388 B
build/mini-cart-contents-block/footer-frontend.js 2.81 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 16.7 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.26 kB
build/price-filter-frontend.js 13.7 kB
build/price-filter-wrapper-frontend.js 7.08 kB
build/price-filter.js 8.45 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.71 kB
build/product-add-to-cart.js 8.47 kB
build/product-best-sellers.js 7.58 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 443 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 2.15 kB
build/product-button.js 3.84 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 502 B
build/product-category.js 8.57 kB
build/product-image-frontend.js 2.16 kB
build/product-image.js 3.93 kB
build/product-new.js 7.57 kB
build/product-on-sale.js 7.89 kB
build/product-price-frontend.js 2.18 kB
build/product-price.js 1.54 kB
build/product-query.js 5.92 kB
build/product-rating-frontend.js 1.59 kB
build/product-rating.js 919 B
build/product-sale-badge-frontend.js 1.39 kB
build/product-sale-badge.js 814 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.27 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 1.13 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.06 kB
build/product-title-frontend.js 1.59 kB
build/product-title.js 3.31 kB
build/product-top-rated.js 7.81 kB
build/products-by-attribute.js 8.5 kB
build/rating-filter-frontend.js 21.3 kB
build/rating-filter-wrapper-frontend.js 6.29 kB
build/rating-filter.js 7.47 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 6.89 kB
build/single-product-frontend.js 17.4 kB
build/stock-filter-frontend.js 20.9 kB
build/stock-filter-wrapper-frontend.js 3.18 kB
build/stock-filter.js 8.21 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--cde4eab5-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.82 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.2 kB
build/wc-blocks-editor-style-rtl.css 5.41 kB
build/wc-blocks-editor-style.css 5.41 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.88 kB
build/wc-blocks-style-rtl.css 24.8 kB
build/wc-blocks-style.css 24.8 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.7 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

alexflorisca
alexflorisca approved these changes Jan 6, 2023
View reviewed changes
Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

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

Tests well and code looks good, nice one 👍

@github-actions github-actions bot added this to the 9.4.0 milestone Jan 6, 2023
@opr opr merged commit 3600165 into trunk Jan 6, 2023
@opr opr deleted the add/shipping-packages-to-editor branch January 6, 2023 14:53
@gigitux gigitux mentioned this pull request Jan 20, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@alexflorisca alexflorisca alexflorisca approved these changes

Assignees

@opr opr

Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
9.4.0
Development

Successfully merging this pull request may close these issues.

ExperimentalOrderShippingPackages slot is missing in the editor preview
2 participants
@opr @alexflorisca