Fix focus blocks with useBlockProps. Integrate render for #2.

blocks-src/slide/index.js

@@ -9,11 +9,23 @@ import metadata from './block.json';
 
 registerBlockType(
 	metadata.name, {
-		edit: ( { attributes, setAttributes } ) => {
-			return <div className={ 'swiper-slide' }><InnerBlocks /></div>;
+		edit: () => {
+			const blockProps = useBlockProps(
+				{
+					className: 'swiper-slide'
+				}
+			);
+
+			return <div { ...blockProps }><InnerBlocks /></div>;
 		},
-		save: ( { attributes } ) => {
-			return <div className={ 'swiper-slide' }><InnerBlocks.Content /></div>;
+		save: () => {
+			const blockProps = useBlockProps.save(
+				{
+					className: 'swiper-slide'
+				}
+			);
+
+			return <div { ...blockProps }><InnerBlocks.Content /></div>;
 		},
 	}
 );

blocks-src/slider/editor.scss

@@ -1,11 +1,7 @@
 /**
  * Editor styles for backend
  */
-.block-editor-block-list__block[data-type="pronamic/slider"] {
-	max-width: 100%;
-}
-
-.pronamic-block-slider {
+.wp-block-pronamic-slider {
 	border: 3px dashed #ccd0d4;
 	padding: 30px;
 

blocks-src/slider/index.js

@@ -15,24 +15,12 @@ registerBlockType(
 		edit: ( { attributes, setAttributes } ) => {
 			const allowedBlocks = [ 'pronamic/slide' ];
 
-			const autoplay      = attributes.autoplay ? true : false;
-			const effect        = attributes.effect ? attributes.effect : 'slide';
-			const slidesPerView = attributes.slidesPerView ? attributes.slidesPerView : 1;
-			const navigation    = attributes.navigation ? true : false;
-			const pagination    = attributes.pagination ? true : false;
+			const blockProps = useBlockProps(
+				{
+					className: 'swiper'
+				}
+			);
 
-			const blockClasses = `swiper pronamic-block-slider`;
-
-			var swiperConfig = {
-				'autoplay': autoplay,
-				'effect': effect,
-				'slidesPerView': slidesPerView,
-				'navigation': navigation,
-				'pagination': pagination
-			};
-
-			swiperConfig = JSON.stringify( swiperConfig );
-
 			return (
 				<div>
 					<InspectorControls>
@@ -74,8 +62,8 @@ registerBlockType(
 							/>
 						</PanelBody>
 					</InspectorControls>
-		
-					<div className={ blockClasses } data-swiper-settings={ swiperConfig }>
+
+					<div { ...blockProps }>
 						<div class="swiper-wrapper">
 							<InnerBlocks allowedBlocks={ allowedBlocks } />
 						</div>
@@ -84,26 +72,14 @@ registerBlockType(
 			);
 		},
 		save: ( { attributes } ) => {
-			const autoplay      = attributes.autoplay ? true : false;
-			const effect        = attributes.effect ? attributes.effect : 'slide';
-			const slidesPerView = attributes.slidesPerView ? attributes.slidesPerView : 1;
-			const pagination    = attributes.pagination ? true : false;
-			const navigation    = attributes.navigation ? true : false;
+			const blockProps = useBlockProps.save(
+				{
+					className: 'swiper'
+				}
+			);
 
-			const blockClasses = `swiper pronamic-block-slider`;
-
-			var swiperConfig = {
-				'autoplay': autoplay,
-				'effect': effect,
-				'slidesPerView': slidesPerView,
-				'pagination': pagination,
-				'navigation': navigation
-			};
-
-			swiperConfig = JSON.stringify( swiperConfig );
-
 			return (
-				<div className={ blockClasses } data-swiper-settings={ swiperConfig }>
+				<div { ...blockProps }>
 					<div class="swiper-wrapper">
 						<InnerBlocks.Content />
 					</div>

blocks/slide/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'd531c795a7a49ad1a196');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '2f6f65f500f3eade308c');

blocks/slider/index-rtl.css

@@ -1 +1 @@
-.block-editor-block-list__block[data-type="pronamic/slider"]{max-width:100%}.pronamic-block-slider,.pronamic-block-slider .swiper-slide{border:3px dashed #ccd0d4;padding:30px}
+.wp-block-pronamic-slider,.wp-block-pronamic-slider .swiper-slide{border:3px dashed #ccd0d4;padding:30px}

blocks/slider/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'f869356a49703e7ab04e');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => 'aac9262c308aa07bf5e3');

blocks/slider/index.css

@@ -1 +1 @@
-.block-editor-block-list__block[data-type="pronamic/slider"]{max-width:100%}.pronamic-block-slider,.pronamic-block-slider .swiper-slide{border:3px dashed #ccd0d4;padding:30px}
+.wp-block-pronamic-slider,.wp-block-pronamic-slider .swiper-slide{border:3px dashed #ccd0d4;padding:30px}

pronamic-slider.php

@@ -65,7 +65,7 @@ function() {
 );
 
 /**
- * Render Slider Query Loop block
+ * Add slider settings to Pronamic Slider Query block and add slider wrapper.
  */
 \add_filter(
 	'render_block',
@@ -78,11 +78,7 @@ function( $block_content, $block ) {
 			return $block_content;
 		}
 
-		$slider_settings = [];
-
-		if ( isset( $block['attrs']['slidesPerView'] ) ) {
-			$slider_settings[ 'slidesPerView' ] = $block['attrs']['slidesPerView'];
-		}
+		$slider_settings = pronamic_slider_get_settings( $block['attrs'] );
 
 		$processor = new \WP_HTML_Tag_Processor( $block_content );
 
@@ -103,3 +99,54 @@ function( $block_content, $block ) {
 	20,
 	2
 );
+
+/**
+ * Add slider settings to Pronamic Slider block.
+ */
+\add_filter(
+	'render_block',
+	function( $block_content, $block ) {
+		if ( 'pronamic/slider' !== $block['blockName'] ) {
+			return $block_content;
+		}
+
+		$slider_settings = pronamic_slider_get_settings( $block['attrs'] );
+
+		$processor = new \WP_HTML_Tag_Processor( $block_content );
+
+		if ( $processor->next_tag( 'div' ) ) {
+			$processor->set_attribute( 'data-swiper-settings', wp_json_encode( $slider_settings ) );
+		}
+
+		return $processor->get_updated_html();
+	},
+	20,
+	2
+);
+
+/**
+ * Get slider settings.
+ * 
+ * @param array $attrs
+ */
+function pronamic_slider_get_settings( $attrs ) {
+	$slider_settings = [
+		'slidesPerView' => 1,
+		'pagination'    => true,
+		'navigation'    => true,
+	];
+
+	if ( isset( $attrs['slidesPerView'] ) ) {
+		$slider_settings[ 'slidesPerView' ] = $attrs['slidesPerView'];
+	}
+
+	if ( isset( $attrs['pagination'] ) ) {
+		$slider_settings[ 'pagination' ] = $attrs['pagination'];
+	}
+
+	if ( isset( $attrs['navigation'] ) ) {
+		$slider_settings[ 'navigation' ] = $attrs['navigation'];
+	}
+
+	return $slider_settings;
+}