@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/custom/featured-content/components/featured-content-options.js

@@ -0,0 +1,239 @@
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { getAttrKey, checkAttr, getOption, props, fetchFromWpRest } from '@eightshift/frontend-libs-tailwind/scripts';
+import { LoadMoreOptions } from '../../../components/load-more/components/load-more-options';
+import {
+	AnimatedVisibility,
+	AsyncMultiSelect,
+	BaseControl,
+	HStack,
+	NumberPicker,
+	OptionSelect,
+	Select,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
+	const featuredContentPostType = checkAttr('featuredContentPostType', attributes, manifest);
+	const featuredContentTaxonomy = checkAttr('featuredContentTaxonomy', attributes, manifest, true);
+	const featuredContentTerms = checkAttr('featuredContentTerms', attributes, manifest) ?? [];
+	const featuredContentUseCurrentTerm = checkAttr('featuredContentUseCurrentTerm', attributes, manifest);
+	const featuredContentPosts = checkAttr('featuredContentPosts', attributes, manifest) ?? [];
+	const featuredContentExcludeCurrentPost = checkAttr('featuredContentExcludeCurrentPost', attributes, manifest);
+	const featuredContentRandomOrder = checkAttr('featuredContentRandomOrder', attributes, manifest);
+	const featuredContentLayout = checkAttr('featuredContentLayout', attributes, manifest);
+	const featuredContentPerPage = checkAttr('featuredContentPerPage', attributes, manifest);
+
+	const allGenericOption = { label: __('Show all', '%g_textdomain%'), value: '_all', separator: 'below' };
+
+	const postTypeOptions = getOption('featuredContentPostType', attributes, manifest);
+	const taxonomyOptions = [allGenericOption, ...getOption('featuredContentTaxonomy', attributes, manifest)];
+
+	// Set internal store for specific items.
+	const [useSpecificPosts, setUseSpecificPosts] = useState(featuredContentPosts?.length > 0);
+	const [useSpecificTerms, setUseSpecificTerms] = useState(featuredContentTerms?.length > 0);
+
+	return (
+		<>
+			<OptionSelect
+				icon={icons.layoutAlt3}
+				label={__('Layout', '%g_textdomain%')}
+				value={featuredContentLayout}
+				onChange={(value) => setAttributes({ [getAttrKey('featuredContentLayout', attributes, manifest)]: value })}
+				options={getOption('featuredContentLayout', attributes, manifest)}
+				type='menu'
+				inline
+			/>
+
+			<NumberPicker
+				icon={icons.dummySpacer}
+				label={__('Items per page', '%g_textdomain%')}
+				value={featuredContentPerPage}
+				onChange={(value) => setAttributes({ [getAttrKey('featuredContentPerPage', attributes, manifest)]: value })}
+				min={1}
+				inline
+			/>
+
+			<Spacer />
+			<Spacer />
+
+			<OptionSelect
+				icon={icons.multiple}
+				label={__('Content type', '%g_textdomain%')}
+				value={featuredContentPostType?.value}
+				options={postTypeOptions}
+				onChange={(rawValue) => {
+					setUseSpecificPosts(false);
+					setUseSpecificTerms(false);
+
+					const value = postTypeOptions.find((option) => option.value === rawValue);
+
+					setAttributes({
+						[getAttrKey('featuredContentPostType', attributes, manifest)]: value,
+						[getAttrKey('featuredContentTaxonomy', attributes, manifest)]: undefined,
+						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
+						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: false,
+						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
+					});
+				}}
+				type='menu'
+				inline
+			/>
+
+			<OptionSelect
+				aria-label={__('Select items to show', '%g_textdomain%')}
+				value={useSpecificPosts}
+				onChange={() => {
+					setUseSpecificPosts(!useSpecificPosts);
+					setAttributes({
+						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
+					});
+				}}
+				options={[
+					{ label: __('Show all posts', '%g_textdomain%'), value: false },
+					{
+						label: __('Select posts to show', '%g_textdomain%'),
+						value: true,
+						disabled: featuredContentExcludeCurrentPost || featuredContentTaxonomy,
+						subtitle:(featuredContentExcludeCurrentPost || featuredContentTaxonomy) && __('Unavailable when a taxonomy filter is set', '%g_textdomain%')
+					},
+				]}
+				type='radiosSegmented'
+				vertical
+			/>
+
+			<AnimatedVisibility
+				noInitial
+				visible={!useSpecificPosts}
+			>
+				<Toggle
+					icon={icons.excludeItemAlt}
+					label={__('Exclude current', '%g_textdomain%')}
+					subtitle={__('Best used with blog posts', '%g_textdomain%')}
+					checked={featuredContentExcludeCurrentPost}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('featuredContentExcludeCurrentPost', attributes, manifest)]: value })
+					}
+				/>
+			</AnimatedVisibility>
+
+			<AnimatedVisibility
+				noInitial
+				visible={useSpecificPosts && !featuredContentExcludeCurrentPost}
+			>
+				<AsyncMultiSelect
+					key={featuredContentPostType.value}
+					help={__(
+						'Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.',
+						'%g_textdomain%',
+					)}
+					value={featuredContentPosts}
+					loadOptions={fetchFromWpRest(featuredContentPostType?.api, {
+						processLabel: ({ title: { rendered } }) => rendered,
+						noCache: true,
+					})}
+					onChange={(value) => setAttributes({ [getAttrKey('featuredContentPosts', attributes, manifest)]: value })}
+					reFetchOnSearch
+				/>
+			</AnimatedVisibility>
+
+			<Spacer />
+
+			<Toggle
+				icon={icons.dice}
+				label={__('Randomize order', '%g_textdomain%')}
+				checked={featuredContentRandomOrder}
+				onChange={(value) => setAttributes({ [getAttrKey('featuredContentRandomOrder', attributes, manifest)]: value })}
+			/>
+
+			<Spacer />
+			<Spacer />
+
+			<OptionSelect
+				icon={icons.filter}
+				label={__('Taxonomy', '%g_textdomain%')}
+				value={(featuredContentTaxonomy ?? allGenericOption)?.value}
+				options={taxonomyOptions}
+				onChange={(rawValue) => {
+					setUseSpecificPosts(false);
+					setUseSpecificTerms(false);
+
+					const value =
+						rawValue === '_all' ? allGenericOption : taxonomyOptions.find((option) => option.value === rawValue);
+
+					setAttributes({
+						[getAttrKey('featuredContentTaxonomy', attributes, manifest)]:
+							value === allGenericOption ? undefined : value,
+						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
+						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: false,
+						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
+					});
+				}}
+				hidden={featuredContentPostType?.taxonomies?.length < 1}
+				type='menu'
+				inline
+			/>
+
+			<OptionSelect
+				aria-label={__('Select terms to show', '%g_textdomain%')}
+				value={featuredContentUseCurrentTerm ? 'current' : useSpecificTerms ? 'manual' : 'all'}
+				onChange={(value) => {
+					setUseSpecificTerms(value === 'manual');
+					setAttributes({
+						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
+						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: value === 'current',
+					});
+				}}
+				options={[
+					{ label: __('Show all terms', '%g_textdomain%'), value: 'all' },
+					{
+						label: __('Select terms to show', '%g_textdomain%'),
+						value: 'manual',
+					},
+					{
+						label: __('Show same terms as current post', '%g_textdomain%'),
+						value: 'current',
+					},
+				]}
+				type='radiosSegmented'
+				vertical
+			/>
+
+			<AnimatedVisibility
+				noInitial
+				visible={useSpecificTerms && !featuredContentUseCurrentTerm}
+			>
+				<AsyncMultiSelect
+					key={featuredContentTaxonomy?.value}
+					help={__(
+						'Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.',
+						'%g_textdomain%',
+					)}
+					value={featuredContentTerms}
+					loadOptions={fetchFromWpRest(featuredContentTaxonomy?.api, {
+						fields: 'id,name',
+						processId: ({ id }) => id,
+						processLabel: ({ name }) => name,
+						noCache: true,
+					})}
+					onChange={(value) => setAttributes({ [getAttrKey('featuredContentTerms', attributes, manifest)]: value })}
+					reFetchOnSearch
+					placeholder={__('Select terms to show', '%g_textdomain%')}
+				/>
+			</AnimatedVisibility>
+
+			<Spacer />
+
+			<LoadMoreOptions
+				{...props('loadMore', attributes, {
+					setAttributes,
+				})}
+				label={__('"Load more" button', '%g_textdomain%')}
+				noUseToggle
+			/>
+		</>
+	);
+};

package/blocks/init/src/Blocks/custom/featured-content/featured-content-block.js

@@ -0,0 +1,13 @@
+import { FeaturedContentEditor } from './components/featured-content-editor';
+import { FeaturedContentOptions } from './components/featured-content-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const FeaturedContent = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={FeaturedContentOptions}
+			editor={FeaturedContentEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/featured-content/featured-content.php

@@ -0,0 +1,139 @@
+<?php
+
+/**
+ * Featured content block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockName = $attributes['blockName'] ?? '';
+
+$featuredContentPostType = Helpers::checkAttr('featuredContentPostType', $attributes, $manifest);
+$featuredContentTaxonomy = Helpers::checkAttr('featuredContentTaxonomy', $attributes, $manifest);
+$featuredContentTerms = Helpers::checkAttr('featuredContentTerms', $attributes, $manifest);
+$featuredContentPosts = Helpers::checkAttr('featuredContentPosts', $attributes, $manifest);
+$featuredContentExcludeCurrentPost = Helpers::checkAttr('featuredContentExcludeCurrentPost', $attributes, $manifest);
+$featuredContentUseCurrentTerm = Helpers::checkAttr('featuredContentUseCurrentTerm', $attributes, $manifest);
+$featuredContentRandomOrder = Helpers::checkAttr('featuredContentRandomOrder', $attributes, $manifest);
+$featuredContentLoadMoreUse = Helpers::checkAttr('featuredContentLoadMoreUse', $attributes, $manifest);
+$featuredContentPerPage = Helpers::checkAttr('featuredContentPerPage', $attributes, $manifest);
+
+$featuredContentServerSideRender = Helpers::checkAttr('featuredContentServerSideRender', $attributes, $manifest);
+
+if (!empty($featuredContentPostType)) {
+	$featuredContentPostType = $featuredContentPostType['value'];
+}
+
+if (!empty($featuredContentTaxonomy)) {
+	$featuredContentTaxonomy = $featuredContentTaxonomy['value'];
+}
+
+global $post;
+
+$args = [
+	'post_type' => $featuredContentPostType,
+	'posts_per_page' => $featuredContentPerPage,
+	'fields' => 'ids',
+	'order' => 'ASC',
+];
+
+// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+if (isset($_GET['current-page'])) {
+	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+	$skipToPage = sanitize_text_field(wp_unslash($_GET['current-page']));
+
+	$args['posts_per_page'] = $featuredContentPerPage * $skipToPage;
+}
+
+if ($featuredContentTaxonomy) {
+	$args['tax_query'][0] = [
+		'taxonomy' => $featuredContentTaxonomy,
+		'field' => 'id',
+	];
+
+	if ($featuredContentTerms) {
+		$args['tax_query'][0]['terms'] = array_map(fn ($item) => $item['value'], (array) $featuredContentTerms);
+	} elseif ($featuredContentUseCurrentTerm && $post instanceof WP_Post) {
+		$currentTerms = get_the_terms($post->ID, strval($featuredContentTaxonomy));
+
+		if ($currentTerms) {
+			$args['tax_query'][0]['terms'] = wp_list_pluck($currentTerms, 'term_id');
+		}
+	} else {
+		// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
+		$args['tax_query'][0]['operator'] = 'NOT IN';
+	}
+}
+
+$excludeList = [];
+
+if ($featuredContentExcludeCurrentPost && $post instanceof WP_Post) {
+	$excludeList[] = $post->ID;
+}
+
+if ($excludeList) {
+	$args['post__not_in'] = $excludeList;
+}
+
+if ($featuredContentPosts) {
+	$args['post__in'] = array_map(fn($item) => $item['value'], (array)$featuredContentPosts);
+	$args['orderby'] = 'post__in';
+}
+
+if ($featuredContentRandomOrder) {
+	$args['orderby'] = 'rand';
+}
+
+$mainQuery = new WP_Query($args);
+
+if (!$mainQuery->have_posts()) {
+	return;
+}
+
+wp_reset_postdata();
+
+$unique = Helpers::getUnique();
+$loadMoreId = "{$blockName}-{$unique}";
+
+$args['posts_per_page'] = $featuredContentPerPage;
+?>
+
+<div>
+	<div
+		id="<?php echo esc_attr($loadMoreId); ?>"
+		class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>"
+		aria-live="polite"
+	>
+		<?php
+		echo Helpers::render(
+			'cards',
+			[
+				'items' => $mainQuery->posts,
+			],
+			'blocks',
+			false,
+			"{$blockName}/partials"
+		);
+		?>
+	</div>
+
+	<?php
+	// phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
+	if (!$featuredContentServerSideRender && $mainQuery->max_num_pages > 1) { ?>
+		<div class="<?php echo esc_attr(Helpers::getTwPart('loadMoreContainer', $manifest)); ?>">
+			<?php
+			echo Helpers::render('load-more', Helpers::props('loadMore', $attributes, [
+				'loadMoreInitialItems' => wp_json_encode($mainQuery->posts),
+				'loadMoreQuery' => wp_json_encode($args),
+				'loadMoreId' => $loadMoreId,
+				'loadMoreType' => $blockName,
+				'loadMorePage' => $skipToPage ?? 1,
+			]));
+			?>
+		</div>
+	<?php } ?>
+</div>

package/blocks/init/src/Blocks/custom/featured-content/manifest.json

@@ -0,0 +1,131 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "featured-content",
+	"title": "Featured content",
+	"description": "Display posts with an option for dynamic loading and taxonomy filtering.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-featured-posts"
+	},
+	"keywords": [
+		"featured",
+		"posts",
+		"content"
+	],
+	"attributes": {
+		"featuredContentPostType": {
+			"type": "object",
+			"default": {
+				"label": "Post",
+				"value": "post",
+				"api": "posts",
+				"taxonomies": [
+					"category"
+				]
+			}
+		},
+		"featuredContentTaxonomy": {
+			"type": "object"
+		},
+		"featuredContentTerms": {
+			"type": "array"
+		},
+		"featuredContentPosts": {
+			"type": "array"
+		},
+		"featuredContentUseCurrentTerm": {
+			"type": "boolean",
+			"default": false
+		},
+		"featuredContentExcludeCurrentPost": {
+			"type": "boolean",
+			"default": false
+		},
+		"featuredContentServerSideRender": {
+			"type": "boolean",
+			"default": false
+		},
+		"featuredContentRandomOrder": {
+			"type": "boolean",
+			"default": false
+		},
+		"featuredContentLayout": {
+			"type": "string",
+			"default": "threeCols"
+		},
+		"featuredContentPerPage": {
+			"type": "integer",
+			"default": 6
+		}
+	},
+	"components": {
+		"loadMore": "loadMore"
+	},
+	"options": {
+		"featuredContentPostType": [
+			{
+				"label": "Post",
+				"value": "post",
+				"api": "posts",
+				"taxonomies": [
+					"category"
+				]
+			},
+			{
+				"label": "Page",
+				"value": "page",
+				"api": "pages"
+			}
+		],
+		"featuredContentTaxonomy": [
+			{
+				"label": "Category",
+				"value": "category",
+				"api": "categories"
+			}
+		],
+		"featuredContentLayout": [
+			{
+				"label": "2 columns",
+				"value": "twoCols",
+				"endIcon": "twoColumns"
+			},
+			{
+				"label": "3 columns",
+				"value": "threeCols",
+				"endIcon": "columns"
+			},
+			{
+				"label": "4 columns",
+				"value": "fourCols",
+				"endIcon": "fourColumns",
+				"separator": "below"
+			},
+			{
+				"label": "Auto columns",
+				"value": "auto",
+				"endIcon": "gridAutoCols"
+			}
+		]
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "grid gap-6"
+		},
+		"parts": {
+			"loadMoreContainer": {
+				"twClasses": "flex justify-center w-full mt-6"
+			}
+		},
+		"options": {
+			"featuredContentLayout": {
+				"twClasses": {
+					"twoCols": "grid-cols-1 sm:grid-cols-2",
+					"threeCols": "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+					"fourCols": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4",
+					"auto": "grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(20rem,1fr))]"
+				}
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/featured-content/partials/cards.php

@@ -0,0 +1,39 @@
+<?php
+
+/**
+ * Template for the Featured Content view - Card content map from ID.
+ *
+ * @package %g_namespace%
+ */
+
+$items = $attributes['items'] ?? [];
+$hasEnterAnimation = $attributes['hasEnterAnimation'] ?? false;
+
+$output = [];
+
+if (!$items) {
+	return $output;
+}
+
+foreach ($items as $item) {
+	$featuredImage = get_the_post_thumbnail_url($item, 'full');
+	?>
+	<a
+		href="<?php echo esc_attr(get_the_permalink($item)); ?>"
+		class="group rounded-xl relative overflow-hidden w-full aspect-[0.875] bg-gradient-to-b from-gray-100 to-white shadow-md hover:shadow-lg transition duration-500 hover:duration-1000 border border-gray-200 <?php echo $hasEnterAnimation ? 'animate-in zoom-in-110 fade-in' : ''; ?>"
+	>
+		<?php if (!empty($featuredImage)) { ?>
+			<img class="absolute inset-0 !size-full object-cover group-hover:scale-105 origin-bottom transition-transform duration-500 group-hover:duration-1000 pointer-events-none select-none" src="<?php echo esc_url($featuredImage); ?>" alt="">
+			<div class=" absolute inset-0 backdrop-blur [mask-image:_linear-gradient(to_bottom,_transparent_5%,_black_50%)]"></div>
+			<div class=" absolute inset-0 backdrop-blur-lg [mask-image:_linear-gradient(to_bottom,_transparent_20%,_black_100%)]"></div>
+			<div class=" absolute inset-0 backdrop-blur-3xl [mask-image:_linear-gradient(to_bottom,_transparent_85%,_black_100%)]"></div>
+			<div class="absolute inset-0 backdrop-saturate-[125%] backdrop-brightness-150"></div>
+			<div class="absolute inset-0 bg-black/50 [&+div]:text-white [mask-image:_linear-gradient(to_bottom,_transparent_25%,_black_80%)]"></div>
+		<?php } ?>
+		<div class="flex flex-col justify-end p-6 absolute inset-0 group-hover:scale-[1.025] origin-bottom-left transition-transform duration-500 group-hover:duration-1000">
+			<p class="text-xs opacity-45 uppercase mb-0.5"><?php echo get_the_date('', $item); ?></p>
+			<p class="~sm/md:~text-lg/3xl !leading-tight font-display line-clamp-3 text-balance"><?php echo esc_html(get_the_title($item)); ?></p>
+		</div>
+	</a>
+	<?php
+}

package/blocks/init/src/Blocks/custom/group/components/group-editor.js

@@ -0,0 +1,8 @@
+import { InnerBlocks } from '@wordpress/block-editor';
+import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const GroupEditor = ({ clientId }) => {
+	return (
+		<InnerBlocks renderAppender={() => <BlockInserter clientId={clientId} />} />
+	);
+};

package/blocks/init/src/Blocks/custom/group/group-block.js

@@ -0,0 +1,14 @@
+import { useSelect } from '@wordpress/data';
+import { overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts/editor';
+import { GroupEditor } from './components/group-editor';
+
+export const Group = (props) => {
+	useSelect((select) => {
+		overrideInnerBlockAttributes(select, props.clientId, {
+			wrapperNoWidthControls: true,
+			wrapperWidth: 'none',
+		});
+	});
+
+	return <GroupEditor {...props} />;
+};

package/blocks/init/src/Blocks/custom/group/group.php

@@ -0,0 +1,10 @@
+<?php
+
+/**
+ * Template for the Group block.
+ *
+ * @package %g_namespace%
+ */
+
+// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+echo $renderContent;

package/blocks/init/src/Blocks/custom/group/manifest.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "group",
+	"title": "Group",
+	"description" : "Group similar content together.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-group"
+	},
+	"keywords": [
+		"container",
+		"section",
+		"group"
+	],
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "eightshift-boilerplate/heading",
+				"attributes": {
+					"headingHeadingContent": "Lorem ipsum dolor sit amet"
+				}
+			},
+			{
+				"name": "eightshift-boilerplate/paragraph",
+				"attributes": {
+					"paragraphParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet. Aenean accumsan lacus justo, a lacinia turpis semper condimentum. "
+				}
+			}
+		]
+	},
+	"hasInnerBlocks": true
+}

package/blocks/init/src/Blocks/custom/heading/components/heading-editor.js

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { HeadingEditor as EditorComponent } from '../../../components/heading/components/heading-editor';
+import manifest from './../manifest.json';
+
+export const HeadingEditor = ({ attributes, setAttributes }) => {
+	return (
+		<EditorComponent
+			{...props('heading', attributes, {
+				setAttributes,
+			})}
+			additionalClass={getTwClasses(attributes, manifest)}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/heading/components/heading-options.js

@@ -0,0 +1,38 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, getOption, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { HeadingOptions as OptionsComponent } from '../../../components/heading/components/heading-options';
+import { ColorPicker, OptionSelect } from '@eightshift/ui-components';
+import { getColorOption } from '../../../assets/scripts/shared';
+import manifest from '../manifest.json';
+
+export const HeadingOptions = ({ attributes, setAttributes }) => {
+	const headingAlign = checkAttr('headingAlign', attributes, manifest);
+	const headingColor = checkAttr('headingColor', attributes, manifest);
+
+	return (
+		<OptionsComponent
+			{...props('heading', attributes, {
+				setAttributes,
+			})}
+			additionalControls={
+				<>
+					<ColorPicker
+						colors={getColorOption('headingColor', manifest)}
+						onChange={(value) => setAttributes({ [getAttrKey('headingColor', attributes, manifest)]: value })}
+						type='textColor'
+						value={headingColor}
+						aria-label={__('Text color', '%g_textdomain%')}
+					/>
+
+					<OptionSelect
+						value={headingAlign}
+						onChange={(value) => setAttributes({ [getAttrKey('headingAlign', attributes, manifest)]: value })}
+						options={getOption('headingAlign', attributes, manifest)}
+						aria-label={__('Text alignment', '%g_textdomain%')}
+					/>
+				</>
+			}
+			controlOnly
+		/>
+	);
+};