changed block render wrapper attributes

changed className supports to false removed ghostkit attributes and classes, since it is added automatically by the Ghost Kit added code to automatically replace old deprecated block 'nk/visual-portfolio' to new 'visual-portfolio/saved'
nk-crew · Nov 25, 2023 · 74dfa0d · 74dfa0d
1 parent 9e7fd65
commit 74dfa0d
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 108 deletions.
diff --git a/build/gutenberg/index.asset.php b/build/gutenberg/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '73ed561ca29115334e44');
+<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'c562e423610c6172e411');
diff --git a/build/gutenberg/index.js b/build/gutenberg/index.js
diff --git a/classes/class-gutenberg-saved.php b/classes/class-gutenberg-saved.php
@@ -2,7 +2,7 @@
 /**
  * Gutenberg block.
  *
- * @package ghostkit
+ * @package visual-portfolio
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -87,8 +87,6 @@ public function register_block_layouts_editor() {
 	 * @return string
 	 */
 	public function block_render( $attributes ) {
-		ob_start();
-
 		$attributes = array_merge(
 			array(
 				'id'        => '',
@@ -108,29 +106,13 @@ public function block_render( $attributes ) {
 
 		$class_name = 'wp-block-visual-portfolio';
 
-		if ( $attributes['align'] ) {
-			$class_name .= ' align' . $attributes['align'];
-		}
-
-		if ( $attributes['className'] ) {
-			$class_name .= ' ' . $attributes['className'];
-		}
-		?>
-		<div
-		<?php
-			echo ' class="' . esc_attr( $class_name ) . '"';
-			echo isset( $attributes['ghostkitSR'] ) && $attributes['ghostkitSR'] ? ' data-ghostkit-sr="' . esc_attr( $attributes['ghostkitSR'] ) . '"' : '';
-		?>
-		>
-			<?php
-			// The function returns clean data because it includes templates that use escaping functions before output.
-            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-			echo Visual_Portfolio_Get::get( array( 'id' => $attributes['id'] ) );
-			?>
-		</div>
-		<?php
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $class_name,
+			)
+		);
 
-		return ob_get_clean();
+		return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, Visual_Portfolio_Get::get( array( 'id' => $attributes['id'] ) ) );
 	}
 }
 new Visual_Portfolio_Gutenberg_Saved_Block();
diff --git a/classes/class-gutenberg.php b/classes/class-gutenberg.php
@@ -2,7 +2,7 @@
 /**
  * Gutenberg block.
  *
- * @package ghostkit
+ * @package visual-portfolio
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -186,21 +186,13 @@ public function block_render( $attributes ) {
 
 		$class_name = 'wp-block-visual-portfolio';
 
-		if ( $attributes['align'] ) {
-			$class_name .= ' align' . $attributes['align'];
-		}
-
-		if ( $attributes['className'] ) {
-			$class_name .= ' ' . $attributes['className'];
-		}
-
-		$result = '<div class="' . esc_attr( $class_name ) . '"' . ( isset( $attributes['ghostkitSR'] ) && $attributes['ghostkitSR'] ? ' data-ghostkit-sr="' . esc_attr( $attributes['ghostkitSR'] ) . '"' : '' ) . '>';
-
-		$result .= Visual_Portfolio_Get::get( $attributes );
-
-		$result .= '</div>';
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $class_name,
+			)
+		);
 
-		return $result;
+		return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, Visual_Portfolio_Get::get( $attributes ) );
 	}
 
 	/**

diff --git a/gutenberg/block-saved/block.json b/gutenberg/block-saved/block.json
@@ -15,7 +15,7 @@
 	"supports": {
 		"ghostkit": true,
 		"anchor": true,
-		"className": true,
+		"className": false,
 		"html": false,
 		"align": ["wide", "full"]
 	}

diff --git a/gutenberg/block-saved/deprecated.js b/gutenberg/block-saved/deprecated.js
diff --git a/gutenberg/block-saved/edit.js b/gutenberg/block-saved/edit.js
@@ -1,5 +1,3 @@
-import classnames from 'classnames/dedupe';
-
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Button, PanelBody, Placeholder, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -19,7 +17,7 @@ const { plugin_name: pluginName } = window.VPGutenbergVariables;
 export default function BlockEdit(props) {
 	const { clientId, setAttributes, attributes } = props;
 
-	const { id, ghostkitClassname } = attributes;
+	const { id } = attributes;
 
 	const { portfolioLayouts } = useSelect(
 		(select) => ({
@@ -111,16 +109,7 @@ export default function BlockEdit(props) {
 		);
 	}
 
-	let className = '';
-
-	// add custom classname.
-	if (ghostkitClassname) {
-		className = classnames(className, ghostkitClassname);
-	}
-
-	const blockProps = useBlockProps({
-		className,
-	});
+	const blockProps = useBlockProps();
 
 	return (
 		<div {...blockProps}>

diff --git a/gutenberg/block-saved/index.js b/gutenberg/block-saved/index.js
@@ -1,9 +1,9 @@
 import './style.scss';
 
-import { registerBlockType } from '@wordpress/blocks';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 
 import metadata from './block.json';
-import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
@@ -82,9 +82,32 @@ registerBlockType('nk/visual-portfolio', {
 	...settings,
 	title,
 	name: 'nk/visual-portfolio',
+	attributes: {
+		id: {
+			type: 'string',
+		},
+		align: {
+			type: 'string',
+		},
+		className: {
+			type: 'string',
+		},
+		anchor: {
+			type: 'string',
+		},
+	},
+	edit: (props) => {
+		const { replaceBlocks } = useDispatch('core/block-editor');
+
+		replaceBlocks(
+			[props.clientId],
+			createBlock('visual-portfolio/saved', props.attributes || {})
+		);
+
+		return null;
+	},
 	supports: {
 		...metadata.supports,
 		inserter: false,
 	},
-	deprecated,
 });
diff --git a/gutenberg/block/block.json b/gutenberg/block/block.json
@@ -10,7 +10,7 @@
 	"supports": {
 		"ghostkit": true,
 		"anchor": true,
-		"className": true,
+		"className": false,
 		"html": false,
 		"align": ["wide", "full"]
 	}

diff --git a/gutenberg/block/edit.js b/gutenberg/block/edit.js
@@ -1,5 +1,3 @@
-import classnames from 'classnames/dedupe';
-
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
@@ -62,7 +60,6 @@ export default function BlockEdit(props) {
 		setup_wizard: setupWizard,
 		preview_image_example: previewExample,
 		layout,
-		ghostkitClassname,
 	} = attributes;
 
 	// Display setup wizard on mount.
@@ -75,13 +72,6 @@ export default function BlockEdit(props) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	let className = '';
-
-	// add custom classname.
-	if (ghostkitClassname) {
-		className = classnames(className, ghostkitClassname);
-	}
-
 	// Display block preview.
 	if (previewExample === 'true') {
 		return (
@@ -94,9 +84,7 @@ export default function BlockEdit(props) {
 		);
 	}
 
-	const blockProps = useBlockProps({
-		className,
-	});
+	const blockProps = useBlockProps();
 
 	return (
 		<div {...blockProps}>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '73ed561ca29115334e44');
		<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => 'c562e423610c6172e411');