@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,90 @@
+import { __ } from '@wordpress/i18n';
+import { BlockInserter, checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { AnimatedVisibility, InputField, Notice, TriggeredPopover } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const ModalEditor = ({ attributes, setAttributes, clientId }) => {
+	const modalId = checkAttr('modalId', attributes, manifest);
+	const modalTitle = checkAttr('modalTitle', attributes, manifest);
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(blockProps, {
+		renderAppender: () => (
+			<BlockInserter
+				clientId={clientId}
+				small
+			/>
+		),
+	});
+
+	return (
+		<div className='p-8'>
+			<div className='mx-auto max-h-[80vh] min-h-[40vh] w-full max-w-[50vw] rounded-lg border border-dashed border-gray-400 p-4'>
+				<div className='flex justify-between gap-4'>
+					<RichText
+						placeholder={__('Modal title', '%g_textdomain%')}
+						value={modalTitle}
+						onChange={(value) => setAttributes({ [getAttrKey('modalTitle', attributes, manifest)]: value })}
+						allowedFormats={[]}
+						withoutInteractiveFormatting
+						disableLineBreaks
+					/>
+
+					<TriggeredPopover
+						triggerButtonIcon={icons.options}
+						triggerButtonProps={{
+							className: modalId?.length < 1 && '[&>svg]:animate-pulse [&>svg]:duration-1000 [&>svg]:text-red-500',
+							type: modalId?.length > 0 ? 'default' : 'danger',
+						}}
+						className='w-80 !p-2'
+					>
+						<InputField
+							icon={icons.id}
+							label={__('Modal unique identifier', '%g_textdomain%')}
+							help={__('Used for opening the modal', '%g_textdomain%')}
+							value={modalId}
+							onChange={(value) => setAttributes({ [getAttrKey('modalId', attributes, manifest)]: value })}
+							className='es-uic-font-mono'
+						/>
+					</TriggeredPopover>
+				</div>
+
+				{modalId?.length > 0 && (
+					<div
+						{...innerBlocksProps}
+						className='space-y-3'
+					/>
+				)}
+
+				<AnimatedVisibility
+					noInitial
+					visible={modalId?.length < 1}
+					className='mx-auto mt-4 w-80'
+				>
+					<Notice
+						type='warning'
+						label={__('Modal unique identifier not set', '%g_textdomain%')}
+					/>
+				</AnimatedVisibility>
+			</div>
+			<AnimatedVisibility
+				noInitial
+				visible={modalId?.length > 0}
+				className='mx-auto mt-4 w-80'
+			>
+				<Notice
+					type='success'
+					label={__('Modal is ready to use', '%g_textdomain%')}
+					subtitle={
+						<>
+							{__('To open, set an URL in any element that accepts it to ', '%g_textdomain%')}
+							<span className='es-uic-font-mono select-all font-medium'>:open-modal-{modalId}:</span>
+						</>
+					}
+				/>
+			</AnimatedVisibility>
+		</div>
+	);
+};

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

@@ -0,0 +1,51 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "modal",
+	"title": "Modal",
+	"description": "Show extra content that is initially hidden from users.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-modal"
+	},
+	"keywords": [
+		"modal"
+	],
+	"example": {
+		"attributes": {
+			"modalId": "my-demo-preview-modal",
+			"modalTitle": "Demo modal"
+		},
+		"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. "
+				}
+			}
+		]
+	},
+	"attributes": {
+		"modalId": {
+			"type": "string"
+		},
+		"modalTitle": {
+			"type": "string"
+		},
+
+		"wrapperUse": {
+			"type": "boolean",
+			"default": false
+		},
+		"wrapperNoControls": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"hasInnerBlocks": true
+}

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

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

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

@@ -0,0 +1,20 @@
+<?php
+
+/**
+ * Modal block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$modalId = Helpers::checkAttr('modalId', $attributes, $manifest);
+$modalTitle = Helpers::checkAttr('modalTitle', $attributes, $manifest);
+
+echo Helpers::render('modal', [
+	'modalId' => $modalId,
+	'modalTitle' => $modalTitle,
+	'modalContent' => $renderContent,
+]);

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

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { createBlock } from '@wordpress/blocks';
+import { getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ParagraphEditor as EditorComponent } from '../../../components/paragraph/components/paragraph-editor';
+import manifest from './../manifest.json';
+import globalManifest from './../../../manifest.json';
+
+export const ParagraphEditor = (keyProps) => {
+	const { attributes, setAttributes, onReplace, mergeBlocks } = keyProps;
+
+	const propsObject = props('paragraph', attributes);
+
+	/**
+	 * Block-splitting logic. If content is available, creates
+	 * a new block with the attributes of the original.
+	 *
+	 * @param {*} value Content value.
+	 */
+	const splitBlocks = (value) => {
+		if (!value) {
+			return createBlock(`${globalManifest.namespace}/${manifest.blockName}`);
+		}
+
+		return createBlock(`${globalManifest.namespace}/${manifest.blockName}`, {
+			...attributes,
+			[`${propsObject.prefix}Content`]: value,
+		});
+	};
+
+	return (
+		<EditorComponent
+			{...propsObject}
+			setAttributes={setAttributes}
+			onSplit={splitBlocks}
+			mergeBlocks={mergeBlocks}
+			onReplace={onReplace}
+			onRemove={onReplace ? () => onReplace([]) : undefined}
+			additionalClass={getTwClasses(attributes, manifest)}
+		/>
+	);
+};

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

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

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

@@ -0,0 +1,79 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "paragraph",
+	"title": "Paragraph",
+	"description": "The block that starts it all.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-paragraph"
+	},
+	"keywords": [
+		"paragraph",
+		"text",
+		"content"
+	],
+	"example": {
+		"attributes": {
+			"paragraphAlign": "start"
+		}
+	},
+	"attributes": {
+		"paragraphAlign": {
+			"type": "string",
+			"default": "start"
+		},
+		"paragraphColor": {
+			"type": "string",
+			"default": "black"
+		}
+	},
+	"options": {
+		"paragraphAlign": [
+			{
+				"tooltip": "Start",
+				"value": "start",
+				"icon": "textAlignLeft"
+			},
+			{
+				"tooltip": "Center",
+				"value": "center",
+				"icon": "textAlignCenter"
+			},
+			{
+				"tooltip": "End",
+				"value": "end",
+				"icon": "textAlignRight"
+			}
+		],
+		"paragraphColor": [
+			"black",
+			"white"
+		]
+	},
+	"components": {
+		"paragraph": "paragraph"
+	},
+	"mergeableAttributes": [
+		{
+			"attribute": "paragraphContent",
+			"mergeStrategy": "append"
+		}
+	],
+	"tailwind": {
+		"options": {
+			"paragraphAlign": {
+				"twClasses": {
+					"start": "text-start",
+					"center": "text-center",
+					"end": "text-end"
+				}
+			},
+			"paragraphColor": {
+				"twClasses": {
+					"black": "text-gray-900 [&>a]:text-navy-900",
+					"white": "text-gray-50 [&>a]:text-navy-900"
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,13 @@
+import { ParagraphEditor } from './components/paragraph-editor';
+import { ParagraphOptions } from './components/paragraph-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Paragraph = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={ParagraphOptions}
+			editor={ParagraphEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/paragraph/paragraph-transforms.js

@@ -0,0 +1,45 @@
+import { createBlock } from '@wordpress/blocks';
+import globalManifest from '../../manifest.json';
+import manifestParagraph from './manifest.json';
+import manifestHeading from '../heading/manifest.json';
+
+export const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [`${globalManifest.namespace}/${manifestHeading.blockName}`],
+			transform: (attributes) => {
+				let paragraphAttributes = {};
+				for (const attribute in attributes) {
+					if (attribute.startsWith('block')) {
+						continue;
+					}
+					const attrKey = attribute.replace('heading', 'paragraph').replace('Heading', 'Paragraph');
+					paragraphAttributes[attrKey] = attributes[attribute];
+				}
+
+				return createBlock(`${globalManifest.namespace}/${manifestParagraph.blockName}`, paragraphAttributes);
+			},
+		},
+		{
+			type: 'raw',
+			priority: 20,
+			selector: 'p',
+			schema: ({ phrasingContentSchema, isPaste }) => ({
+				p: {
+					children: phrasingContentSchema,
+					attributes: isPaste ? [] : ['style', 'id'],
+				},
+			}),
+			transform(node) {
+				const { namespace } = globalManifest;
+
+				const { blockName } = manifestParagraph;
+
+				return createBlock(`${namespace}/${blockName}`, {
+					paragraphParagraphContent: node.innerHTML,
+				});
+			},
+		},
+	],
+};

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

@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * Paragraph block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+echo Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
+	'additionalClass' => Helpers::getTwClasses($attributes, $manifest),
+]));

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

@@ -0,0 +1,12 @@
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { QuoteEditor as EditorComponent } from '../../../components/quote/components/quote-editor';
+
+export const QuoteEditor = ({ attributes, setAttributes }) => {
+	return (
+		<EditorComponent
+			{...props('quote', attributes, {
+				setAttributes,
+			})}
+		/>
+	);
+};

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

@@ -0,0 +1,14 @@
+import { __ } from '@wordpress/i18n';
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { QuoteOptions as OptionsComponent } from '../../../components/quote/components/quote-options';
+
+export const QuoteOptions = ({ attributes, setAttributes }) => {
+	return (
+		<OptionsComponent
+			{...props('quote', attributes, {
+				setAttributes,
+			})}
+			controlOnly
+		/>
+	);
+};

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

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "quote",
+	"title": "Quote",
+	"description": "Showcase a quote.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-card-review"
+	},
+	"keywords": [
+		"quote",
+		"quote"
+	],
+	"components": {
+		"quote": "quote"
+	}
+}

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

@@ -0,0 +1,13 @@
+import { QuoteEditor } from './components/quote-editor';
+import { QuoteOptions } from './components/quote-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Quote = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={QuoteOptions}
+			editor={QuoteEditor}
+		/>
+	);
+};

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

@@ -0,0 +1,13 @@
+<?php
+
+/**
+ * Quote block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+echo Helpers::render('quote', Helpers::props('quote', $attributes));

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

@@ -0,0 +1,6 @@
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ShareEditor as EditorComponent } from '../../../components/share/components/share-editor';
+
+export const ShareEditor = ({ attributes, setAttributes }) => {
+	return <EditorComponent {...props('share', attributes, { setAttributes })} />;
+};

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

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ShareOptions as OptionsComponent } from '../../../components/share/components/share-options';
+
+export const ShareOptions = ({ attributes, setAttributes }) => {
+	return (
+		<OptionsComponent
+			{...props('share', attributes, { setAttributes })}
+			controlOnly
+		/>
+	);
+};

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

@@ -0,0 +1,19 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "share",
+	"title": "Share",
+	"description": "Link to social media accounts or share the current post.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-social-share"
+	},
+	"keywords": [
+		"social",
+		"network",
+		"networks",
+		"share"
+	],
+	"components": {
+		"share": "share"
+	}
+}

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

@@ -0,0 +1,13 @@
+import { ShareEditor } from './components/share-editor';
+import { ShareOptions } from './components/share-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Share = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={ShareOptions}
+			editor={ShareEditor}
+		/>
+	);
+};

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

@@ -0,0 +1,11 @@
+<?php
+
+/**
+ * Share block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+echo Helpers::render('share', Helpers::props('share', $attributes));

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

@@ -0,0 +1,57 @@
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { checkAttr, getAttrKey, getTwClasses, getTwPart, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ImagePlaceholder } from '@eightshift/ui-components';
+import { ShareEditor } from '../../../components/share/components/share-editor';
+import { LinkSectionEditor } from '../../../assets/scripts/link-section-editor';
+import manifest from '../manifest.json';
+
+export const SiteFooterEditor = ({ attributes, setAttributes }) => {
+	const siteFooterPrimary = checkAttr('siteFooterPrimary', attributes, manifest);
+	const siteFooterCopyright = checkAttr('siteFooterCopyright', attributes, manifest);
+	const siteFooterLogoUrl = checkAttr('siteFooterLogoUrl', attributes, manifest);
+
+	return (
+		<div className={getTwClasses(attributes, manifest)}>
+			<div className={getTwPart('topContainer', manifest)}>
+				<ImagePlaceholder
+					style='simple'
+					imageMode='contain'
+					url={siteFooterLogoUrl}
+					size='fullWidth'
+					className={getTwPart('logo', manifest)}
+				/>
+
+				<div className={getTwPart('linksContainer', manifest)}>
+					<LinkSectionEditor
+						links={siteFooterPrimary}
+						onChange={(value) => setAttributes({ [getAttrKey('siteFooterPrimary', attributes, manifest)]: value })}
+						classNames={{
+							sectionContainer: getTwPart('sectionContainer', manifest),
+							sectionTitle: getTwPart('sectionTitle', manifest),
+							link: getTwPart('link', manifest),
+						}}
+					/>
+				</div>
+			</div>
+
+			<div className={getTwPart('bottomContainer', manifest)}>
+				<span className={getTwPart('copyright', manifest)}>
+					&copy;
+					<RichText
+						placeholder={__('Copyright', '%g_textdomain%')}
+						value={siteFooterCopyright}
+						onChange={(value) => setAttributes({ [getAttrKey('siteFooterCopyright', attributes, manifest)]: value })}
+						allowedFormats={[]}
+					/>
+				</span>
+
+				<ShareEditor
+					{...props('share', attributes, {
+						setAttributes,
+					})}
+				/>
+			</div>
+		</div>
+	);
+};