feat: add variations

Author: HardeepAsrani

includes/gutenberg/feedzy-rss-feeds-loop-block.php

@@ -71,6 +71,7 @@ public function register_block() {
 			'feedzy-rss-feeds-loop-editor-script',
 			'feedzyData',
 			array(
+				'imagepath'    => esc_url( FEEDZY_ABSURL . 'img/' ),
 				'defaultImage' => esc_url( FEEDZY_ABSURL . 'img/feedzy.svg' ),
 				'isPro'        => feedzy_is_pro(),
 			)

js/FeedzyLoop/edit.js

@@ -1,12 +1,18 @@
+/* eslint-disable @wordpress/no-unsafe-wp-apis */
 /**
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
 
-import { serialize } from '@wordpress/blocks';
+import {
+	store as blocksStore,
+	createBlocksFromInnerBlocksTemplate,
+	serialize,
+} from '@wordpress/blocks';
 
 import {
 	store as blockEditorStore,
+	__experimentalBlockVariationPicker as BlockVariationPicker,
 	useBlockProps,
 	BlockControls,
 	InnerBlocks,
@@ -21,7 +27,7 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 import { useState } from '@wordpress/element';
 
@@ -30,14 +36,19 @@ import ServerSideRender from '@wordpress/server-side-render';
 /**
  * Internal dependencies.
  */
+import metadata from './block.json';
 import Placeholder from './placeholder';
 import ConditionsControl from '../Conditions/ConditionsControl';
 
+const { name } = metadata;
+
 const Edit = ({ attributes, setAttributes, clientId }) => {
 	const blockProps = useBlockProps();
 
 	const [isEditing, setIsEditing] = useState(!attributes?.feed?.source);
 
+	const { replaceInnerBlocks, selectBlock } = useDispatch(blockEditorStore);
+
 	const isSelected = useSelect(
 		(select) => {
 			const { isBlockSelected, hasSelectedInnerBlock } =
@@ -60,6 +71,21 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
 		[clientId]
 	);
 
+	const hasInnerBlocks = useSelect(
+		(select) => 0 < select(blockEditorStore).getBlocks(clientId).length,
+		[clientId]
+	);
+
+	const variations = useSelect((select) => {
+		const { getBlockVariations } = select(blocksStore);
+		return getBlockVariations(name, 'block');
+	}, []);
+
+	const defaultVariation = useSelect((select) => {
+		const { getDefaultBlockVariation } = select(blocksStore);
+		return getDefaultBlockVariation(name, 'block');
+	}, []);
+
 	const onSaveFeed = () => {
 		setIsEditing(false);
 	};
@@ -245,63 +271,26 @@ const Edit = ({ attributes, setAttributes, clientId }) => {
 			</InspectorControls>
 
 			<div {...blockProps}>
-				<InnerBlocks
-					template={[
-						[
-							'core/group',
-							{
-								layout: {
-									type: 'constrained',
-								},
-								style: {
-									spacing: {
-										padding: {
-											top: 'var:preset|spacing|30',
-											bottom: 'var:preset|spacing|30',
-											left: 'var:preset|spacing|30',
-											right: 'var:preset|spacing|30',
-										},
-										margin: {
-											top: 'var:preset|spacing|30',
-											bottom: 'var:preset|spacing|30',
-										},
-									},
-								},
-							},
-							[
-								[
-									'core/image',
-									{
-										url: window.feedzyData.defaultImage,
-										alt: '{{feedzy_title}}',
-										href: '{{feedzy_url}}',
-									},
-								],
-								[
-									'core/paragraph',
-									{
-										content:
-											'<a href="{{feedzy_url}}">{{feedzy_title}}</a>',
-									},
-								],
-								[
-									'core/paragraph',
-									{
-										content: '{{feedzy_meta}}',
-										fontSize: 'medium',
-									},
-								],
-								[
-									'core/paragraph',
-									{
-										content: '{{feedzy_description}}',
-										fontSize: 'small',
-									},
-								],
-							],
-						],
-					]}
-				/>
+				{hasInnerBlocks ? (
+					<InnerBlocks />
+				) : (
+					<BlockVariationPicker
+						variations={variations}
+						onSelect={(nextVariation = defaultVariation) => {
+							if (nextVariation) {
+								setAttributes(nextVariation.attributes);
+								replaceInnerBlocks(
+									clientId,
+									createBlocksFromInnerBlocksTemplate(
+										nextVariation.innerBlocks
+									),
+									true
+								);
+							}
+							selectBlock(clientId);
+						}}
+					/>
+				)}
 			</div>
 		</>
 	);

js/FeedzyLoop/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 
-import { registerBlockType } from '@wordpress/blocks';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
 
 import { InnerBlocks } from '@wordpress/block-editor';
 
@@ -14,12 +14,48 @@ import './editor.scss';
 import './style.scss';
 import './extension';
 import metadata from './block.json';
+import variations from './variations';
 import edit from './edit';
 
 const { name } = metadata;
 
 registerBlockType(name, {
 	...metadata,
+	variations,
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: ['core/rss'],
+				transform: (attributes) => {
+					const { feedURL } = attributes;
+
+					if (feedURL) {
+						return createBlock(name, {
+							feed: { type: 'url', source: [feedURL] },
+						});
+					}
+
+					return createBlock(name);
+				},
+			},
+			{
+				type: 'block',
+				blocks: ['feedzy-rss-feeds/feedzy-block'],
+				transform: (attributes) => {
+					const { feeds } = attributes;
+
+					if (feeds) {
+						return createBlock(name, {
+							feed: { type: 'url', source: [feeds] },
+						});
+					}
+
+					return createBlock(name);
+				},
+			},
+		],
+	},
 	edit,
 	save: () => {
 		return <InnerBlocks.Content />;

js/FeedzyLoop/style.scss

@@ -1,5 +1,6 @@
 .wp-block-feedzy-rss-feeds-loop {
     display: grid;
+    gap: 24px;
 
     @media (min-width: 782px) {
         @for $i from 2 through 5 {
@@ -18,4 +19,8 @@
     }
 
     grid-template-columns: repeat(1, 1fr);
+
+    .wp-block-image.is-style-rounded img {
+        border-radius: 9999px;
+    }
 }