fix: update block version to 3

inc/class-blocks-animation.php

@@ -67,13 +67,6 @@ public function enqueue_editor_assets() {
 		$asset_file           = include BLOCKS_ANIMATION_PATH . '/build/animation/index.asset.php';
 		$is_using_otter_files = defined( 'BLOCKS_ANIMATION_OTTER' );
 
-		wp_enqueue_style(
-			'otter-animation',
-			BLOCKS_ANIMATION_URL . 'build/animation/index.css',
-			array(),
-			$asset_file['version']
-		);
-
 		if ( defined( 'OTTER_BLOCKS_VERSION' ) ) {
 			array_push( $asset_file['dependencies'], 'otter-blocks' );
 		}
@@ -129,6 +122,22 @@ public function enqueue_editor_assets() {
 	 * @access  public
 	 */
 	public function enqueue_block_frontend_assets() {
+		if ( is_admin() ) {
+			// Editor context (including the iframed canvas): enqueue the animation
+			// styles here so WordPress loads them into the iframe natively.
+			// Enqueuing on `enqueue_block_editor_assets` would load them only in the
+			// parent document, and WordPress 6.9+ warns when copying them into the
+			// iframe.
+			$asset_file = include BLOCKS_ANIMATION_PATH . '/build/animation/index.asset.php';
+			wp_enqueue_style(
+				'otter-animation',
+				BLOCKS_ANIMATION_URL . 'build/animation/index.css',
+				array(),
+				$asset_file['version']
+			);
+			return;
+		}
+
 		if ( did_action( 'parse_request' ) && function_exists( 'amp_is_request' ) && amp_is_request() ) {
 			self::$can_load_frontend = false;
 		}

inc/class-registration.php

@@ -298,8 +298,6 @@ public function enqueue_block_editor_assets() {
 			)
 		);
 
-		wp_enqueue_style( 'otter-editor', OTTER_BLOCKS_URL . 'build/blocks/editor.css', array( 'wp-edit-blocks', 'font-awesome-5', 'font-awesome-4-shims' ), $asset_file['version'] );
-
 		add_filter( 'themeisle-sdk/survey/' . OTTER_PRODUCT_SLUG, array( Dashboard::class, 'get_survey_metadata' ), 10, 2 );
 		do_action( 'themeisle_internal_page', OTTER_PRODUCT_SLUG, 'editor' );
 	}
@@ -340,6 +338,13 @@ public function enqueue_block_assets() {
 		global $wp_query, $wp_registered_sidebars;
 
 		if ( is_admin() ) {
+			// In the editor (including the iframed canvas) enqueue the editor
+			// styles on `enqueue_block_assets` so WordPress loads them into the
+			// iframe natively. Enqueuing on `enqueue_block_editor_assets` would
+			// load them only in the parent document, and WordPress 6.9+ warns
+			// when it copies such styles into the iframe.
+			$asset_file = include OTTER_BLOCKS_PATH . '/build/blocks/blocks.asset.php';
+			wp_enqueue_style( 'otter-editor', OTTER_BLOCKS_URL . 'build/blocks/editor.css', array( 'wp-edit-blocks', 'font-awesome-5', 'font-awesome-4-shims' ), $asset_file['version'] );
 			return;
 		}
 

otter-blocks.php

@@ -10,6 +10,7 @@
  * Version:           3.1.11
  * Author:            ThemeIsle
  * Author URI:        https://themeisle.com
+ * Requires at least:   6.3
  * License:           GPL-2.0+
  * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
  * Text Domain:       otter-blocks

package.json

@@ -16,6 +16,8 @@
 		"build-dev": "NODE_ENV=development npm run build",
 		"analyzer": "NODE_ANALYZER=true npm run build",
 		"lint": "wp-scripts lint-js ./src",
+		"lint:block-api": "node bin/check-block-api-version.mjs",
+		"create-block": "node bin/create-block.mjs",
 		"format": "wp-scripts lint-js ./src --fix",
 		"packages-update": "wp-scripts packages-update",
 		"release": "semantic-release",

readme.txt

@@ -1,7 +1,7 @@
 === Otter Blocks - Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE ===
 Contributors: themeisle, hardeepasrani, soarerobertdaniel7, mariamunteanu1, arinat, uriahs-victor, john_pixle, wildmisha, irinelenache
 Tags: gutenberg blocks, gutenberg, blocks, page builder, fse
-Requires at least: 6.2
+Requires at least: 6.3
 Tested up to: 7.0
 Requires PHP: 5.6
 Stable tag: 3.1.11

src/blocks/blocks/accordion/group/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/accordion",
     "title": "Accordion",
 	"category": "themeisle-blocks",

src/blocks/blocks/accordion/item/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/accordion-item",
     "title": "Accordion Item",
 	"category": "themeisle-blocks",

src/blocks/blocks/advanced-heading/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/advanced-heading",
 	"title": "Advanced Heading",
 	"category": "themeisle-blocks",

src/blocks/blocks/button-group/button/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/button",
 	"title": "Button",
 	"category": "themeisle-blocks",

src/blocks/blocks/button-group/group/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/button-group",
 	"title": "Button Group",
 	"category": "themeisle-blocks",

src/blocks/blocks/circle-counter/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/circle-counter",
 	"title": "Circle Counter",
 	"category": "themeisle-blocks",

src/blocks/blocks/content-generator/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/content-generator",
 	"title": "AI Block (Beta)",
 	"category": "themeisle-blocks",

src/blocks/blocks/countdown/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/countdown",
 	"title": "Countdown",
 	"category": "themeisle-blocks",

src/blocks/blocks/deprecated/about-author/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/about-author",
 	"title": "About Author",
 	"category": "themeisle-blocks",

src/blocks/blocks/deprecated/plugin-cards/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/plugin-cards",
 	"title": "Plugin Card",
 	"category": "themeisle-blocks",

src/blocks/blocks/deprecated/pricing/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/pricing",
 	"title": "Pricing",
 	"category": "themeisle-blocks",

src/blocks/blocks/deprecated/service/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/service",
 	"title": "Service",
 	"category": "themeisle-blocks",

src/blocks/blocks/deprecated/testimonials/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/testimonials",
 	"title": "Testimonials",
 	"category": "themeisle-blocks",

src/blocks/blocks/flip/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/flip",
 	"title": "Flip Card",
 	"category": "themeisle-blocks",

src/blocks/blocks/font-awesome-icons/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/font-awesome-icons",
 	"title": "Icon",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form",
 	"title": "Form",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/file/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-file",
 	"title": "File Field",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/hidden-field/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-hidden-field",
 	"title": "Hidden Field",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/input/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-input",
 	"title": "Text Field",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/multiple-choice/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-multiple-choice",
 	"title": "Form Multiple Choice Input",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/nonce/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-nonce",
 	"title": "CSRF Protection",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/stripe-field/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-stripe-field",
 	"title": "Stripe Field",
 	"category": "themeisle-blocks",

src/blocks/blocks/form/textarea/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/form-textarea",
 	"title": "Textarea Field",
 	"category": "themeisle-blocks",

src/blocks/blocks/google-map/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/google-map",
 	"title": "Google Maps",
 	"category": "themeisle-blocks",

src/blocks/blocks/icon-list/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/icon-list",
 	"title": "Icon List",
 	"category": "themeisle-blocks",

src/blocks/blocks/icon-list/item/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/icon-list-item",
 	"title": "Icon List Item",
 	"category": "themeisle-blocks",

src/blocks/blocks/leaflet-map/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/leaflet-map",
 	"title": "Maps",
 	"category": "themeisle-blocks",

src/blocks/blocks/leaflet-map/edit.js

@@ -31,6 +31,8 @@ import Inspector from './inspector.js';
 import {
 	blockInit,
 	copyScriptAssetToIframe,
+	getBlockDocument,
+	getBlockWindow,
 	getEditorIframe
 } from '../../helpers/block-utility.js';
 
@@ -73,15 +75,26 @@ const Edit = ({
 	const [ isAddingToLocationActive, setActiveAddingToLocation ] = useState( false );
 	const [ openMarker, setOpenMarker ] = useState( null );
 
+	/**
+	 * Resolve the Leaflet global from the window that owns the map node.
+	 *
+	 * In the iframed editor (`apiVersion: 3`, FSE, Tablet/Mobile preview) the map
+	 * lives in the canvas iframe, so Leaflet is loaded into the iframe window —
+	 * use that instance instead of the top-level `window.L` so a single Leaflet
+	 * instance manages both the map and its markers.
+	 */
+	const getLeaflet = () => getBlockWindow( mapRef ).L;
+
 	const createMarker = ( markerProps, dispatch ) => {
-		if ( window.L && map && dispatch && markerProps ) {
+		const L = getLeaflet();
+		if ( L && map && dispatch && markerProps ) {
 			markerProps.id ??= uuidv4();
 			markerProps.latitude ??= map.getCenter().lat;
 			markerProps.longitude ??= map.getCenter().lng;
 			markerProps.title ??= __( 'Add a title', 'otter-blocks' );
 			markerProps.description ??= '';
 
-			const markerMap = window.L.marker([ markerProps.latitude, markerProps.longitude ] || map.getCenter(), {
+			const markerMap = L.marker([ markerProps.latitude, markerProps.longitude ] || map.getCenter(), {
 				draggable: true
 			});
 
@@ -173,16 +186,11 @@ const Edit = ({
 	const [ markersStore, dispatch ] = useReducer( markerReducer, [], () => []);
 	const createMap = () => {
 
-		if ( ! mapRef.current && ! window.L ) {
+		if ( ! mapRef.current ) {
 			return;
 		}
 
-		let { L } = window;
-
-		const iframe = getEditorIframe();
-		if ( Boolean( iframe ) ) {
-			L = iframe.contentWindow?.L;
-		}
+		const L = getLeaflet();
 
 		if ( ! L ) {
 			return ;
@@ -339,11 +347,14 @@ const Edit = ({
 		 * But we need interaction, in our case, to remove the marker.
 		 * So, creating an HTMLElement will allow us to bind function very easily.
 		 */
-		const container = document.createElement( 'div' );
-		const title = document.createElement( 'h6' );
-		const content = document.createElement( 'div' );
-		const description = document.createElement( 'p' );
-		const deleteButton = document.createElement( 'button' );
+		// Build popup nodes in the document that owns the map (the iframe document
+		// when iframed) so they belong to the same tree as the Leaflet popup.
+		const ownerDocument = getBlockDocument( mapRef );
+		const container = ownerDocument.createElement( 'div' );
+		const title = ownerDocument.createElement( 'h6' );
+		const content = ownerDocument.createElement( 'div' );
+		const description = ownerDocument.createElement( 'p' );
+		const deleteButton = ownerDocument.createElement( 'button' );
 
 		title.innerHTML = markerProps.title;
 		description.innerHTML = markerProps.description;

src/blocks/blocks/lottie/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/lottie",
 	"title": "Lottie Animation",
 	"category": "themeisle-blocks",

src/blocks/blocks/modal/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "themeisle-blocks/modal",
 	"title": "Modal",
 	"category": "themeisle-blocks",