@siratik/wp-component-library 0.1.1 → 0.1.3

package/components/query/columnCountControl.js

@@ -0,0 +1,63 @@
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * Standalone column count control
+ *
+ * @param {Object} props Component props
+ * @param {Object} props.attributes Block attributes
+ * @param {Function} props.setAttributes Function to set attributes
+ * @param {string} props.displayAs Current display type to determine label
+ * @param {string} props.label Label override (default: from displayAs)
+ * @param {number} props.defaultValue The block's default column count (default: 3)
+ * @param {number} props.min Minimum value
+ * @param {number} props.max Maximum value
+ * @param {boolean} props.isShownByDefault Whether to show by default in ToolsPanel (default: false)
+ * @returns {WPElement} Element to render
+ */
+function ColumnCountControl({
+	attributes: { columnCount, displayAs },
+	setAttributes,
+	min = 1,
+	max = 6,
+	isShownByDefault = false,
+	label,
+	defaultValue = 3,
+}) {
+	// Don't render for list or pills display types
+	if (displayAs === "list" || displayAs === "pills") {
+		return null;
+	}
+
+	const itemLabel =
+		label ||
+		(displayAs === "grid"
+			? __("Columns", "wp-component-library")
+			: __("Slides to show", "wp-component-library"));
+
+	return (
+		<ToolsPanelItem
+			hasValue={() => columnCount !== defaultValue}
+			label={itemLabel}
+			onDeselect={() => setAttributes({ columnCount: defaultValue })}
+			isShownByDefault={isShownByDefault}
+		>
+			<RangeControl
+				__nextHasNoMarginBottom={true}
+				__next40pxDefaultSize
+				label={itemLabel}
+				value={columnCount}
+				onChange={(columnCountNew) =>
+					setAttributes({ columnCount: columnCountNew })
+				}
+				min={min}
+				max={max}
+			/>
+		</ToolsPanelItem>
+	);
+}
+
+export { ColumnCountControl };

package/components/query/displayTypeSelect.js

@@ -0,0 +1,52 @@
+import {
+    SelectControl,
+    __experimentalToolsPanelItem as ToolsPanelItem,
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * Standalone display type selection control
+ *
+ * @param {Object} props Component props
+ * @param {Object} props.attributes Block attributes
+ * @param {Function} props.setAttributes Function to set attributes
+ * @param {Array} props.allowedDisplayOptions Allowed display options
+ * @param {boolean} props.isShownByDefault Whether to show by default in ToolsPanel (default: true)
+ * @returns {WPElement} Element to render
+ */
+function DisplayTypeSelect({
+    attributes: { displayAs },
+    setAttributes,
+    allowedDisplayOptions = ["grid", "slider", "list", "pills"],
+    isShownByDefault = true,
+}) {
+    const defaultDisplayAs = "grid";
+
+    const displayOptions = [
+        { label: "Grid", value: "grid" },
+        { label: "Slider", value: "slider" },
+        { label: "List", value: "list" },
+        { label: "Pills", value: "pills" },
+        { label: "Marquee", value: "marquee" },
+    ].filter((option) => allowedDisplayOptions.includes(option.value));
+
+    return (
+        <ToolsPanelItem
+            hasValue={() => displayAs !== defaultDisplayAs}
+            label={__("Display Type", "built_starter")}
+            onDeselect={() => setAttributes({ displayAs: defaultDisplayAs })}
+            isShownByDefault={isShownByDefault}
+        >
+            <SelectControl
+                __nextHasNoMarginBottom={true}
+                __next40pxDefaultSize
+                label="Display As"
+                value={displayAs}
+                options={displayOptions}
+                onChange={(value) => setAttributes({ displayAs: value })}
+            />
+        </ToolsPanelItem>
+    );
+}
+
+export { DisplayTypeSelect };

package/components/query/examples.js

@@ -0,0 +1,166 @@
+import { __experimentalToolsPanel as ToolsPanel } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import {
+    ColumnCountControl,
+    DisplayTypeSelect,
+    ManualPostSelector,
+    OrderBySelect,
+    PostsPerPageControl,
+    PostTypeSelect,
+    SelectionModeControl,
+    TaxonomySelect,
+    TermSelector,
+} from "./";
+
+/**
+ * Example: Basic Post Query Interface
+ * Simple interface with just post selection and ordering
+ */
+export function BasicPostQueryExample({ attributes, setAttributes }) {
+    const resetAll = () => {
+        setAttributes({
+            postType: "post",
+            orderPostsBy: "date",
+            orderPostsDirection: "desc",
+        });
+    };
+
+    return (
+        <ToolsPanel
+            label={__("Post Query", "built_starter")}
+            resetAll={resetAll}
+        >
+            <PostTypeSelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+            <OrderBySelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+        </ToolsPanel>
+    );
+}
+
+/**
+ * Example: Advanced Query Interface with Manual Selection
+ * Complete interface with manual post selection and taxonomy filtering
+ */
+export function AdvancedQueryExample({ attributes, setAttributes }) {
+    const resetAll = () => {
+        setAttributes({
+            postType: "post",
+            orderPostsBy: "date",
+            orderPostsDirection: "desc",
+            selectionMode: "auto",
+            selectedPosts: [],
+            selectedTaxonomy: "",
+            selectedTerms: [],
+        });
+    };
+
+    return (
+        <ToolsPanel
+            label={__("Advanced Query", "built_starter")}
+            resetAll={resetAll}
+        >
+            <PostTypeSelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            <OrderBySelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            <SelectionModeControl
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            {attributes.selectionMode === "manual" && (
+                <ManualPostSelector
+                    attributes={attributes}
+                    setAttributes={setAttributes}
+                    postType={attributes.postType}
+                />
+            )}
+
+            <TaxonomySelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+                postType={attributes.postType}
+            />
+
+            {attributes.selectedTaxonomy && (
+                <TermSelector
+                    attributes={attributes}
+                    setAttributes={setAttributes}
+                    selectedTaxonomy={attributes.selectedTaxonomy}
+                />
+            )}
+        </ToolsPanel>
+    );
+}
+
+/**
+ * Example: Display Settings Interface
+ * Just the display-related controls
+ */
+export function DisplaySettingsExample({ attributes, setAttributes }) {
+    const resetAll = () => {
+        setAttributes({
+            displayAs: "grid",
+            postsPerPage: 6,
+            columnCount: 3,
+        });
+    };
+
+    return (
+        <ToolsPanel
+            label={__("Display Settings", "built_starter")}
+            resetAll={resetAll}
+        >
+            <DisplayTypeSelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            <PostsPerPageControl
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            <ColumnCountControl
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+        </ToolsPanel>
+    );
+}
+
+/**
+ * Example: Raw Controls (No Panels)
+ * Using controls without ToolsPanel wrappers
+ */
+export function RawControlsExample({ attributes, setAttributes }) {
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <PostTypeSelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            <OrderBySelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+
+            <DisplayTypeSelect
+                attributes={attributes}
+                setAttributes={setAttributes}
+            />
+        </div>
+    );
+}

package/components/query/hideCurrentPostControl.js

@@ -0,0 +1,47 @@
+import {
+	ToggleControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * Toggle to exclude the post currently being viewed from feed query results.
+ * Intended for single templates where the same layout renders every post.
+ *
+ * @param {Object} props Component props
+ * @param {Object} props.attributes Block attributes
+ * @param {Function} props.setAttributes Function to set attributes
+ * @param {boolean} props.isShownByDefault Whether to show by default in ToolsPanel (default: true)
+ * @returns {WPElement} Element to render
+ */
+function HideCurrentPostControl({
+	attributes: { hideCurrentPost = true },
+	setAttributes,
+	isShownByDefault = true,
+}) {
+	const defaultHideCurrentPost = true;
+
+	return (
+		<ToolsPanelItem
+			hasValue={() => hideCurrentPost !== defaultHideCurrentPost}
+			label={__("Hide Current Post", "built_starter")}
+			onDeselect={() =>
+				setAttributes({ hideCurrentPost: defaultHideCurrentPost })
+			}
+			isShownByDefault={isShownByDefault}
+		>
+			<ToggleControl
+				__nextHasNoMarginBottom={true}
+				label={__("Hide Current Post", "built_starter")}
+				checked={hideCurrentPost}
+				onChange={(value) => setAttributes({ hideCurrentPost: value })}
+				help={__(
+					"On single posts and templates, exclude the post being viewed from this feed.",
+					"built_starter",
+				)}
+			/>
+		</ToolsPanelItem>
+	);
+}
+
+export { HideCurrentPostControl };

package/components/query/index.js

@@ -0,0 +1,20 @@
+// Individual Query Controls - Always render as ToolsPanelItems
+export { ColumnCountControl } from "./columnCountControl";
+export { DisplayTypeSelect } from "./displayTypeSelect";
+export { HideCurrentPostControl } from "./hideCurrentPostControl";
+export { ManualPostSelector } from "./manualPostSelector";
+export { ManualTermSelector } from "./manualTermSelector";
+export { defaultOrderOptions, OrderBySelect } from "./orderBySelect";
+export { PostsPerPageControl } from "./postsPerPageControl";
+export { PostTypeSelect } from "./postTypeSelect";
+export { CardTemplatePartSelect } from "./cardTemplatePartSelect";
+export { CardTemplatePartPanel } from "./cardTemplatePartPanel";
+export {
+	buildCardTemplatePartOptions,
+	cardTemplatePartMatchesPostType,
+	getCardSlugPrefixesForPostType,
+	getDefaultCardSlugForPostType,
+} from "./cardTemplatePartUtils";
+export { SelectionModeControl } from "./selectionModeControl";
+export { TaxonomySelect } from "./taxonomySelect";
+export { reorderByIds, useOrderedTerms } from "./utils";

package/components/query/manualPostSelector.js

@@ -0,0 +1,125 @@
+import { __experimentalToolsPanelItem as ToolsPanelItem } from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import { useCallback, useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import SortableSelect from "../sortable-select";
+
+/**
+ * Standalone manual post selection control
+ *
+ * @param {Object} props Component props
+ * @param {Object} props.attributes Block attributes
+ * @param {Function} props.setAttributes Function to set attributes
+ * @param {string} props.postType The post type to select from
+ * @param {boolean} props.isShownByDefault Whether to show by default in ToolsPanel (default: true)
+ * @returns {WPElement} Element to render
+ */
+function ManualPostSelector({
+    attributes: { selectedPosts = [] },
+    setAttributes,
+    postType = "post",
+    isShownByDefault = true,
+}) {
+    const defaultSelectedPosts = [];
+
+    // Fetch selected posts data
+    const selectedPostsData = useSelect(
+        (select) => {
+            if (!postType || selectedPosts.length === 0) {
+                return [];
+            }
+
+            return (
+                select("core").getEntityRecords("postType", postType, {
+                    include: selectedPosts,
+                    per_page: selectedPosts.length,
+                }) || []
+            );
+        },
+        [postType, selectedPosts],
+    );
+
+    // Load posts with search
+    const loadPosts = useCallback(
+        async (inputValue) => {
+            if (!postType) {
+                return [];
+            }
+
+            try {
+                const query = {
+                    per_page: 20,
+                    status: "publish",
+                    search: inputValue || '',
+                };
+
+                // Use resolveSelect for async data fetching
+                const posts = await wp.data.resolveSelect("core").getEntityRecords(
+                    "postType",
+                    postType,
+                    query,
+                );
+
+                return posts || [];
+            } catch (error) {
+                // eslint-disable-next-line no-console -- surface REST failures to developers.
+                console.error('Error loading posts:', error);
+                return [];
+            }
+        },
+        [postType],
+    );
+
+    // Handle selection change
+    const handleChange = useCallback(
+        (newSelection) => {
+            const postIds = newSelection.map((post) => post.id);
+            setAttributes({ selectedPosts: postIds });
+        },
+        [setAttributes],
+    );
+
+    // Format selected value for SortableSelect - maintain order
+    const selectedValue = useMemo(() => {
+        return selectedPosts
+            .map((postId) =>
+                selectedPostsData.find((post) => post.id === postId),
+            )
+            .filter(Boolean);
+    }, [selectedPostsData, selectedPosts]);
+
+    const control = (
+        <SortableSelect
+            value={selectedValue}
+            onChange={handleChange}
+            loadOptions={loadPosts}
+            getOptionLabel={(post) => post.title?.rendered || `Post #${post.id}`}
+            getOptionValue={(post) => post.id}
+            placeholder={__("Type to search posts…", "built")}
+            label={__("Select Posts", "built")}
+            help={__(
+                "Start typing to search for posts, then select them from the dropdown. Drag to reorder.",
+                "built",
+            )}
+            isMulti={true}
+            isClearable={false}
+            isSearchable={true}
+            hideDropdownIndicator={true}
+        />
+    );
+
+    return (
+        <ToolsPanelItem
+            hasValue={() => selectedPosts && selectedPosts.length > 0}
+            label={__("Select Posts", "built")}
+            onDeselect={() =>
+                setAttributes({ selectedPosts: defaultSelectedPosts })
+            }
+            isShownByDefault={isShownByDefault}
+        >
+            {control}
+        </ToolsPanelItem>
+    );
+}
+
+export { ManualPostSelector };

package/components/query/manualTermSelector.js

@@ -0,0 +1,141 @@
+import { __experimentalToolsPanelItem as ToolsPanelItem } from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import { useCallback, useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import SortableSelect from "../sortable-select";
+
+/**
+ * Standalone term selection control
+ *
+ * @param {Object} props Component props
+ * @param {Object} props.attributes Block attributes
+ * @param {Function} props.setAttributes Function to set attributes
+ * @param {string} props.selectedTaxonomy The taxonomy to select terms from
+ * @param {boolean} props.renderAsToolsPanelItem Whether to render as ToolsPanelItem
+ * @param {boolean} props.isShownByDefault Whether to show by default in ToolsPanel (default: true)
+ * @returns {WPElement} Element to render
+ */
+function ManualTermSelector({
+	attributes: { selectedTerms = [] },
+	setAttributes,
+	selectedTaxonomy,
+	renderAsToolsPanelItem = true,
+	isShownByDefault = true,
+}) {
+	const defaultSelectedTerms = [];
+
+	// Fetch selected terms data
+	const selectedTermsData = useSelect(
+		(select) => {
+			if (!selectedTaxonomy || selectedTerms.length === 0) {
+				return [];
+			}
+
+			return (
+				select("core").getEntityRecords("taxonomy", selectedTaxonomy, {
+					include: selectedTerms,
+					per_page: selectedTerms.length,
+				}) || []
+			);
+		},
+		[selectedTaxonomy, selectedTerms],
+	);
+
+	// Load terms with search
+	const loadTerms = useCallback(
+		async (inputValue) => {
+			if (!selectedTaxonomy) {
+				return [];
+			}
+
+			try {
+				const query = {
+					per_page: 20,
+					hide_empty: false,
+					search: inputValue || '',
+				};
+
+				// Use resolveSelect for async data fetching
+				const terms = await wp.data.resolveSelect("core").getEntityRecords(
+					"taxonomy",
+					selectedTaxonomy,
+					query,
+				);
+
+				return terms || [];
+			} catch (error) {
+				// eslint-disable-next-line no-console -- surface REST failures to developers.
+				console.error('Error loading terms:', error);
+				return [];
+			}
+		},
+		[selectedTaxonomy],
+	);
+
+	// Handle selection change
+	const handleChange = useCallback(
+		(newSelection) => {
+			const termIds = newSelection.map((term) => term.id);
+			setAttributes({ selectedTerms: termIds });
+		},
+		[setAttributes],
+	);
+
+	// Format selected value for SortableSelect - maintain order
+	const selectedValue = useMemo(() => {
+		return selectedTerms
+			.map((termId) =>
+				selectedTermsData.find((term) => term.id === termId),
+			)
+			.filter(Boolean);
+	}, [selectedTermsData, selectedTerms]);
+
+	const control = (
+		<SortableSelect
+			value={selectedValue}
+			onChange={handleChange}
+			loadOptions={loadTerms}
+			getOptionLabel={(term) => term.name || `Term #${term.id}`}
+			getOptionValue={(term) => term.id}
+			placeholder={__("Type to search terms…", "built")}
+			label={__("Select Terms", "built")}
+			help={__(
+				"Start typing to search for taxonomy terms, then select them from the dropdown. Drag to reorder.",
+				"built",
+			)}
+			isMulti={true}
+			isClearable={false}
+			isSearchable={true}
+			hideDropdownIndicator={true}
+			renderSelectedItem={(term) => (
+				<span>
+					{term.name}
+					{term.count !== undefined && (
+						<span style={{ color: "#666", marginLeft: "4px" }}>
+							({term.count})
+						</span>
+					)}
+				</span>
+			)}
+		/>
+	);
+
+	if (!renderAsToolsPanelItem) {
+		return control;
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={() => selectedTerms && selectedTerms.length > 0}
+			label={__("Select Terms", "built")}
+			onDeselect={() =>
+				setAttributes({ selectedTerms: defaultSelectedTerms })
+			}
+			isShownByDefault={isShownByDefault}
+		>
+			{control}
+		</ToolsPanelItem>
+	);
+}
+
+export { ManualTermSelector };