You're on Test Mode.
+ + } + + } {!this.state.lsqUser && ( + )}
-
- {this.state
- .isLoadingProducts ? (
-
+ const settings = () => {
+ return this.state ? (
+ [
+ this.state.isApiConnectable ? (
+
+
+ {this.state
+ .isLoadingProducts ? (
+
{__(
"Loading...",
"lemonsqueezy"
)}
- ) : this.state.products
- .length ? (
-
-
-
- {__(
- "Uh oh! Looks like you haven't connected your store yet! Please visit the",
+ )}
+
+
-
- {__(
- "We're fetching your data, hold on for a second!",
+
+
+ {this.state.checkingApi && {__( + "Checking connection status", + "lemonsqueezy" + )}} + + {!this.state.checkingApi && + {__( + "Uh oh! Looks like you haven't connected your store yet! Please visit the", + "lemonsqueezy" + )}{" "} + + {__( + "Lemon Squeezy Settings", + "lemonsqueezy" + )} + {" "} + {__( + "and connect to Lemon Squeezy.", + "lemonsqueezy" + )} + } +
+ ) + ] + ) : ( ++ + {__( + "We're fetching your data, hold on for a second!", + "lemonsqueezy" )} + +
+ ) + } + + return ( +
+
+
+
+
+ Custom Data
+
+
+
@@ -244,4 +417,4 @@ class Edit extends Component { } } -export default Edit; +export default withColors('backgroundColor', {textColor: 'color'})(Edit); diff --git a/src/blocks/ls-button/index.js b/src/blocks/ls-button/index.js index a11d708..79f3693 100644 --- a/src/blocks/ls-button/index.js +++ b/src/blocks/ls-button/index.js @@ -1,5 +1,6 @@ import "./styles.editor.scss"; import { registerBlockType } from "@wordpress/blocks"; +import { getColorClassName } from "@wordpress/block-editor"; import { __ } from "@wordpress/i18n"; import Edit from "./edit"; @@ -15,6 +16,30 @@ const attributes = { }, product: { type: "string" + }, + textColor: { + type: 'string' + }, + customTextColor: { + type: 'string' + }, + backgroundColor: { + type: 'string' + }, + customBackgroundColor: { + type: 'string' + }, + prefillUserData: { + type: "boolean", + default: false + }, + prefillFromURL: { + type: "boolean", + default: false + }, + customData: { + type: "array", + default: [] } }; @@ -53,28 +78,65 @@ registerBlockType("lemonsqueezy/ls-button", { __("digital products", "lemonsqueezy") ], attributes, - deprecated: [], + deprecated: [{ + attributes, + save: ({ attributes }) => { + const { content, overlay, product } = attributes; + let link = product; + let className = [ + 'wp-block-button__link', + ]; + + if ( overlay ) { + className.push('lemonsqueezy-button'); + link = product + "?embed=1"; + } + + return ( +