@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,130 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "carousel",
+	"blockJsClass": "js-carousel",
+	"title": "Carousel",
+	"description" : "Display various kinds of content in a carousel.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-carousel"
+	},
+	"keywords": [
+		"carousel"
+	],
+	"example": {
+		"attributes": {
+			"carouselNumItems": "3"
+		},
+		"innerBlocks": [
+			{
+				"name": "eightshift-boilerplate/carousel-item",
+				"attributes": {
+					"wrapperNoControls": true,
+					"carouselItemImageUrl": "https://loremflickr.com/400/400"
+				}
+			},
+			{
+				"name": "eightshift-boilerplate/carousel-item",
+				"attributes": {
+					"wrapperNoControls": true,
+					"carouselItemImageUrl": "https://loremflickr.com/400/400"
+				}
+			},
+			{
+				"name": "eightshift-boilerplate/carousel-item",
+				"attributes": {
+					"wrapperNoControls": true,
+					"carouselItemImageUrl": "https://loremflickr.com/400/400"
+				}
+			}
+		]
+	},
+	"hasInnerBlocks": true,
+	"attributes": {
+		"carouselLoop": {
+			"type": "boolean",
+			"default": false
+		},
+		"carouselNavigation": {
+			"type": "boolean",
+			"default": false
+		},
+		"carouselPagination": {
+			"type": "boolean",
+			"default": false
+		},
+		"carouselCenterSlides": {
+			"type": "boolean",
+			"default": true
+		},
+		"carouselNumItems": {
+			"type": "string",
+			"default": "auto"
+		},
+		"carouselItemGap": {
+			"type": "string",
+			"default": "md"
+		}
+	},
+	"options": {
+		"carouselItemGap": [
+			{
+				"label": "0",
+				"value": "0"
+			},
+			{
+				"label": "4",
+				"value": "sm"
+			},
+			{
+				"label": "12",
+				"value": "md"
+			},
+			{
+				"label": "24",
+				"value": "lg"
+			},
+			{
+				"label": "40",
+				"value": "xl"
+			},
+			{
+				"label": "64",
+				"value": "2xl"
+			}
+		]
+	},
+	"resources": {
+		"prevIcon": "<svg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='m10 22 9.23-9M10 22l9.23 9M10 22h24' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>",
+		"nextIcon": "<svg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='m34 22-8.859-9M34 22l-8.859 9M34 22H10' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>"
+	},
+	"nodeDependency": [
+		"embla-carousel@8"
+	],
+	"innerBlocksDependency": [
+		"image"
+	],
+	"tailwind": {
+		"base": {
+			"twClasses": "grid grid-flow-col justify-items-center auto-cols-[85%] sm:auto-cols-[minmax(20rem,_auto)] *:select-none",
+			"twClassesEditor": "grid grid-flow-col justify-items-center auto-cols-[minmax(20rem,_auto)]"
+		},
+		"parts": {
+			"container": {
+				"twClasses": "overflow-hidden py-2",
+				"twClassesEditor": "overflow-y-hidden overflow-x-auto w-full has-[>_:empty]:hidden"
+			}
+		},
+		"options": {
+			"carouselItemGap": {
+				"twClasses": {
+					"sm": "gap-x-1",
+					"md": "gap-x-3",
+					"lg": "gap-x-6",
+					"xl": "gap-x-10",
+					"2xl": "gap-x-16"
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,21 @@
+import { useSelect } from '@wordpress/data';
+import { GutenbergBlock, overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts/editor';
+import { ColumnEditor } from './components/column-editor';
+import { ColumnOptions } from './components/column-options';
+
+export const Column = (props) => {
+	useSelect((select) => {
+		overrideInnerBlockAttributes(select, props.clientId, {
+			wrapperNoWidthControls: true,
+			wrapperWidth: 'none',
+		});
+	});
+
+	return (
+		<GutenbergBlock
+			{...props}
+			options={ColumnOptions}
+			editor={ColumnEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/column/column-hooks.js

@@ -0,0 +1,32 @@
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import globalManifest from '../../manifest.json';
+import manifest from './manifest.json';
+import { getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+
+const { namespace } = globalManifest;
+
+const { blockName } = manifest;
+const fullBlockName = `${namespace}/${blockName}`;
+
+// Add options to the Gutenberg markup.
+const parentComponentBlock = createHigherOrderComponent((BlockListBlock) => {
+	return (innerProps) => {
+		const { name, attributes } = innerProps;
+
+		let updatedProps = { ...innerProps };
+
+		if (name === fullBlockName) {
+			updatedProps = {
+				...innerProps,
+				className: getTwClasses(attributes, manifest, '[&_>_.wp-block]:!mx-0 !m-0'),
+			};
+		}
+
+		return <BlockListBlock {...updatedProps} />;
+	};
+}, 'parentComponentBlock');
+
+export const hooks = () => {
+	addFilter('editor.BlockListBlock', fullBlockName, parentComponentBlock);
+};

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

@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * Column block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockClass = Helpers::getTwClasses($attributes, $manifest);
+?>
+
+<div class="<?php echo esc_attr($blockClass); ?>" >
+	<?php
+	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+	echo $renderContent;
+	?>
+</div>

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

@@ -0,0 +1,19 @@
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const ColumnEditor = ({ clientId }) => {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(blockProps, {
+		renderAppender: false,
+	});
+
+	return (
+		<>
+			<div {...innerBlocksProps} className='contents *:!m-0' />
+			<BlockInserter
+				small
+				clientId={clientId}
+			/>
+		</>
+	);
+};