@siratik/wp-component-library 0.1.0 → 0.1.2

package/components/block-appender/index.js

@@ -0,0 +1,135 @@
+// WordPress dependencies.
+import { store as blockEditorStore, Inserter } from "@wordpress/block-editor";
+import { Button } from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import { Icon, plus } from "@wordpress/icons";
+
+import { __ } from "@wordpress/i18n";
+
+function CustomBlockAppender({
+    rootClientId,
+    appenderTitle,
+    appenderLabel,
+    appenderClassModifier,
+}) {
+    return (
+        <Inserter
+            __experimentalIsQuick
+            rootClientId={rootClientId}
+            renderToggle={({ onToggle, disabled }) => (
+                <Button
+                    showTooltip={true}
+                    className={`block-list-appender__toggle built-block-appender--${appenderClassModifier} `}
+                    onClick={onToggle}
+                    disabled={disabled}
+                    label={appenderLabel}
+                    icon={plus}
+                >
+                    {appenderTitle}
+                </Button>
+            )}
+            isAppender
+        />
+    );
+}
+
+function CustomInspectorAppender({
+    rootClientId,
+    appenderTitle,
+    appenderLabel,
+    appenderClassModifier,
+}) {
+    return (
+        <Inserter
+            __experimentalIsQuick
+            rootClientId={rootClientId}
+            renderToggle={({ onToggle, disabled }) => (
+                <Button
+                    className={`built-block-appender built-block-appender--${appenderClassModifier} `}
+                    onClick={onToggle}
+                    disabled={disabled}
+                    label={appenderLabel}
+                    variant="secondary"
+                >
+                    <Icon icon={plus} />
+                    {appenderTitle}
+                </Button>
+            )}
+            isAppender
+        />
+    );
+}
+
+function CustomColumnAppender({
+    rootClientId,
+    appenderTitle,
+    appenderLabel,
+    appenderClassModifier,
+}) {
+    return (
+        <Inserter
+            __experimentalIsQuick
+            rootClientId={rootClientId}
+            renderToggle={({ onToggle, disabled }) => (
+                <div className=" built-block-appender-column__wrapper">
+                    <Button
+                        showTooltip={true}
+                        className={`block-list-appender__toggle built-block-appender-column__appender built-block-appender--${appenderClassModifier} `}
+                        onClick={onToggle}
+                        disabled={disabled}
+                        label={appenderLabel}
+                        icon={plus}
+                    >
+                        {appenderTitle}
+                    </Button>
+                </div>
+            )}
+            isAppender
+        />
+    );
+}
+
+const CustomInlineAppender = ({
+    clientId,
+    label = __("Add Block", "wp-component-library"),
+}) => {
+    const isActive = useSelect(
+        (select) => {
+            const { isBlockSelected, hasSelectedInnerBlock } =
+                select(blockEditorStore);
+            return (
+                isBlockSelected(clientId) ||
+                hasSelectedInnerBlock(clientId, true)
+            );
+        },
+        [clientId],
+    );
+
+    if (!isActive) {
+        return null;
+    }
+
+    return (
+        <Inserter
+            __experimentalIsQuick
+            rootClientId={clientId}
+            renderToggle={({ onToggle, disabled }) => (
+                <Button
+                    className="block-list-appender__toggle"
+                    icon={plus}
+                    label={label}
+                    onClick={onToggle}
+                    disabled={disabled}
+                />
+            )}
+            isAppender
+        />
+    );
+};
+
+export {
+    CustomBlockAppender,
+    CustomColumnAppender,
+    CustomInlineAppender,
+    CustomInspectorAppender,
+};

package/components/block-extension/index.js

@@ -0,0 +1,214 @@
+/**
+ * registerBlockExtension / unregisterBlockExtension
+ *
+ * Drop-in replacement for @10up/block-components registerBlockExtension.
+ * Fully backwards-compatible API — same arguments, same behaviour.
+ *
+ * Registers four WordPress hooks per extension:
+ *   1. blocks.registerBlockType  — merges extra `attributes`
+ *   2. editor.BlockEdit          — injects `Edit` controls (before | after block)
+ *   3. editor.BlockListBlock     — applies `classNameGenerator` / `inlineStyleGenerator` in editor
+ *   4. blocks.getSaveContent.extraProps — applies class/style to saved HTML
+ *
+ * @param {string|string[]} blockName
+ *   Block name(s) to extend. Pass `"*"` or `"all"` to match every block.
+ * @param {Object}   options
+ * @param {Object}   [options.attributes={}]            Extra attribute definitions.
+ * @param {Function} [options.classNameGenerator]       (attributes) => string
+ * @param {Function} [options.inlineStyleGenerator]     (attributes) => Object
+ * @param {Function} options.Edit                       React component for inspector controls.
+ * @param {string}   options.extensionName              Unique name used in filter namespaces.
+ * @param {'before'|'after'} [options.order='after']   Whether Edit renders before or after BlockEdit.
+ */
+
+import { addFilter, removeFilter } from "@wordpress/hooks";
+import { createHigherOrderComponent } from "@wordpress/compose";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * Minimal className utility — avoids adding clsx as a dependency.
+ *
+ * @param {...(string|null|undefined|false)} classes
+ * @returns {string}
+ */
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ").trim();
+}
+
+export function registerBlockExtension(
+	blockName,
+	{
+		attributes = {},
+		classNameGenerator = () => "",
+		inlineStyleGenerator,
+		Edit,
+		extensionName,
+		order = "after",
+	},
+) {
+	const isArray = Array.isArray(blockName);
+
+	// Normalise wildcard
+	if (blockName === "*") { blockName = "all"; }
+
+	/**
+	 * Returns true when `name` should be extended.
+	 *
+	 * @param {string} name Block name.
+	 * @returns {boolean}
+	 */
+	const matches = (name) => {
+		if (blockName === "all") { return true; }
+		if (isArray) { return blockName.includes(name); }
+		return name === blockName;
+	};
+
+	// Build a stable namespace segment for hook IDs.
+	const ns = isArray ? blockName.join("-") : blockName;
+	const prefix = `wpcl/${ns}/${extensionName}`;
+
+	// ── 1. Attributes ────────────────────────────────────────────────────────
+
+	addFilter(
+		"blocks.registerBlockType",
+		`${prefix}/addAttributesToBlock`,
+		(settings, name) => {
+			if (!matches(name)) { return settings; }
+			return {
+				...settings,
+				attributes: { ...settings.attributes, ...attributes },
+			};
+		},
+	);
+
+	// ── 2. Editor controls (BlockEdit HOC) ───────────────────────────────────
+
+	const withEdit = createHigherOrderComponent(
+		(BlockEdit) => (props) => {
+			const { name, isSelected } = props;
+
+			if (!matches(name)) { return createElement(BlockEdit, props); }
+
+			const before = order === "before" && isSelected;
+			const after = order === "after" && isSelected;
+			// Fallback: any unrecognised order value renders after (same as 10up)
+			const fallback = !before && !after && isSelected;
+
+			return createElement(
+				Fragment,
+				null,
+				before && createElement(Edit, props),
+				createElement(BlockEdit, props),
+				after && createElement(Edit, props),
+				fallback && createElement(Edit, props),
+			);
+		},
+		"addSettingsToBlock",
+	);
+
+	addFilter("editor.BlockEdit", `${prefix}/addSettingsToBlock`, withEdit);
+
+	// ── 3. Class + style in editor (BlockListBlock HOC) ──────────────────────
+
+	const withBlockListBlock = createHigherOrderComponent(
+		(BlockListBlock) => (props) => {
+			const {
+				name,
+				attributes: blockAttrs,
+				className = "",
+				style = {},
+				wrapperProps,
+			} = props;
+
+			if (!matches(name)) { return createElement(BlockListBlock, props); }
+
+			const generatedClass = classNameGenerator(blockAttrs);
+
+			let mergedStyle = { ...style };
+			let generatedStyle = null;
+
+			if (typeof inlineStyleGenerator === "function") {
+				generatedStyle = inlineStyleGenerator(blockAttrs);
+				mergedStyle = {
+					...style,
+					...(wrapperProps?.style ?? {}),
+					...generatedStyle,
+				};
+			}
+
+			if (!generatedClass && !generatedStyle) {
+				return createElement(BlockListBlock, props);
+			}
+
+			const mergedClass = cx(className, generatedClass);
+
+			return createElement(BlockListBlock, {
+				...props,
+				className: mergedClass,
+				wrapperProps: { ...wrapperProps, style: mergedStyle },
+			});
+		},
+		"addAdditionalPropertiesInEditor",
+	);
+
+	addFilter(
+		"editor.BlockListBlock",
+		`${prefix}/addAdditionalPropertiesInEditor`,
+		withBlockListBlock,
+	);
+
+	// ── 4. Class + style in saved HTML ───────────────────────────────────────
+
+	addFilter(
+		"blocks.getSaveContent.extraProps",
+		`${prefix}/addAdditionalPropertiesToSavedMarkup`,
+		(extraProps, blockType, blockAttrs) => {
+			const { className = "", style = {} } = extraProps;
+
+			if (!matches(blockType.name)) { return extraProps; }
+
+			const generatedClass = classNameGenerator(blockAttrs);
+
+			let mergedStyle = { ...style };
+			let generatedStyle = null;
+
+			if (typeof inlineStyleGenerator === "function") {
+				generatedStyle = inlineStyleGenerator(blockAttrs);
+				mergedStyle = { ...style, ...generatedStyle };
+			}
+
+			if (!generatedClass && !generatedStyle) { return extraProps; }
+
+			const mergedClass = cx(className, generatedClass);
+
+			return { ...extraProps, className: mergedClass, style: mergedStyle };
+		},
+	);
+}
+
+/**
+ * Remove a previously registered block extension.
+ *
+ * @param {string|string[]} blockName     Same value passed to registerBlockExtension.
+ * @param {string}          extensionName Same extensionName passed to registerBlockExtension.
+ */
+export function unregisterBlockExtension(blockName, extensionName) {
+	if (!blockName || !extensionName) { return; }
+
+	if (blockName === "*") { blockName = "all"; }
+
+	const isArray = Array.isArray(blockName);
+	const ns = isArray ? blockName.join("-") : blockName;
+	const prefix = `wpcl/${ns}/${extensionName}`;
+
+	removeFilter("blocks.registerBlockType", `${prefix}/addAttributesToBlock`);
+	removeFilter("editor.BlockEdit", `${prefix}/addSettingsToBlock`);
+	removeFilter(
+		"editor.BlockListBlock",
+		`${prefix}/addAdditionalPropertiesInEditor`,
+	);
+	removeFilter(
+		"blocks.getSaveContent.extraProps",
+		`${prefix}/addAdditionalPropertiesToSavedMarkup`,
+	);
+}

package/components/business-hours/SpecialHoursControl.js

@@ -0,0 +1,211 @@
+/**
+ * Holiday / special hours list: date ranges (MM-DD) that are closed or have
+ * their own hours. Controlled: `entries` is the special_opening_hours array,
+ * `onChange` receives the whole next array.
+ *
+ * @package Siratik/WP-Component-Library
+ */
+
+import {
+	Flex,
+	FlexBlock,
+	FlexItem,
+	TextControl,
+	TimePicker,
+	ToggleControl,
+} from "@wordpress/components";
+import { useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { DragHandle, RemoveButton, Repeater } from "../repeater";
+
+function generateId() {
+	return Math.random().toString(36).slice(2, 10);
+}
+
+function timeStringToObject(str) {
+	if (!str) {
+		return { hours: 9, minutes: 0 };
+	}
+	const [h, m] = str.split(":");
+	return { hours: parseInt(h, 10), minutes: parseInt(m, 10) };
+}
+
+function timeObjectToString(obj) {
+	if (!obj || typeof obj.hours !== "number") {
+		return "09:00";
+	}
+	return `${String(obj.hours).padStart(2, "0")}:${String(obj.minutes ?? 0).padStart(2, "0")}`;
+}
+
+/**
+ * A single holiday row rendered inside the Repeater.
+ */
+function HolidayRow({ item, onUpdate, is24HourFormat = false }) {
+	const [openTime, setOpenTime] = useState(() =>
+		timeStringToObject(item.opens || "09:00"),
+	);
+	const [closeTime, setCloseTime] = useState(() =>
+		timeStringToObject(item.closes || "17:00"),
+	);
+
+	const update = (field, value) => onUpdate({ ...item, [field]: value });
+
+	const handleOpenChange = (obj) => {
+		setOpenTime(obj);
+		update("opens", timeObjectToString(obj));
+	};
+	const handleCloseChange = (obj) => {
+		setCloseTime(obj);
+		update("closes", timeObjectToString(obj));
+	};
+
+	return (
+		<Flex gap={3} align="start" wrap>
+			<DragHandle />
+
+			<FlexBlock style={{ minWidth: "130px" }}>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={__("Label", "wp-component-library")}
+					help={__("e.g. Christmas Day", "wp-component-library")}
+					value={item.label ?? ""}
+					onChange={(v) => update("label", v)}
+				/>
+			</FlexBlock>
+
+			<FlexBlock style={{ minWidth: "110px" }}>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={__("From (MM-DD)", "wp-component-library")}
+					// eslint-disable-next-line @wordpress/i18n-hyphenated-range -- MM-DD date, not a range.
+					help={__("e.g. 12-25", "wp-component-library")}
+					value={item.date_from ?? ""}
+					onChange={(v) => update("date_from", v)}
+					placeholder="12-25"
+					maxLength={5}
+				/>
+			</FlexBlock>
+
+			<FlexBlock style={{ minWidth: "110px" }}>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={__("To (MM-DD)", "wp-component-library")}
+					// eslint-disable-next-line @wordpress/i18n-hyphenated-range -- MM-DD date, not a range.
+					help={__("e.g. 12-25", "wp-component-library")}
+					value={item.date_to ?? ""}
+					onChange={(v) => update("date_to", v)}
+					placeholder="12-25"
+					maxLength={5}
+				/>
+			</FlexBlock>
+
+			<FlexItem style={{ minWidth: "90px", paddingTop: "28px" }}>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={__("Closed", "wp-component-library")}
+					checked={!!item.closed}
+					onChange={(v) => update("closed", v)}
+				/>
+			</FlexItem>
+
+		<FlexItem style={{ paddingTop: "26px" }}>
+			{item.closed ? (
+				<span style={{ color: "#757575", fontStyle: "italic" }}>
+					{__("Closed all day", "wp-component-library")}
+				</span>
+			) : (
+				<Flex align="center" gap={1}>
+					<TimePicker.TimeInput
+						value={openTime}
+						onChange={handleOpenChange}
+						is12Hour={!is24HourFormat}
+					/>
+					<span style={{ color: "#757575" }}>–</span>
+					<TimePicker.TimeInput
+						value={closeTime}
+						onChange={handleCloseChange}
+						is12Hour={!is24HourFormat}
+					/>
+				</Flex>
+			)}
+		</FlexItem>
+
+			<RemoveButton />
+		</Flex>
+	);
+}
+
+/**
+ * @param {Object}   props
+ * @param {Array}    props.entries          Special hours entries.
+ * @param {Function} props.onChange         Receives the next entries array.
+ * @param {boolean}  [props.is24HourFormat]
+ */
+export function SpecialHoursControl({
+	entries,
+	onChange,
+	is24HourFormat = false,
+}) {
+	const safeEntries = Array.isArray(entries) ? entries : [];
+
+	const handleAdd = () => {
+		onChange([
+			...safeEntries,
+			{
+				id: generateId(),
+				label: "",
+				date_from: "",
+				date_to: "",
+				closed: true,
+				opens: "09:00",
+				closes: "17:00",
+			},
+		]);
+	};
+
+	const handleRemove = (id) => {
+		onChange(safeEntries.filter((e) => e.id !== id));
+	};
+
+	const handleReorder = (reordered) => {
+		onChange(reordered);
+	};
+
+	const handleUpdate = (id, updated) => {
+		onChange(safeEntries.map((e) => (e.id === id ? updated : e)));
+	};
+
+	return (
+		<div className="special-hours-section">
+			<h4 style={{ marginBottom: "0.75rem", marginTop: 0 }}>
+				{__("Holiday / Special Hours", "wp-component-library")}
+			</h4>
+			<Repeater
+				items={safeEntries}
+			renderItem={(item) => (
+				<HolidayRow
+					item={item}
+					is24HourFormat={is24HourFormat}
+					onUpdate={(updated) =>
+						handleUpdate(item.id, updated)
+					}
+				/>
+				)}
+				onAdd={handleAdd}
+				onRemove={handleRemove}
+				onReorder={handleReorder}
+				renderMode="integrated"
+				addButtonText={__("Add exception", "wp-component-library")}
+				emptyStateText={__(
+					"No special hours set. Add exceptions for holidays, early closings, or special events.",
+					"wp-component-library",
+				)}
+			/>
+		</div>
+	);
+}
+
+export default SpecialHoursControl;