@eightshift/frontend-libs-tailwind 1.4.8 → 2.0.0

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

@@ -1,90 +0,0 @@
-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

@@ -1,51 +0,0 @@
-{
-	"$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

@@ -1,14 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<?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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ParagraphEditor as EditorComponent } from '../../../components/paragraph/components/paragraph-editor';
-import manifest from './../manifest.json';
-
-export const ParagraphEditor = ({ attributes, setAttributes, onReplace, mergeBlocks }) => {
-	return (
-		<EditorComponent
-			{...props('paragraph', attributes)}
-			setAttributes={setAttributes}
-			mergeBlocks={mergeBlocks}
-			onReplace={onReplace}
-			onRemove={onReplace ? () => onReplace([]) : undefined}
-			additionalClass={tailwindClasses(attributes, manifest)}
-		/>
-	);
-};

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

@@ -1,38 +0,0 @@
-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

@@ -1,82 +0,0 @@
-{
-	"$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"
-				}
-			}
-		}
-	},
-	"supports": {
-		"splitting": true
-	}
-}

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

@@ -1,13 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<?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::tailwindClasses('base', $attributes, $manifest),
-]));

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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,17 +0,0 @@
-{
-	"$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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<?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

@@ -1,6 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-{
-	"$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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<?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

@@ -1,57 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses, 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={tailwindClasses(attributes, manifest)}>
-			<div className={tailwindClasses('topContainer', attributes, manifest)}>
-				<ImagePlaceholder
-					style='simple'
-					imageMode='contain'
-					url={siteFooterLogoUrl}
-					size='fullWidth'
-					className={tailwindClasses('logo', attributes, manifest)}
-				/>
-
-				<div className={tailwindClasses('linksContainer', attributes, manifest)}>
-					<LinkSectionEditor
-						links={siteFooterPrimary}
-						onChange={(value) => setAttributes({ [getAttrKey('siteFooterPrimary', attributes, manifest)]: value })}
-						classNames={{
-							sectionContainer: tailwindClasses('sectionContainer', attributes, manifest),
-							sectionTitle: tailwindClasses('sectionTitle', attributes, manifest),
-							link: tailwindClasses('link', attributes, manifest),
-						}}
-					/>
-				</div>
-			</div>
-
-			<div className={tailwindClasses('bottomContainer', attributes, manifest)}>
-				<span className={tailwindClasses('copyright', attributes, 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>
-	);
-};