719 lines
23 KiB
JavaScript
719 lines
23 KiB
JavaScript
/**
|
|
* Ticket Tailor Gutenberg Blocks
|
|
* Enhanced with full-width control and dynamic columns
|
|
*/
|
|
(function (wp) {
|
|
const { registerBlockType } = wp.blocks;
|
|
const { InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;
|
|
const { PanelBody, TextControl, ToggleControl, SelectControl, RangeControl } =
|
|
wp.components;
|
|
const { __ } = wp.i18n;
|
|
const { createElement: el, Fragment } = wp.element;
|
|
|
|
// Block 1: Event Widget (Original)
|
|
registerBlockType("ticket-tailor/event-widget", {
|
|
title: __("Ticket Tailor Event Widget", "ticket-tailor"),
|
|
description: __("Embed a Ticket Tailor event widget", "ticket-tailor"),
|
|
icon: "tickets-alt",
|
|
category: "embed",
|
|
keywords: [
|
|
__("ticket", "ticket-tailor"),
|
|
__("event", "ticket-tailor"),
|
|
__("ticketing", "ticket-tailor"),
|
|
],
|
|
supports: {
|
|
align: ["wide", "full"],
|
|
},
|
|
attributes: {
|
|
url: { type: "string", default: "" },
|
|
minimal: { type: "boolean", default: false },
|
|
bgFill: { type: "boolean", default: true },
|
|
showLogo: { type: "boolean", default: true },
|
|
ref: { type: "string", default: "website_widget" },
|
|
},
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props;
|
|
const { url, minimal, bgFill, showLogo, ref } = attributes;
|
|
|
|
return el(
|
|
Fragment,
|
|
{},
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Widget Settings", "ticket-tailor"),
|
|
initialOpen: true,
|
|
},
|
|
el(ToggleControl, {
|
|
label: __("Minimal Design", "ticket-tailor"),
|
|
checked: minimal,
|
|
onChange: (value) => setAttributes({ minimal: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Background Fill", "ticket-tailor"),
|
|
checked: bgFill,
|
|
onChange: (value) => setAttributes({ bgFill: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Logo", "ticket-tailor"),
|
|
checked: showLogo,
|
|
onChange: (value) => setAttributes({ showLogo: value }),
|
|
}),
|
|
el(TextControl, {
|
|
label: __("Tracking Reference", "ticket-tailor"),
|
|
value: ref,
|
|
onChange: (value) => setAttributes({ ref: value }),
|
|
}),
|
|
),
|
|
),
|
|
el(
|
|
"div",
|
|
{
|
|
className: "tt-block-placeholder",
|
|
style: {
|
|
border: "2px dashed #ccc",
|
|
padding: "40px",
|
|
textAlign: "center",
|
|
background: "#f9f9f9",
|
|
},
|
|
},
|
|
el("span", {
|
|
className: "dashicons dashicons-tickets-alt",
|
|
style: { fontSize: "48px", color: "#666" },
|
|
}),
|
|
!url
|
|
? el(
|
|
"div",
|
|
{},
|
|
el(
|
|
"p",
|
|
{ style: { marginBottom: "15px" } },
|
|
__("Ticket Tailor Event Widget", "ticket-tailor"),
|
|
),
|
|
el(TextControl, {
|
|
label: __("Event URL", "ticket-tailor"),
|
|
placeholder: "https://www.tickettailor.com/events/...",
|
|
value: url,
|
|
onChange: (value) => setAttributes({ url: value }),
|
|
}),
|
|
)
|
|
: el(
|
|
"div",
|
|
{},
|
|
el("p", {}, __("Widget URL configured", "ticket-tailor")),
|
|
el(
|
|
"button",
|
|
{
|
|
className: "button",
|
|
onClick: () => setAttributes({ url: "" }),
|
|
},
|
|
__("Change URL", "ticket-tailor"),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
save: function () {
|
|
return null;
|
|
},
|
|
});
|
|
|
|
// Block 2: Event Listing - ENHANCED WITH FULL WIDTH OPTIONS
|
|
registerBlockType("ticket-tailor/event-listing", {
|
|
title: __("Event Listing", "ticket-tailor"),
|
|
description: __("Display a list of events", "ticket-tailor"),
|
|
icon: "calendar-alt",
|
|
category: "widgets",
|
|
keywords: [
|
|
__("events", "ticket-tailor"),
|
|
__("listing", "ticket-tailor"),
|
|
__("calendar", "ticket-tailor"),
|
|
],
|
|
supports: {
|
|
align: ["wide", "full"],
|
|
customClassName: true,
|
|
},
|
|
attributes: {
|
|
limit: { type: "number", default: 10 },
|
|
layout: { type: "string", default: "grid" },
|
|
columns: { type: "number", default: 3 },
|
|
columnsMode: { type: "string", default: "fixed" }, // 'fixed' or 'responsive'
|
|
showPast: { type: "boolean", default: false },
|
|
showImage: { type: "boolean", default: true },
|
|
imageType: { type: "string", default: "header" },
|
|
fullWidth: { type: "boolean", default: true },
|
|
maxCardWidth: { type: "string", default: "none" }, // 'none', 'small', 'medium', 'large'
|
|
},
|
|
edit: function (props) {
|
|
const { attributes, setAttributes, className } = props;
|
|
const {
|
|
limit,
|
|
layout,
|
|
columns,
|
|
columnsMode,
|
|
showPast,
|
|
showImage,
|
|
imageType,
|
|
fullWidth,
|
|
maxCardWidth,
|
|
} = attributes;
|
|
|
|
return el(
|
|
Fragment,
|
|
{},
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Layout Settings", "ticket-tailor"),
|
|
initialOpen: true,
|
|
},
|
|
el(SelectControl, {
|
|
label: __("Layout", "ticket-tailor"),
|
|
value: layout,
|
|
options: [
|
|
{ label: __("Grid", "ticket-tailor"), value: "grid" },
|
|
{ label: __("List", "ticket-tailor"), value: "list" },
|
|
],
|
|
onChange: (value) => setAttributes({ layout: value }),
|
|
}),
|
|
layout === "grid" &&
|
|
el(
|
|
Fragment,
|
|
{},
|
|
el(SelectControl, {
|
|
label: __("Columns Mode", "ticket-tailor"),
|
|
value: columnsMode,
|
|
options: [
|
|
{
|
|
label: __("Fixed Columns", "ticket-tailor"),
|
|
value: "fixed",
|
|
},
|
|
{
|
|
label: __("Responsive (Auto-fit)", "ticket-tailor"),
|
|
value: "responsive",
|
|
},
|
|
],
|
|
onChange: (value) => setAttributes({ columnsMode: value }),
|
|
help: __(
|
|
"Responsive mode automatically adjusts columns based on available space",
|
|
"ticket-tailor",
|
|
),
|
|
}),
|
|
el(RangeControl, {
|
|
label:
|
|
columnsMode === "fixed"
|
|
? __("Number of Columns", "ticket-tailor")
|
|
: __("Maximum Columns", "ticket-tailor"),
|
|
value: columns,
|
|
onChange: (value) => setAttributes({ columns: value }),
|
|
min: 1,
|
|
max: 5,
|
|
help:
|
|
columnsMode === "responsive"
|
|
? __(
|
|
"In responsive mode, columns will adjust automatically but won't exceed this number",
|
|
"ticket-tailor",
|
|
)
|
|
: null,
|
|
}),
|
|
el(SelectControl, {
|
|
label: __("Maximum Card Width", "ticket-tailor"),
|
|
value: maxCardWidth,
|
|
options: [
|
|
{
|
|
label: __("No Limit (Full Width)", "ticket-tailor"),
|
|
value: "none",
|
|
},
|
|
{
|
|
label: __("Small (300px)", "ticket-tailor"),
|
|
value: "small",
|
|
},
|
|
{
|
|
label: __("Medium (400px)", "ticket-tailor"),
|
|
value: "medium",
|
|
},
|
|
{
|
|
label: __("Large (500px)", "ticket-tailor"),
|
|
value: "large",
|
|
},
|
|
],
|
|
onChange: (value) => setAttributes({ maxCardWidth: value }),
|
|
help: __(
|
|
"Set a maximum width for individual event cards",
|
|
"ticket-tailor",
|
|
),
|
|
}),
|
|
),
|
|
el(ToggleControl, {
|
|
label: __("Full Width Container", "ticket-tailor"),
|
|
checked: fullWidth,
|
|
onChange: (value) => setAttributes({ fullWidth: value }),
|
|
help: __(
|
|
"Make the event listing fill the width of its container",
|
|
"ticket-tailor",
|
|
),
|
|
}),
|
|
),
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Display Settings", "ticket-tailor"),
|
|
initialOpen: false,
|
|
},
|
|
el(RangeControl, {
|
|
label: __("Number of Events", "ticket-tailor"),
|
|
value: limit,
|
|
onChange: (value) => setAttributes({ limit: value }),
|
|
min: 1,
|
|
max: 50,
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Past Events", "ticket-tailor"),
|
|
checked: showPast,
|
|
onChange: (value) => setAttributes({ showPast: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Event Images", "ticket-tailor"),
|
|
checked: showImage,
|
|
onChange: (value) => setAttributes({ showImage: value }),
|
|
}),
|
|
showImage &&
|
|
el(SelectControl, {
|
|
label: __("Image Type", "ticket-tailor"),
|
|
value: imageType,
|
|
options: [
|
|
{
|
|
label: __("Thumbnail (Square)", "ticket-tailor"),
|
|
value: "thumbnail",
|
|
},
|
|
{
|
|
label: __("Banner (16:9)", "ticket-tailor"),
|
|
value: "header",
|
|
},
|
|
],
|
|
onChange: (value) => setAttributes({ imageType: value }),
|
|
}),
|
|
),
|
|
),
|
|
el(
|
|
"div",
|
|
{
|
|
className: "tt-block-placeholder",
|
|
style: {
|
|
border: "2px dashed #ccc",
|
|
padding: "40px",
|
|
textAlign: "center",
|
|
background: "#f9f9f9",
|
|
width: fullWidth ? "100%" : "auto",
|
|
},
|
|
},
|
|
el("span", {
|
|
className: "dashicons dashicons-calendar-alt",
|
|
style: { fontSize: "48px", color: "#666" },
|
|
}),
|
|
el(
|
|
"p",
|
|
{
|
|
style: {
|
|
fontSize: "16px",
|
|
fontWeight: "bold",
|
|
marginBottom: "10px",
|
|
},
|
|
},
|
|
__("Event Listing", "ticket-tailor"),
|
|
),
|
|
el(
|
|
"p",
|
|
{ style: { fontSize: "14px", color: "#666" } },
|
|
__("Showing ", "ticket-tailor") +
|
|
limit +
|
|
__(" events", "ticket-tailor"),
|
|
),
|
|
el(
|
|
"p",
|
|
{ style: { fontSize: "13px", color: "#888", marginTop: "10px" } },
|
|
layout === "grid"
|
|
? columnsMode === "responsive"
|
|
? __("Responsive grid with max ", "ticket-tailor") +
|
|
columns +
|
|
__(" columns", "ticket-tailor")
|
|
: columns + __(" column grid", "ticket-tailor")
|
|
: __("List layout", "ticket-tailor"),
|
|
),
|
|
fullWidth &&
|
|
el(
|
|
"p",
|
|
{
|
|
style: { fontSize: "12px", color: "#2271b1", marginTop: "5px" },
|
|
},
|
|
__("✓ Full width enabled", "ticket-tailor"),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
save: function () {
|
|
return null;
|
|
},
|
|
});
|
|
|
|
// Block 3: Single Event - ENHANCED WITH WIDTH OPTIONS
|
|
registerBlockType("ticket-tailor/single-event", {
|
|
title: __("Single Event", "ticket-tailor"),
|
|
description: __("Display a specific event", "ticket-tailor"),
|
|
icon: "megaphone",
|
|
category: "widgets",
|
|
keywords: [
|
|
__("event", "ticket-tailor"),
|
|
__("single", "ticket-tailor"),
|
|
__("detail", "ticket-tailor"),
|
|
],
|
|
supports: {
|
|
align: ["wide", "full"],
|
|
},
|
|
attributes: {
|
|
eventId: { type: "string", default: "" },
|
|
showDescription: { type: "boolean", default: true },
|
|
showTickets: { type: "boolean", default: true },
|
|
showImage: { type: "boolean", default: true },
|
|
imageType: { type: "string", default: "header" },
|
|
fullWidth: { type: "boolean", default: false },
|
|
maxWidth: { type: "string", default: "800px" },
|
|
},
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props;
|
|
const {
|
|
eventId,
|
|
showDescription,
|
|
showTickets,
|
|
showImage,
|
|
imageType,
|
|
fullWidth,
|
|
maxWidth,
|
|
} = attributes;
|
|
|
|
const eventOptions =
|
|
window.ticketTailorData && window.ticketTailorData.events
|
|
? window.ticketTailorData.events
|
|
: [{ value: "", label: __("Loading events...", "ticket-tailor") }];
|
|
|
|
return el(
|
|
Fragment,
|
|
{},
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(
|
|
PanelBody,
|
|
{ title: __("Event Settings", "ticket-tailor"), initialOpen: true },
|
|
el(SelectControl, {
|
|
label: __("Select Event", "ticket-tailor"),
|
|
value: eventId,
|
|
options: [
|
|
{ value: "", label: __("Select an event...", "ticket-tailor") },
|
|
].concat(eventOptions),
|
|
onChange: (value) => setAttributes({ eventId: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Full Width Display", "ticket-tailor"),
|
|
checked: fullWidth,
|
|
onChange: (value) => setAttributes({ fullWidth: value }),
|
|
}),
|
|
!fullWidth &&
|
|
el(TextControl, {
|
|
label: __("Maximum Width", "ticket-tailor"),
|
|
value: maxWidth,
|
|
onChange: (value) => setAttributes({ maxWidth: value }),
|
|
help: __("e.g. 800px, 100%, 60rem", "ticket-tailor"),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Event Image", "ticket-tailor"),
|
|
checked: showImage,
|
|
onChange: (value) => setAttributes({ showImage: value }),
|
|
}),
|
|
showImage &&
|
|
el(SelectControl, {
|
|
label: __("Image Type", "ticket-tailor"),
|
|
value: imageType,
|
|
options: [
|
|
{
|
|
label: __("Banner (Wide)", "ticket-tailor"),
|
|
value: "header",
|
|
},
|
|
{
|
|
label: __("Thumbnail (Square)", "ticket-tailor"),
|
|
value: "thumbnail",
|
|
},
|
|
],
|
|
onChange: (value) => setAttributes({ imageType: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Description", "ticket-tailor"),
|
|
checked: showDescription,
|
|
onChange: (value) => setAttributes({ showDescription: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Ticket Button", "ticket-tailor"),
|
|
checked: showTickets,
|
|
onChange: (value) => setAttributes({ showTickets: value }),
|
|
}),
|
|
),
|
|
),
|
|
el(
|
|
"div",
|
|
{
|
|
className: "tt-block-placeholder",
|
|
style: {
|
|
border: "2px dashed #ccc",
|
|
padding: "40px",
|
|
textAlign: "center",
|
|
background: "#f9f9f9",
|
|
},
|
|
},
|
|
el("span", {
|
|
className: "dashicons dashicons-megaphone",
|
|
style: { fontSize: "48px", color: "#666" },
|
|
}),
|
|
!eventId
|
|
? el(
|
|
"p",
|
|
{},
|
|
__("Please select an event from the sidebar", "ticket-tailor"),
|
|
)
|
|
: el(
|
|
"div",
|
|
{},
|
|
el("p", {}, __("Single Event Display", "ticket-tailor")),
|
|
el(
|
|
"p",
|
|
{ style: { fontSize: "14px", color: "#666" } },
|
|
__("Event ID: ", "ticket-tailor") + eventId,
|
|
),
|
|
fullWidth &&
|
|
el(
|
|
"p",
|
|
{
|
|
style: {
|
|
fontSize: "12px",
|
|
color: "#2271b1",
|
|
marginTop: "5px",
|
|
},
|
|
},
|
|
__("✓ Full width enabled", "ticket-tailor"),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
save: function () {
|
|
return null;
|
|
},
|
|
});
|
|
|
|
// Block 4: Category Events - ENHANCED
|
|
registerBlockType("ticket-tailor/category-events", {
|
|
title: __("Category Events", "ticket-tailor"),
|
|
description: __("Display events from a specific category", "ticket-tailor"),
|
|
icon: "category",
|
|
category: "widgets",
|
|
keywords: [
|
|
__("category", "ticket-tailor"),
|
|
__("filter", "ticket-tailor"),
|
|
__("events", "ticket-tailor"),
|
|
],
|
|
supports: {
|
|
align: ["wide", "full"],
|
|
},
|
|
attributes: {
|
|
category: { type: "string", default: "" },
|
|
limit: { type: "number", default: 10 },
|
|
layout: { type: "string", default: "grid" },
|
|
columns: { type: "number", default: 3 },
|
|
columnsMode: { type: "string", default: "fixed" },
|
|
showImage: { type: "boolean", default: true },
|
|
imageType: { type: "string", default: "thumbnail" },
|
|
fullWidth: { type: "boolean", default: true },
|
|
},
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props;
|
|
const {
|
|
category,
|
|
limit,
|
|
layout,
|
|
columns,
|
|
columnsMode,
|
|
showImage,
|
|
imageType,
|
|
fullWidth,
|
|
} = attributes;
|
|
|
|
return el(
|
|
Fragment,
|
|
{},
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Category Settings", "ticket-tailor"),
|
|
initialOpen: true,
|
|
},
|
|
el(TextControl, {
|
|
label: __("Category", "ticket-tailor"),
|
|
help: __(
|
|
"Enter the category name (e.g., Music, Sports, Theatre)",
|
|
"ticket-tailor",
|
|
),
|
|
value: category,
|
|
onChange: (value) => setAttributes({ category: value }),
|
|
}),
|
|
el(RangeControl, {
|
|
label: __("Number of Events", "ticket-tailor"),
|
|
value: limit,
|
|
onChange: (value) => setAttributes({ limit: value }),
|
|
min: 1,
|
|
max: 50,
|
|
}),
|
|
el(SelectControl, {
|
|
label: __("Layout", "ticket-tailor"),
|
|
value: layout,
|
|
options: [
|
|
{ label: __("Grid", "ticket-tailor"), value: "grid" },
|
|
{ label: __("List", "ticket-tailor"), value: "list" },
|
|
],
|
|
onChange: (value) => setAttributes({ layout: value }),
|
|
}),
|
|
layout === "grid" &&
|
|
el(
|
|
Fragment,
|
|
{},
|
|
el(SelectControl, {
|
|
label: __("Columns Mode", "ticket-tailor"),
|
|
value: columnsMode,
|
|
options: [
|
|
{
|
|
label: __("Fixed Columns", "ticket-tailor"),
|
|
value: "fixed",
|
|
},
|
|
{
|
|
label: __("Responsive (Auto-fit)", "ticket-tailor"),
|
|
value: "responsive",
|
|
},
|
|
],
|
|
onChange: (value) => setAttributes({ columnsMode: value }),
|
|
}),
|
|
el(RangeControl, {
|
|
label:
|
|
columnsMode === "fixed"
|
|
? __("Columns", "ticket-tailor")
|
|
: __("Maximum Columns", "ticket-tailor"),
|
|
value: columns,
|
|
onChange: (value) => setAttributes({ columns: value }),
|
|
min: 1,
|
|
max: 5,
|
|
}),
|
|
),
|
|
el(ToggleControl, {
|
|
label: __("Full Width Container", "ticket-tailor"),
|
|
checked: fullWidth,
|
|
onChange: (value) => setAttributes({ fullWidth: value }),
|
|
}),
|
|
el(ToggleControl, {
|
|
label: __("Show Event Images", "ticket-tailor"),
|
|
checked: showImage,
|
|
onChange: (value) => setAttributes({ showImage: value }),
|
|
}),
|
|
showImage &&
|
|
el(SelectControl, {
|
|
label: __("Image Type", "ticket-tailor"),
|
|
value: imageType,
|
|
options: [
|
|
{
|
|
label: __("Thumbnail (Square)", "ticket-tailor"),
|
|
value: "thumbnail",
|
|
},
|
|
{
|
|
label: __("Banner (16:9)", "ticket-tailor"),
|
|
value: "header",
|
|
},
|
|
],
|
|
onChange: (value) => setAttributes({ imageType: value }),
|
|
}),
|
|
),
|
|
),
|
|
el(
|
|
"div",
|
|
{
|
|
className: "tt-block-placeholder",
|
|
style: {
|
|
border: "2px dashed #ccc",
|
|
padding: "40px",
|
|
textAlign: "center",
|
|
background: "#f9f9f9",
|
|
width: fullWidth ? "100%" : "auto",
|
|
},
|
|
},
|
|
el("span", {
|
|
className: "dashicons dashicons-category",
|
|
style: { fontSize: "48px", color: "#666" },
|
|
}),
|
|
!category
|
|
? el(
|
|
"div",
|
|
{},
|
|
el(
|
|
"p",
|
|
{ style: { marginBottom: "15px" } },
|
|
__("Category Events Display", "ticket-tailor"),
|
|
),
|
|
el(
|
|
"p",
|
|
{ style: { fontSize: "14px", color: "#666" } },
|
|
__(
|
|
"Enter a category name in the sidebar to display filtered events",
|
|
"ticket-tailor",
|
|
),
|
|
),
|
|
)
|
|
: el(
|
|
"div",
|
|
{},
|
|
el(
|
|
"p",
|
|
{ style: { marginBottom: "10px", fontWeight: "bold" } },
|
|
__("Category Events: ", "ticket-tailor") + category,
|
|
),
|
|
el(
|
|
"p",
|
|
{ style: { fontSize: "14px", color: "#666" } },
|
|
__("Showing ", "ticket-tailor") +
|
|
limit +
|
|
__(" events", "ticket-tailor"),
|
|
),
|
|
fullWidth &&
|
|
el(
|
|
"p",
|
|
{
|
|
style: {
|
|
fontSize: "12px",
|
|
color: "#2271b1",
|
|
marginTop: "5px",
|
|
},
|
|
},
|
|
__("✓ Full width enabled", "ticket-tailor"),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
save: function () {
|
|
return null;
|
|
},
|
|
});
|
|
})(window.wp);
|