566 lines
15 KiB
JavaScript
566 lines
15 KiB
JavaScript
/**
|
|
* LearnDash Start Course Button - Gutenberg Blocks
|
|
*
|
|
* Registers custom Gutenberg blocks for Start Course and Start Group buttons
|
|
*/
|
|
|
|
(function (wp) {
|
|
"use strict";
|
|
|
|
// Destructure required WordPress packages
|
|
const { __ } = wp.i18n;
|
|
const { createElement: el } = wp.element;
|
|
const { registerBlockType } = wp.blocks;
|
|
const {
|
|
TextControl,
|
|
ToggleControl,
|
|
PanelBody,
|
|
PanelRow,
|
|
SelectControl,
|
|
Notice,
|
|
} = wp.components;
|
|
const { InspectorControls, BlockControls, AlignmentToolbar, useBlockProps } =
|
|
wp.blockEditor;
|
|
const { Fragment } = wp.element;
|
|
|
|
// SVG Arrow Icon
|
|
const arrowIcon = el(
|
|
"svg",
|
|
{
|
|
className: "ldsb-button-arrow",
|
|
width: "24",
|
|
height: "24",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
},
|
|
el("path", {
|
|
d: "M5 12H19M19 12L12 5M19 12L12 19",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
}),
|
|
);
|
|
|
|
// Course block icon
|
|
const courseBlockIcon = el(
|
|
"svg",
|
|
{
|
|
width: "24",
|
|
height: "24",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
},
|
|
el("path", {
|
|
d: "M13 7L18 12M18 12L13 17M18 12H6",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
}),
|
|
el("rect", {
|
|
x: "3",
|
|
y: "3",
|
|
width: "18",
|
|
height: "18",
|
|
rx: "2",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
}),
|
|
);
|
|
|
|
// Group block icon
|
|
const groupBlockIcon = el(
|
|
"svg",
|
|
{
|
|
width: "24",
|
|
height: "24",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
},
|
|
el("path", {
|
|
d: "M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
}),
|
|
el("circle", {
|
|
cx: "9",
|
|
cy: "7",
|
|
r: "4",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
}),
|
|
el("path", {
|
|
d: "M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
}),
|
|
el("path", {
|
|
d: "M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
}),
|
|
);
|
|
|
|
// Register the Course Start button block
|
|
registerBlockType("ldsb/start-button", {
|
|
title: __("LearnDash Start Course Button", "learndash-start-button"),
|
|
description: __(
|
|
"A prominent button to start LearnDash courses",
|
|
"learndash-start-button",
|
|
),
|
|
icon: courseBlockIcon,
|
|
category: "common",
|
|
keywords: [
|
|
__("learndash", "learndash-start-button"),
|
|
__("start", "learndash-start-button"),
|
|
__("course", "learndash-start-button"),
|
|
__("button", "learndash-start-button"),
|
|
],
|
|
attributes: {
|
|
courseId: {
|
|
type: "number",
|
|
default: 0,
|
|
},
|
|
buttonText: {
|
|
type: "string",
|
|
default: "Start Course",
|
|
},
|
|
newTab: {
|
|
type: "boolean",
|
|
default: false,
|
|
},
|
|
alignment: {
|
|
type: "string",
|
|
default: "left",
|
|
enum: ["left", "center", "right"],
|
|
},
|
|
},
|
|
supports: {
|
|
align: false, // We handle alignment internally
|
|
className: true,
|
|
html: false,
|
|
},
|
|
|
|
// Edit function - what you see in the editor
|
|
edit: function (props) {
|
|
const {
|
|
attributes: { courseId, buttonText, newTab, alignment },
|
|
setAttributes,
|
|
className,
|
|
} = props;
|
|
|
|
const blockProps = useBlockProps({
|
|
className: `align-${alignment} ${courseId === 0 ? "no-course" : ""}`,
|
|
});
|
|
|
|
// Update alignment
|
|
function onChangeAlignment(newAlignment) {
|
|
setAttributes({ alignment: newAlignment || "left" });
|
|
}
|
|
|
|
return el(
|
|
Fragment,
|
|
{},
|
|
// Block Controls (toolbar)
|
|
el(
|
|
BlockControls,
|
|
{},
|
|
el(AlignmentToolbar, {
|
|
value: alignment,
|
|
onChange: onChangeAlignment,
|
|
alignmentControls: [
|
|
{
|
|
icon: "editor-alignleft",
|
|
title: __("Align left", "learndash-start-button"),
|
|
align: "left",
|
|
},
|
|
{
|
|
icon: "editor-aligncenter",
|
|
title: __("Align center", "learndash-start-button"),
|
|
align: "center",
|
|
},
|
|
{
|
|
icon: "editor-alignright",
|
|
title: __("Align right", "learndash-start-button"),
|
|
align: "right",
|
|
},
|
|
],
|
|
}),
|
|
),
|
|
|
|
// Inspector Controls (sidebar)
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Button Settings", "learndash-start-button"),
|
|
initialOpen: true,
|
|
},
|
|
el(
|
|
PanelRow,
|
|
{},
|
|
el(TextControl, {
|
|
label: __("Course ID", "learndash-start-button"),
|
|
help: __(
|
|
"Enter the LearnDash course ID. Leave empty to use current course.",
|
|
"learndash-start-button",
|
|
),
|
|
value: courseId || "",
|
|
onChange: function (value) {
|
|
var parsed = parseInt(value, 10);
|
|
setAttributes({ courseId: isNaN(parsed) || parsed < 0 ? 0 : parsed });
|
|
},
|
|
type: "number",
|
|
min: 0,
|
|
}),
|
|
),
|
|
el(
|
|
PanelRow,
|
|
{},
|
|
el(TextControl, {
|
|
label: __("Button Text", "learndash-start-button"),
|
|
help: __(
|
|
"The text to display on the button",
|
|
"learndash-start-button",
|
|
),
|
|
value: buttonText,
|
|
onChange: function (value) {
|
|
setAttributes({ buttonText: value || "Start Course" });
|
|
},
|
|
}),
|
|
),
|
|
el(
|
|
PanelRow,
|
|
{},
|
|
el(ToggleControl, {
|
|
label: __("Open in New Tab", "learndash-start-button"),
|
|
help: __(
|
|
"Open the course in a new browser tab",
|
|
"learndash-start-button",
|
|
),
|
|
checked: newTab,
|
|
onChange: function (value) {
|
|
setAttributes({ newTab: value });
|
|
},
|
|
}),
|
|
),
|
|
),
|
|
|
|
// Usage instructions panel
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Usage Instructions", "learndash-start-button"),
|
|
initialOpen: false,
|
|
},
|
|
el(
|
|
"div",
|
|
{ className: "ldsb-help-text" },
|
|
el(
|
|
"p",
|
|
{},
|
|
__("This button will automatically:", "learndash-start-button"),
|
|
),
|
|
el(
|
|
"ul",
|
|
{},
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
"• Link to the first lesson if available",
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
'• Show "Login to Start" for logged-out users',
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
'• Show "Enroll to Start" for non-enrolled users',
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Block Preview
|
|
el(
|
|
"div",
|
|
blockProps,
|
|
el(
|
|
"div",
|
|
{
|
|
className: `ldsb-button-wrapper align-${alignment}`,
|
|
style: { textAlign: alignment },
|
|
},
|
|
el(
|
|
"a",
|
|
{
|
|
className: "ldsb-start-button",
|
|
href: "#",
|
|
onClick: function (e) {
|
|
e.preventDefault();
|
|
},
|
|
},
|
|
el("span", { className: "ldsb-button-text" }, buttonText),
|
|
arrowIcon,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
|
|
// Save function - null because this is a dynamic block
|
|
save: function () {
|
|
return null; // Dynamic block rendered by PHP
|
|
},
|
|
});
|
|
|
|
// Register the Group Start button block
|
|
registerBlockType("ldsb/start-group", {
|
|
title: __("LearnDash Start Group Work", "learndash-start-button"),
|
|
description: __(
|
|
"A button to start the first course in a LearnDash group",
|
|
"learndash-start-button",
|
|
),
|
|
icon: groupBlockIcon,
|
|
category: "common",
|
|
keywords: [
|
|
__("learndash", "learndash-start-button"),
|
|
__("group", "learndash-start-button"),
|
|
__("start", "learndash-start-button"),
|
|
__("button", "learndash-start-button"),
|
|
],
|
|
attributes: {
|
|
groupId: {
|
|
type: "number",
|
|
default: 0,
|
|
},
|
|
buttonText: {
|
|
type: "string",
|
|
default: "Start First Course",
|
|
},
|
|
newTab: {
|
|
type: "boolean",
|
|
default: false,
|
|
},
|
|
alignment: {
|
|
type: "string",
|
|
default: "left",
|
|
enum: ["left", "center", "right"],
|
|
},
|
|
},
|
|
supports: {
|
|
align: false,
|
|
className: true,
|
|
html: false,
|
|
},
|
|
|
|
// Edit function
|
|
edit: function (props) {
|
|
const {
|
|
attributes: { groupId, buttonText, newTab, alignment },
|
|
setAttributes,
|
|
className,
|
|
} = props;
|
|
|
|
const blockProps = useBlockProps({
|
|
className: `align-${alignment} ${groupId === 0 ? "no-group" : ""}`,
|
|
});
|
|
|
|
function onChangeAlignment(newAlignment) {
|
|
setAttributes({ alignment: newAlignment || "left" });
|
|
}
|
|
|
|
return el(
|
|
Fragment,
|
|
{},
|
|
// Block Controls
|
|
el(
|
|
BlockControls,
|
|
{},
|
|
el(AlignmentToolbar, {
|
|
value: alignment,
|
|
onChange: onChangeAlignment,
|
|
alignmentControls: [
|
|
{
|
|
icon: "editor-alignleft",
|
|
title: __("Align left", "learndash-start-button"),
|
|
align: "left",
|
|
},
|
|
{
|
|
icon: "editor-aligncenter",
|
|
title: __("Align center", "learndash-start-button"),
|
|
align: "center",
|
|
},
|
|
{
|
|
icon: "editor-alignright",
|
|
title: __("Align right", "learndash-start-button"),
|
|
align: "right",
|
|
},
|
|
],
|
|
}),
|
|
),
|
|
|
|
// Inspector Controls
|
|
el(
|
|
InspectorControls,
|
|
{},
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("Group Button Settings", "learndash-start-button"),
|
|
initialOpen: true,
|
|
},
|
|
el(
|
|
PanelRow,
|
|
{},
|
|
el(TextControl, {
|
|
label: __("Group ID", "learndash-start-button"),
|
|
help: __(
|
|
"Enter the LearnDash group ID. Leave empty to use current group.",
|
|
"learndash-start-button",
|
|
),
|
|
value: groupId || "",
|
|
onChange: function (value) {
|
|
var parsed = parseInt(value, 10);
|
|
setAttributes({ groupId: isNaN(parsed) || parsed < 0 ? 0 : parsed });
|
|
},
|
|
type: "number",
|
|
min: 0,
|
|
}),
|
|
),
|
|
el(
|
|
PanelRow,
|
|
{},
|
|
el(TextControl, {
|
|
label: __("Button Text", "learndash-start-button"),
|
|
help: __(
|
|
"The text to display on the button",
|
|
"learndash-start-button",
|
|
),
|
|
value: buttonText,
|
|
onChange: function (value) {
|
|
setAttributes({ buttonText: value || "Start First Course" });
|
|
},
|
|
}),
|
|
),
|
|
el(
|
|
PanelRow,
|
|
{},
|
|
el(ToggleControl, {
|
|
label: __("Open in New Tab", "learndash-start-button"),
|
|
help: __(
|
|
"Open the course in a new browser tab",
|
|
"learndash-start-button",
|
|
),
|
|
checked: newTab,
|
|
onChange: function (value) {
|
|
setAttributes({ newTab: value });
|
|
},
|
|
}),
|
|
),
|
|
),
|
|
|
|
el(
|
|
PanelBody,
|
|
{
|
|
title: __("How It Works", "learndash-start-button"),
|
|
initialOpen: false,
|
|
},
|
|
el(
|
|
"div",
|
|
{ className: "ldsb-help-text" },
|
|
el("p", {}, __("This button will:", "learndash-start-button")),
|
|
el(
|
|
"ul",
|
|
{},
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
"• Link to the first course in the group",
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
"• Go to the first lesson if available",
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
'• Show "Login to Start" for logged-out users',
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
el(
|
|
"li",
|
|
{},
|
|
__(
|
|
'• Show "Join Group to Start" for non-members',
|
|
"learndash-start-button",
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Block Preview
|
|
el(
|
|
"div",
|
|
blockProps,
|
|
el(
|
|
"div",
|
|
{
|
|
className: `ldsb-button-wrapper align-${alignment}`,
|
|
style: { textAlign: alignment },
|
|
},
|
|
el(
|
|
"a",
|
|
{
|
|
className: "ldsb-start-button ldsb-group-button",
|
|
href: "#",
|
|
onClick: function (e) {
|
|
e.preventDefault();
|
|
},
|
|
},
|
|
el("span", { className: "ldsb-button-text" }, buttonText),
|
|
arrowIcon,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
|
|
save: function () {
|
|
return null; // Dynamic block
|
|
},
|
|
});
|
|
})(window.wp);
|