feat (WP 6.3): use block API version 3

Fixes #2804

src/__block-container-template/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/new-block",
 	"title": "New Block",
 	"description": "A new block.",

src/__block-template/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/new-block",
 	"title": "New Block",
 	"description": "A new block.",

src/block-components/block-div/edit.js

@@ -18,7 +18,6 @@ import {
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
-	useBlockEl,
 	useBlockSetAttributesContext,
 } from '~stackable/hooks'
 
@@ -34,7 +33,6 @@ export const Edit = props => {
 	} = props
 	const hasBackground = useBlockAttributesContext( attributes => attributes.hasBackground )
 	const setAttributes = useBlockSetAttributesContext()
-	const blockEl = useBlockEl()
 
 	return (
 		<>
@@ -47,15 +45,13 @@ export const Edit = props => {
 					>
 						<SizeControls.Layout
 							attrNameTemplate="block%s"
-							blockEl={ blockEl }
 							visualGuide={ {
 								highlight: 'outline',
 							} }
 							{ ...props.sizeControlLayoutProps }
 						/>
 						<SizeControls.Spacing
 							attrNameTemplate="block%s"
-							blockEl={ blockEl }
 							visualGuide={ {
 								highlight: 'padding',
 							} }
@@ -81,7 +77,6 @@ export const Edit = props => {
 				>
 					<BorderControls
 						attrNameTemplate="block%s"
-						blockEl={ blockEl }
 					/>
 				</PanelAdvancedSettings>
 			</InspectorStyleControls>

src/block-components/block-div/use-unique-id.js

@@ -8,13 +8,14 @@ import { useBlockSetAttributesContext } from '~stackable/hooks'
  */
 import { useEffect } from '@wordpress/element'
 import { useBlockEditContext } from '@wordpress/block-editor'
-import { dispatch } from '@wordpress/data'
+import { dispatch, useSelect } from '@wordpress/data'
 
 export const createUniqueClass = uid => `${ uid.substring( 0, 7 ) }`
 
 export const useUniqueId = ( attributes, autoApplyUniqueId = true ) => {
 	const { clientId } = useBlockEditContext()
 	const setAttributes = useBlockSetAttributesContext()
+	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
 
 	// Need to do this when the clientId changes (when a block is
 	// cloned/duplicated).
@@ -36,7 +37,8 @@ export const useUniqueId = ( attributes, autoApplyUniqueId = true ) => {
 		} else if ( uniqueClass !== attributes.uniqueId ) {
 			// There should only be one block each with the same unique ID, or
 			// else we'll have styling conflicts.
-			const els = Array.prototype.filter.call( document.querySelectorAll( `[data-block-id="${ attributes.uniqueId }"]` ), el => {
+			const blocks = getEditorDom()?.querySelectorAll( `[data-block-id="${ attributes.uniqueId }"]` ) || []
+			const els = Array.prototype.filter.call( blocks, el => {
 				// Exclude reusable blocks because they can have the same unique ID.
 				return ! el.closest( '[data-type="core/block"]' )
 			} )

src/block-components/container-div/edit.js

@@ -19,7 +19,6 @@ import {
 } from '~stackable/components'
 import {
 	useBlockAttributesContext,
-	useBlockEl,
 	useBlockSetAttributesContext,
 } from '~stackable/hooks'
 
@@ -30,15 +29,11 @@ import { __ } from '@wordpress/i18n'
 
 export const Edit = props => {
 	const {
-		sizeSelector = '.stk-container',
-		borderSelector = '.stk-container',
 		hasContentVerticalAlign = false,
 	} = props
 
 	const hasContainer = useBlockAttributesContext( attributes => attributes.hasContainer )
 	const setAttributes = useBlockSetAttributesContext()
-	const blockElSize = useBlockEl( sizeSelector )
-	const blockElBorder = useBlockEl( borderSelector )
 
 	return (
 		<>
@@ -53,7 +48,6 @@ export const Edit = props => {
 				>
 					<SizeControls.Layout
 						attrNameTemplate="container%s"
-						blockEl={ blockElSize }
 						enableMargin={ false }
 						labels={ {
 							labelHeight: __( 'Container Min. Height', i18n ),
@@ -69,7 +63,6 @@ export const Edit = props => {
 					/>
 					<SizeControls.Spacing
 						attrNameTemplate="container%s"
-						blockEl={ blockElSize }
 						enableMargin={ false }
 						paddingPlaceholder="32"
 						visualGuide={ {
@@ -98,7 +91,6 @@ export const Edit = props => {
 					>
 						<BorderControls
 							attrNameTemplate="container%s"
-							blockEl={ blockElBorder }
 						/>
 					</PanelAdvancedSettings>
 				</InspectorStyleControls>

src/block-components/helpers/borders/edit.js

@@ -106,7 +106,6 @@ export const BorderControls = props => {
 
 BorderControls.defaultProps = {
 	attrNameTemplate: '%s',
-	blockEl: null,
 	borderTypeValue: '', // If not supplied, the value from the attribute will be used, otherwise: '' for none, 'solid', 'dashed', 'dotted'
 	hasBorderType: true,
 	hasBorderControls: true,

src/block/accordion/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/accordion",
 	"title": "Accordion",
 	"description": "A title that your visitors can toggle to view more text. Use as FAQs or multiple ones for an Accordion.",

src/block/accordion/edit.js

@@ -68,6 +68,7 @@ const Edit = props => {
 	const [ isOpen, setIsOpen ] = useState( props.attributes.startOpen )
 	const { hasInnerBlocks } = useBlockContext()
 	const [ hasInitClickHandler, setHasInitClickHandler ] = useState( false )
+	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
 
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 
@@ -76,7 +77,7 @@ const Edit = props => {
 		if ( ! hasInitClickHandler ) {
 			return
 		}
-		const headerEl = document.querySelector( `[data-block="${ clientId }"] [data-type="stackable/column"]` )
+		const headerEl = getEditorDom()?.querySelector( `[data-block="${ clientId }"] [data-type="stackable/column"]` )
 		const onClick = ev => {
 			// Dom't open the accordion if the user is clicking on the icon.
 			if ( ! ev.target.closest( '[data-type="stackable/icon"]' ) ) {
@@ -87,7 +88,7 @@ const Edit = props => {
 		return () => {
 			headerEl?.removeEventListener( 'click', onClick )
 		}
-	}, [ clientId, isOpen, setIsOpen, hasInitClickHandler ] )
+	}, [ clientId, isOpen, setIsOpen, hasInitClickHandler, getEditorDom ] )
 
 	// If the className changes (e.g. layout switch), we need to re-apply the
 	// Accordion open/close click handler.
@@ -99,7 +100,7 @@ const Edit = props => {
 
 	// When first adding an accordion, the inner blocks may not be rendered yet, wait for it.
 	if ( ! hasInitClickHandler ) {
-		const headerEl = document.querySelector( `[data-block="${ clientId }"] [data-type="stackable/column"]` )
+		const headerEl = getEditorDom()?.querySelector( `[data-block="${ clientId }"] [data-type="stackable/column"]` )
 		if ( headerEl ) {
 			setHasInitClickHandler( true )
 		}

src/block/blockquote/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/blockquote",
 	"title": "Blockquote",
 	"description": "Display a quote in style",

src/block/button-group/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/button-group",
 	"title": "Button Group",
 	"description": "Add a customizable button.",

src/block/button/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/button",
 	"title": "Button",
 	"description": "Add a customizable button.",

src/block/call-to-action/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/call-to-action",
 	"title": "Call to Action",
 	"description": "A small section you can use to call the attention of your visitors. Great for calling attention to your products or deals.",

src/block/card/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/card",
 	"title": "Card",
 	"description": "Describe a single subject in a small card. You can use this to describe your product, service or a person.",

src/block/carousel/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/carousel",
 	"title": "Carousel",
 	"description": "A carousel slider.",

src/block/column/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/column",
 	"title": "Inner Column",
 	"description": "A single column with advanced layout options.",

src/block/columns/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/columns",
 	"title": "Columns",
 	"description": "Multiple columns with advanced layout options.",

src/block/count-up/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/count-up",
 	"title": "Count Up",
 	"description": "Showcase your stats. Display how many customers you have or the number of downloads of your app.",

src/block/countdown/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/countdown",
 	"title": "Countdown",
 	"description": "Display a countdown timer on your website.",

src/block/design-library/block.json

@@ -1,4 +1,5 @@
 {
+	"apiVersion": 3,
 	"name": "stackable/design-library",
 	"title": "Design Library",
 	"description": "Choose a layout or block from the Stackable Design Library.",

src/block/divider/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/divider",
 	"title": "Divider",
 	"description": "Add a pause between your content.",

src/block/expand/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/expand",
 	"title": "Expand / Show More",
 	"description": "Display a small snippet of text. Your readers can toggle it to show more information.",

src/block/feature-grid/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/feature-grid",
 	"title": "Feature Grid",
 	"description": "Display multiple product features or services. You can use Feature Grids one after another.",

src/block/feature/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/feature",
 	"title": "Feature",
 	"description": "Display a product feature or a service in a large area.",

src/block/heading/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/heading",
 	"title": "Heading",
 	"description": "Introduce new sections of your content in style.",

src/block/hero/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/hero",
 	"title": "Hero",
 	"description": "A large hero area. Typically used at the very top of a page.",

src/block/horizontal-scroller/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/horizontal-scroller",
 	"title": "Horizontal Scroller",
 	"description": "A slider that scrolls horizontally.",

src/block/icon-box/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/icon-box",
 	"title": "Icon Box",
 	"description": "A small text area with an icon that can be used to summarize features or services",

src/block/icon-button/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/icon-button",
 	"title": "Icon Button",
 	"description": "Add a customizable button.",

src/block/icon-label/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/icon-label",
 	"title": "Icon Label",
 	"description": "An Icon and Heading paired together.",

src/block/icon-list/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/icon-list",
 	"title": "Icon List",
 	"description": "An unordered list with icons. You can use this as a list of features or benefits.",

src/block/icon/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/icon",
 	"title": "Icon",
 	"description": "Pick an icon or upload your own SVG icon to decorate your content.",

src/block/image-box/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/image-box",
 	"title": "Image Box",
 	"description": "Display an image that shows more information when hovered on. Can be used as a fancy link to other pages.",

src/block/image/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/image",
 	"title": "Image",
 	"description": "An image with advanced controls to make a visual statement.",

src/block/map/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/map",
 	"title": "Map",
 	"description": "Embedded Google Map with advanced controls.",

src/block/notification/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/notification",
 	"title": "Notification",
 	"description": "Show a notice to your readers. People can dismiss the notice to permanently hide it.",

src/block/number-box/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/number-box",
 	"title": "Number Box",
 	"description": "Display steps or methods that your users will do in your service.",

src/block/posts/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/posts",
 	"title": "Posts",
 	"description": "Your latest blog posts. Use this to showcase a few of your posts in your landing pages.",

src/block/price/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/price",
 	"title": "Price",
 	"description": "Show a price of a product or service with currency and a suffix styled with different weights",

src/block/pricing-box/block.json

@@ -1,5 +1,5 @@
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "stackable/pricing-box",
 	"title": "Pricing Box",
 	"description": "Display the different pricing tiers of your business.",