diff --git a/.distignore b/.distignore
index e3933b2c4..edab61b68 100644
--- a/.distignore
+++ b/.distignore
@@ -5,6 +5,7 @@
/.wordpress-org
/log
/node_modules
+/resources/frontend/css/*.map
/tests
/vendor/autoload.php
/vendor/composer
diff --git a/.gitignore b/.gitignore
index 826dba38c..28246c431 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ log.txt
package-lock.json
phpstan.neon
node_modules
+resources/frontend/css/*.map
tests/_output
tests/_wordpress
tests/Support/_generated
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 11afb77e7..c3a13da4e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,8 +1,12 @@
{
"extends": "@wordpress/stylelint-config",
+ "plugins": ["stylelint-scss"],
"rules": {
"font-family-no-missing-generic-family-keyword": null,
"selector-class-pattern": null,
- "declaration-property-unit-allowed-list": null
+ "declaration-property-unit-allowed-list": null,
+ "at-rule-no-unknown": [true, {
+ "ignoreAtRules": ["use", "forward", "mixin", "include", "extend"]
+ }]
}
}
\ No newline at end of file
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index 0851e54f8..3fd608b46 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -60,6 +60,18 @@ Typically, packages listed in this section would be internal development tools f
- PHPStan
- Codeception
+### Build
+
+Run `npm run build` to compile frontend CSS and JS in one step.
+
+### CSS
+
+Run `npm run watch:css` to compile frontend CSS to `resources/frontend/css/frontend.css` when working on SCSS in the `resources/frontend/scss` folder.
+
+### JS
+
+Run `npm run watch:js` to compile frontend JS to `resources/frontend/js/dist/frontend-min.js` when working on JS in the `resources/frontend/js` folder.
+
## Committing Work
Remember to commit your changes to your branch relatively frequently, with a meaningful, short summary that explains what the change(s) do.
diff --git a/SETUP.md b/SETUP.md
index 13fb685fa..58507ae8c 100644
--- a/SETUP.md
+++ b/SETUP.md
@@ -93,7 +93,9 @@ In the Plugin's directory, at the command line, run `npm install`.
This sets up:
- JS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-js)
-- CSS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-style)
+- SCSS and CSS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-style)
+- JS compilation and minification
+- SASS compilation and minification
### Configure wp-config.php
diff --git a/TESTING.md b/TESTING.md
index 14d732985..2da6c131f 100644
--- a/TESTING.md
+++ b/TESTING.md
@@ -26,14 +26,29 @@ The following Composer commands can be used:
| `composer fix-php-coding-standards` | `composer phpcbf` | Fix PHP files to meet WordPress and PHP Coding Standards |
| `composer php-coding-standards-on-tests` | `composer phpcs-tests` | Runs PHP Coding Standards on the /tests folder |
| `composer fix-php-coding-standards-on-tests` | `composer phpcbf-tests` | Fix PHP files to meet PHP Coding Standards on the /tests folder |
-| `composer css-coding-standards` | `composer lint-css` | Runs WordPress CSS Coding Standards on the entire plugin codebase |
+| `composer css-coding-standards` | `composer lint-css` | Runs WordPress CSS Coding Standards on CSS and SCSS files |
| `composer fix-css-coding-standards` | `composer fix-css` | Fixes CSS files to meet WordPress CSS Coding Standards |
-| `composer js-coding-standards` | `composer lint-js` | Runs WordPress JS Coding Standards on the entire plugin codebase |
+| `composer build-css` | `composer build-css` | Builds the frontend CSS file |
+| `composer watch-css` | `composer watch-css` | Builds the frontend CSS file when changes are made to SCSS files |
+| `composer js-coding-standards` | `composer lint-js` | Runs WordPress JS Coding Standards on JS files |
| `composer fix-js-coding-standards` | `composer fix-js` | Fixes JS files to meet WordPress JS Coding Standards |
+| `composer build-js` | `composer build-js` | Builds the frontend JS file |
+| `composer watch-js` | `composer watch-js` | Builds the frontend JS file when changes are made to frontend JS files |
+| `composer build` | `composer build` | Builds frontend CSS and JS |
| `composer static-analysis` | `composer phpstan` | Runs PHPStan static analysis with increased memory limit |
| `composer test` | `composer test` | Builds and runs end-to-end tests with `fail-fast` enabled |
| `composer test-integration` | `composer test-integration` | Builds and runs integration tests with `fail-fast` enabled |
+The following npm commands can be used, if preferred:
+
+| Command | Description |
+|---------|-------------|
+| `npm run build:css` | Builds the frontend CSS file |
+| `npm run watch:css` | Builds the frontend CSS file when changes are made to SCSS files |
+| `npm run build:js` | Builds the frontend JS file |
+| `npm run watch:js` | Builds the frontend JS file when changes are made to frontend JS files |
+| `npm run build` | Builds frontend CSS and JS |
+
## Write (or modify) a test
If your work creates new functionality, write a test.
diff --git a/composer.json b/composer.json
index 0d4aa7f46..792daf7df 100644
--- a/composer.json
+++ b/composer.json
@@ -27,10 +27,18 @@
"phpcbf": "vendor/bin/phpcbf ./ -s -v",
"phpcs-tests": "vendor/bin/phpcs ./tests --standard=phpcs.tests.xml -s -v",
"phpcbf-tests": "vendor/bin/phpcbf ./tests --standard=phpcs.tests.xml -s -v",
+ "build-css": "npm run build:css",
+ "watch-css": "npm run watch:css",
"lint-css": "npm run lint:css",
"fix-css": "npm run fix:css",
+ "build-js": "npm run build:js",
+ "watch-js": "npm run watch:js",
"lint-js": "npm run lint:js",
"fix-js": "npm run fix:js",
+ "build": [
+ "npm run build:css",
+ "npm run build:js"
+ ],
"phpstan": "vendor/bin/phpstan analyse --memory-limit=1250M",
"php-coding-standards": "vendor/bin/phpcs ./ -s -v",
"fix-php-coding-standards": "vendor/bin/phpcbf ./ -s -v",
diff --git a/includes/blocks/class-convertkit-block-broadcasts.php b/includes/blocks/class-convertkit-block-broadcasts.php
index e416ed1b3..d41ba18fb 100644
--- a/includes/blocks/class-convertkit-block-broadcasts.php
+++ b/includes/blocks/class-convertkit-block-broadcasts.php
@@ -115,9 +115,12 @@ public function enqueue_scripts() {
// Get ConvertKit Settings.
$settings = new ConvertKit_Settings();
- wp_enqueue_script( 'convertkit-' . $this->get_name(), CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/broadcasts.js', array(), CONVERTKIT_PLUGIN_VERSION, true );
+ // Enqueue frontend JS.
+ convertkit_enqueue_frontend_js();
+
+ // Define variables.
wp_localize_script(
- 'convertkit-' . $this->get_name(),
+ 'convertkit-js',
'convertkit_broadcasts',
array(
// REST API URL endpoint.
@@ -127,6 +130,7 @@ public function enqueue_scripts() {
'debug' => $settings->debug_enabled(),
)
);
+
}
/**
@@ -136,7 +140,7 @@ public function enqueue_scripts() {
*/
public function enqueue_styles() {
- wp_enqueue_style( 'convertkit-' . $this->get_name(), CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/broadcasts.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
}
diff --git a/includes/blocks/class-convertkit-block-form-builder-field.php b/includes/blocks/class-convertkit-block-form-builder-field.php
index 96f68c9bb..b5015f019 100644
--- a/includes/blocks/class-convertkit-block-form-builder-field.php
+++ b/includes/blocks/class-convertkit-block-form-builder-field.php
@@ -89,7 +89,7 @@ public function enqueue_styles_editor() {
*/
public function enqueue_styles() {
- wp_enqueue_style( 'convertkit-form-builder', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/form-builder.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
}
diff --git a/includes/blocks/class-convertkit-block-form-builder.php b/includes/blocks/class-convertkit-block-form-builder.php
index a6d87a620..df67aa3c8 100644
--- a/includes/blocks/class-convertkit-block-form-builder.php
+++ b/includes/blocks/class-convertkit-block-form-builder.php
@@ -288,7 +288,7 @@ public function enqueue_styles_editor() {
*/
public function enqueue_styles() {
- wp_enqueue_style( 'convertkit-form-builder-field', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/form-builder.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
}
diff --git a/includes/blocks/class-convertkit-block-form-trigger.php b/includes/blocks/class-convertkit-block-form-trigger.php
index 423561557..f9a264329 100644
--- a/includes/blocks/class-convertkit-block-form-trigger.php
+++ b/includes/blocks/class-convertkit-block-form-trigger.php
@@ -39,7 +39,7 @@ public function __construct() {
*/
public function enqueue_styles() {
- wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
// Enqueue the block button CSS.
wp_enqueue_style( 'wp-block-button' );
diff --git a/includes/blocks/class-convertkit-block-form.php b/includes/blocks/class-convertkit-block-form.php
index b006e4451..964dcf485 100644
--- a/includes/blocks/class-convertkit-block-form.php
+++ b/includes/blocks/class-convertkit-block-form.php
@@ -67,7 +67,7 @@ public function enqueue_styles_editor() {
*/
public function enqueue_styles() {
- wp_enqueue_style( 'convertkit-form', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/form.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
}
diff --git a/includes/blocks/class-convertkit-block-product.php b/includes/blocks/class-convertkit-block-product.php
index 1a4cbce91..a6f1362a0 100644
--- a/includes/blocks/class-convertkit-block-product.php
+++ b/includes/blocks/class-convertkit-block-product.php
@@ -61,7 +61,7 @@ public function enqueue_scripts() {
*/
public function enqueue_styles() {
- wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
// Enqueue the block button CSS.
wp_enqueue_style( 'wp-block-button' );
diff --git a/includes/class-convertkit-output-restrict-content.php b/includes/class-convertkit-output-restrict-content.php
index 5cd431b06..93b6930e8 100644
--- a/includes/class-convertkit-output-restrict-content.php
+++ b/includes/class-convertkit-output-restrict-content.php
@@ -1425,15 +1425,17 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn
// Only load styles if the Disable CSS option is off.
if ( ! $this->settings->css_disabled() ) {
// Enqueue styles.
- wp_enqueue_style( 'convertkit-restrict-content', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/restrict-content.css', array(), CONVERTKIT_PLUGIN_VERSION );
+ convertkit_enqueue_frontend_css();
}
// Only load scripts if the Disable Scripts option is off.
if ( ! $this->settings->scripts_disabled() ) {
// Enqueue scripts.
- wp_enqueue_script( 'convertkit-restrict-content', CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/restrict-content.js', array(), CONVERTKIT_PLUGIN_VERSION, true );
+ convertkit_enqueue_frontend_js();
+
+ // Define variables.
wp_localize_script(
- 'convertkit-restrict-content',
+ 'convertkit-js',
'convertkit_restrict_content',
array(
'nonce' => wp_create_nonce( 'wp_rest' ),
@@ -1442,7 +1444,6 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn
'debug' => $this->settings->debug_enabled(),
)
);
-
}
// Output code form if this request is after the user entered their email address,
diff --git a/includes/class-convertkit-output.php b/includes/class-convertkit-output.php
index 5078a58ff..be427fcf4 100644
--- a/includes/class-convertkit-output.php
+++ b/includes/class-convertkit-output.php
@@ -801,14 +801,10 @@ public function enqueue_scripts() {
return;
}
- // Register scripts that we might use.
- wp_register_script(
- 'convertkit-js',
- CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/convertkit.js',
- array(),
- CONVERTKIT_PLUGIN_VERSION,
- true
- );
+ // Enqueue frontend JS.
+ convertkit_enqueue_frontend_js();
+
+ // Define variables.
wp_localize_script(
'convertkit-js',
'convertkit',
@@ -820,9 +816,6 @@ public function enqueue_scripts() {
)
);
- // Enqueue.
- wp_enqueue_script( 'convertkit-js' );
-
}
/**
diff --git a/includes/functions.php b/includes/functions.php
index 06750a515..f4f214ec1 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -529,6 +529,34 @@ function convertkit_get_new_product_url() {
}
+/**
+ * Helper method to enqueue the frontend CSS file.
+ *
+ * @since 3.2.0
+ */
+function convertkit_enqueue_frontend_css() {
+
+ wp_enqueue_style( 'convertkit-frontend', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/frontend.css', array(), CONVERTKIT_PLUGIN_VERSION );
+
+}
+
+/**
+ * Helper method to enqueue the frontend JS file.
+ *
+ * @since 3.2.0
+ */
+function convertkit_enqueue_frontend_js() {
+
+ wp_enqueue_script(
+ 'convertkit-js',
+ CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/dist/frontend.min.js',
+ array(),
+ CONVERTKIT_PLUGIN_VERSION,
+ true
+ );
+
+}
+
/**
* Helper method to enqueue Select2 scripts for use within the ConvertKit Plugin.
*
diff --git a/package.json b/package.json
index 1ba3f1201..eafd3f5f8 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,22 @@
"name": "wordpress-linting-setup",
"private": true,
"scripts": {
- "lint:css": "wp-scripts lint-style --max-warnings=0",
- "fix:css": "wp-scripts lint-style --fix",
- "lint:js": "wp-scripts lint-js --max-warnings=0",
- "fix:js": "wp-scripts lint-js --fix"
+ "build:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --no-source-map --style=compressed",
+ "watch:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --watch --style=compressed",
+ "lint:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --max-warnings=0",
+ "fix:css": "prettier --write 'resources/frontend/scss/**/*.scss' && wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix",
+ "build:js": "wp-scripts build resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js",
+ "watch:js": "wp-scripts start resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js",
+ "lint:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --max-warnings=0",
+ "fix:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --fix",
+ "build": "npm run build:css && npm run build:js"
},
"prettier": "@wordpress/prettier-config",
"devDependencies": {
"@wordpress/prettier-config": "^4.30.0",
"@wordpress/scripts": "^30.23.0",
- "eslint-config-prettier": "^10.1.8"
+ "eslint-config-prettier": "^10.1.8",
+ "sass": "^1.97.3",
+ "stylelint-scss": "^6.14.0"
}
}
diff --git a/resources/frontend/css/broadcasts.css b/resources/frontend/css/broadcasts.css
deleted file mode 100644
index cb98b4b9a..000000000
--- a/resources/frontend/css/broadcasts.css
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * Pagination
- */
- .convertkit-broadcasts-pagination {
- display: grid;
- grid-template-areas: "prev next";
- grid-template-columns: repeat(2, 1fr);
- grid-column-gap: 20px;
- padding: 20px 0 0 0;
-}
-
-.convertkit-broadcasts-pagination li {
- list-style: none;
- margin: 0;
-}
-
-.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev {
- grid-area: prev;
- text-align: left;
-}
-
-.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next {
- grid-area: next;
- text-align: right;
-}
-
-.convertkit-broadcasts-list,
-.editor-styles-wrapper .convertkit-broadcasts-list,
-.convertkit-broadcasts-pagination,
-.editor-styles-wrapper .convertkit-broadcasts-pagination {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-/**
- * Broadcasts
- */
-.convertkit-broadcasts.has-background,
-.convertkit-broadcasts[data-background-color],
-.editor-styles-wrapper .convertkit-broadcasts.has-background {
- padding: 20px;
-}
-
-.convertkit-broadcasts.convertkit-broadcasts-loading,
-.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading {
- background-color: #e3e3e3 !important;
- background-image: url(../images/spinner.gif);
- background-position: center;
- background-repeat: no-repeat;
-}
-
-/**
- * Broadcast Item
- */
- .convertkit-broadcasts-list li {
- list-style: none;
- margin: 0;
- padding: 5px 0;
- display: grid;
- grid-template-areas:
- "date title"
- "image text";
- grid-template-columns: 150px auto;
- grid-column-gap: 20px;
-}
-
-.convertkit-broadcasts-list li time {
- display: inline-block;
- grid-area: date;
-}
-
-.convertkit-broadcasts[data-display-order="broadcast-date"] .convertkit-broadcasts-list li time {
- text-align: right;
-}
-
-.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] .convertkit-broadcasts-list li time {
- text-align: left;
-}
-
-.convertkit-broadcasts-list li .convertkit-broadcast-title {
- display: inline-block;
- grid-area: title;
-}
-
-.convertkit-broadcasts-list li .convertkit-broadcast-image {
- display: inline-block;
- grid-area: image;
-}
-
-.convertkit-broadcasts-list li .convertkit-broadcast-image img {
- max-width: 100%;
- height: auto;
-}
-
-.convertkit-broadcasts-list li .convertkit-broadcast-text {
- display: inline-block;
- grid-area: text;
- font-size: 16px;
-}
-
-.convertkit-broadcasts-list li .convertkit-broadcast-read-more {
- display: block;
-}
-
-@media screen and (max-width: 478px) {
-
- .convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li {
- margin: 0 0 20px 0;
- }
-}
-
-/**
- * List View
- */
-.convertkit-broadcasts[data-display-order="broadcast-date"] .convertkit-broadcasts-list li {
- grid-template-areas:
- "title date"
- "text image";
- grid-template-columns: auto 150px;
-}
-
-@media screen and (max-width: 478px) {
-
- .convertkit-broadcasts-list li {
- grid-template-areas:
- "image image"
- "date date"
- "title title"
- "text text";
- grid-row-gap: 10px;
- }
-}
-
-/**
- * Grid View.
- */
-.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-column-gap: 20px;
- grid-row-gap: 20px;
- align-items: start;
-}
-
-.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li {
- grid-template-areas:
- "image"
- "date"
- "title"
- "text";
- grid-template-columns: none;
- grid-row-gap: 10px;
-}
-
-.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] .convertkit-broadcasts-list li {
- grid-template-areas:
- "image"
- "title"
- "text"
- "date";
-}
-
-.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more {
- margin: 10px 0 0 0;
-}
-
-@media screen and (max-width: 768px) {
-
- .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-@media screen and (max-width: 478px) {
-
- .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
- grid-template-columns: repeat(1, 1fr);
- }
-}
-
-/**
- * Replicates CSS styles provided by block themes for older non-block themes
- * that may not include these definitions, resulting in incorrect spacing.
- */
-.convertkit-broadcasts {
- margin-bottom: 20px;
-}
-
-@media only screen and (min-width: 482px) {
-
- .convertkit-broadcasts {
- margin-bottom: 30px;
- }
-}
-
-/**
- * Imported Broadcasts to Posts
- * - Styles here are designed to override common themes that may interfere
- * with an imported Kit Broadcast, such as Elementor.
- */
-body.convertkit-broadcast.elementor-default table,
-body.convertkit-broadcast.elementor-default table tbody,
-body.convertkit-broadcast.elementor-default table tbody td {
- border: none;
-}
-
-body.convertkit-broadcast.elementor-default table tbody > tr:nth-child(odd) > td,
-body.convertkit-broadcast.elementor-default table tbody > tr:nth-child(odd) > th {
- background: none;
-}
diff --git a/resources/frontend/css/button.css b/resources/frontend/css/button.css
deleted file mode 100644
index 36118c267..000000000
--- a/resources/frontend/css/button.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.convertkit-product a,
-.convertkit-product span,
-.convertkit-button a,
-.convertkit-button span {
- display: block;
- padding: calc(0.667em + 2px) calc(1.333em + 2px);
- cursor: pointer;
- text-align: center;
- text-decoration: none;
- word-break: break-word;
- box-sizing: border-box;
-}
-
-/**
- * Replicates CSS styles provided by block themes for older non-block themes
- * that may not include these definitions, resulting in incorrect spacing.
- */
-.convertkit-product,
-.convertkit-button {
- margin-bottom: 20px;
-}
-
-@media only screen and (min-width: 482px) {
-
- .convertkit-product,
- .convertkit-button {
- margin-bottom: 30px;
- }
-}
diff --git a/resources/frontend/css/form-builder.css b/resources/frontend/css/form-builder.css
deleted file mode 100644
index cf4cd1da9..000000000
--- a/resources/frontend/css/form-builder.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Define some sensible default styles for the form elements,
- * in case a theme doesn't define them.
- */
-.wp-block-convertkit-form-builder-field input,
-.wp-block-convertkit-form-builder-field textarea {
- width: 100%;
- margin: 0 0 20px 0;
- padding: 10px;
- box-sizing: border-box;
- font-family: inherit;
-}
-
-.wp-block-convertkit-form-builder-field label span.convertkit-form-builder-field-required {
- color: #f00;
-}
-
-form .convertkit-form-builder-subscribed-message {
- width: 100%;
- margin: 0 0 20px 0;
- box-sizing: border-box;
-}
diff --git a/resources/frontend/css/frontend.css b/resources/frontend/css/frontend.css
new file mode 100644
index 000000000..03c9274a7
--- /dev/null
+++ b/resources/frontend/css/frontend.css
@@ -0,0 +1 @@
+.convertkit-broadcasts-pagination{display:grid;grid-template-areas:"prev next";grid-template-columns:repeat(2, 1fr);grid-column-gap:20px;padding:20px 0 0 0}.convertkit-broadcasts-pagination li{list-style:none;margin:0}.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev{grid-area:prev;text-align:left}.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next{grid-area:next;text-align:right}.convertkit-broadcasts-list,.convertkit-broadcasts-pagination{list-style:none;margin:0;padding:0}.editor-styles-wrapper .convertkit-broadcasts-list,.editor-styles-wrapper .convertkit-broadcasts-pagination{list-style:none;margin:0;padding:0}.convertkit-broadcasts-list li{list-style:none;margin:0;padding:5px 0;display:grid;grid-template-areas:"date title" "image text";grid-template-columns:150px auto;grid-column-gap:20px}.convertkit-broadcasts-list li time{display:inline-block;grid-area:date}.convertkit-broadcasts-list li .convertkit-broadcast-title{display:inline-block;grid-area:title}.convertkit-broadcasts-list li .convertkit-broadcast-image{display:inline-block;grid-area:image}.convertkit-broadcasts-list li .convertkit-broadcast-image img{max-width:100%;height:auto}.convertkit-broadcasts-list li .convertkit-broadcast-text{display:inline-block;grid-area:text;font-size:16px}.convertkit-broadcasts-list li .convertkit-broadcast-read-more{display:block;margin:10px 0 0 0}.convertkit-broadcasts{margin-bottom:20px}@media only screen and (min-width: 482px){.convertkit-broadcasts{margin-bottom:30px}}.convertkit-broadcasts.has-background,.convertkit-broadcasts[data-background-color]{padding:20px}.convertkit-broadcasts.convertkit-broadcasts-loading{background-color:#e3e3e3 !important;background-image:url(../images/spinner.gif);background-position:center;background-repeat:no-repeat}.editor-styles-wrapper .convertkit-broadcasts.has-background{padding:20px}.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading{background-color:#e3e3e3 !important;background-image:url(../images/spinner.gif);background-position:center;background-repeat:no-repeat}.convertkit-broadcasts[data-display-order=broadcast-date] .convertkit-broadcasts-list li{grid-template-areas:"title date" "text image";grid-template-columns:auto 150px}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{display:grid;grid-template-columns:repeat(3, 1fr);grid-column-gap:20px;grid-row-gap:20px;align-items:start}@media screen and (max-width: 768px){.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{grid-template-columns:repeat(2, 1fr)}}@media screen and (max-width: 478px){.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{grid-template-columns:repeat(1, 1fr)}}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li{grid-template-areas:"image" "date" "title" "text";grid-template-columns:none;grid-row-gap:10px}.convertkit-broadcasts[data-display-grid="1"][data-display-order=broadcast-date] .convertkit-broadcasts-list li{grid-template-areas:"image" "title" "text" "date"}.convertkit-broadcasts[data-display-order=broadcast-date] .convertkit-broadcasts-list li time{text-align:right}.convertkit-broadcasts[data-display-grid="1"][data-display-order=broadcast-date] .convertkit-broadcasts-list li time{text-align:left}@media screen and (max-width: 478px){.convertkit-broadcasts-list li{grid-template-areas:"image image" "date date" "title title" "text text";grid-row-gap:10px}.convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li{margin:0 0 20px 0}}body.convertkit-broadcast.elementor-default table,body.convertkit-broadcast.elementor-default table tbody,body.convertkit-broadcast.elementor-default table tbody td{border:none}body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>td,body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>th{background:none}.convertkit-product,.convertkit-button{margin-bottom:20px}@media only screen and (min-width: 482px){.convertkit-product,.convertkit-button{margin-bottom:30px}}.convertkit-product a,.convertkit-product span,.convertkit-button a,.convertkit-button span{display:block;padding:calc(.667em + 2px) calc(1.333em + 2px);cursor:pointer;text-align:center;text-decoration:none;word-break:break-word;box-sizing:border-box}.wp-block-convertkit-form-builder-field input,.wp-block-convertkit-form-builder-field textarea{width:100%;margin:0 0 20px 0;padding:10px;box-sizing:border-box;font-family:inherit}.wp-block-convertkit-form-builder-field label span.convertkit-form-builder-field-required{color:red}form .convertkit-form-builder-subscribed-message{width:100%;margin:0 0 20px 0;box-sizing:border-box}form.formkit-form[data-format=inline]{margin-left:auto;margin-right:auto;margin-bottom:20px}@media only screen and (min-width: 482px){form.formkit-form[data-format=inline]{margin-bottom:30px}}.formkit-sticky-bar{z-index:999999 !important}#convertkit-restrict-content *,#convertkit-restrict-content-modal *{box-sizing:border-box}#convertkit-restrict-content h3,#convertkit-restrict-content-modal h3{margin:0 0 20px 0;padding:0;font-size:24px;line-height:40px;font-style:normal}#convertkit-restrict-content h4,#convertkit-restrict-content-modal h4{margin:0 0 5px 0;padding:0;font-size:18px;line-height:30px;font-style:normal}#convertkit-restrict-content p,#convertkit-restrict-content-modal p{margin:0 0 20px 0;padding:0;font-size:16px;line-height:28px}#convertkit-restrict-content small,#convertkit-restrict-content-modal small{display:block;font-size:13px;line-height:22px;color:#111}#convertkit-restrict-content{width:100%;background:#f9f7f4;color:#373f45;margin:30px auto;padding:40px;text-align:center;box-sizing:border-box;border-radius:8px}#convertkit-restrict-content .convertkit-product a{display:inline-block;text-decoration:none;height:42px;line-height:42px;font-size:15px;margin:0;padding:0 20px !important;border:none;border-radius:3px}.convertkit-restrict-content-notice{display:inline-block;margin:0 0 20px 0;padding:0 0 0 30px;color:#d3434a;font-size:12px;line-height:24px;font-weight:400;background-image:url(../images/error.svg);background-repeat:no-repeat;background-size:24px 24px}form.convertkit-restrict-content-form input[type=submit]{height:42px;line-height:42px;font-size:15px;margin:0;padding:0 20px !important;border:none;border-radius:3px}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{display:grid;grid-template-areas:"email button";grid-template-columns:3fr 1fr;grid-column-gap:5px;text-align:left;max-width:500px;height:56px;margin:0 auto 20px auto;padding:6px 10px;background-image:url(../images/email.svg);background-repeat:no-repeat;background-color:#fff;background-size:15px 15px;background-position:18px 20px;border:1px solid #fff;border-radius:3px}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field.convertkit-restrict-content-error{border-color:#d3434a}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=email]{grid-area:email;text-indent:35px;height:42px;line-height:42px;margin:0;padding:0;font-size:15px;background:none;border:none}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=submit]{grid-area:button}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container{width:427px;height:100px;border:1px solid #dce1e5;border-radius:4px;margin:0 auto 20px auto;overflow:hidden;background:#dce1e5}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container.convertkit-restrict-content-error{border-color:#d3434a}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code{--otp-digits: 6;--otp-height: 98px;--otp-number-width: 70px;--otp-letter-spacing: 41px;--otp-text-indent: 20px;--otp-border-color: #dce1e5;--otp-text-color: #697177;--otp-font-size: 50px;--_otp-digit: 0;all:unset;text-align:left;margin:0;padding:0;background:linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0),linear-gradient(90deg, #fff var(--otp-number-width), transparent 0);background-position:calc(var(--_otp-digit)*(var(--otp-number-width) + 1px)) 0,0 0;background-repeat:no-repeat,repeat-x;background-size:calc(var(--otp-number-width) + 1px) 100%;inline-size:calc(var(--otp-digits)*(var(--otp-number-width) + 1px));letter-spacing:var(--otp-letter-spacing);text-indent:var(--otp-text-indent);width:calc(var(--otp-number-width)*var(--otp-digits) + var(--otp-digits));height:var(--otp-height);color:var(--otp-text-color);font-size:var(--otp-font-size);font-family:monospace;font-weight:400}#convertkit-restrict-content-modal-background{display:none;position:fixed;width:100%;height:100%;z-index:999998;top:0;left:0;background:rgba(9,13,22,.8)}#convertkit-restrict-content-modal{box-sizing:border-box;display:none;position:fixed;z-index:999999;width:730px;height:328px;top:calc(50% - 164px);left:calc(50% - 365px);margin:0;padding:80px 115px;background:#fff;border:1px solid #fff;border-radius:8px;text-align:center}#convertkit-restrict-content-modal form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{background-color:#f4f6f8}#convertkit-restrict-content-modal #convertkit-restrict-content-modal-close{position:absolute;top:25px;right:25px;text-indent:-9999px;background-image:url(../images/cross.svg);background-repeat:no-repeat;background-size:12px 12px;background-color:rgba(0,0,0,0);border:none;cursor:pointer}#convertkit-restrict-content-modal-loading{box-sizing:border-box;display:none;position:absolute;z-index:1000000;width:100%;height:100%;top:0;left:0;margin:0;padding:0;background:url(../images/spinner.gif) center no-repeat hsla(0,0%,100%,.8);border:none;border-radius:8px;text-align:center}@media screen and (max-width: 730px){#convertkit-restrict-content{padding:20px}#convertkit-restrict-content .convertkit-restrict-content-actions{padding:10px}#convertkit-restrict-content input[type=email],#convertkit-restrict-content input[type=text],#convertkit-restrict-content input#convertkit-subscriber-code{width:100%}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{grid-template-areas:"email email" "button button";max-width:100%;height:auto}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=submit]{margin-top:10px}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container{width:213px;height:50px}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code{--otp-height: 49px;--otp-number-width: 35px;--otp-letter-spacing: 20px;--otp-text-indent: 10px;--otp-font-size: 25px}#convertkit-restrict-content-modal{width:90%;height:auto;left:5%;padding:40px}}
diff --git a/resources/frontend/css/restrict-content.css b/resources/frontend/css/restrict-content.css
deleted file mode 100644
index 7d1f68072..000000000
--- a/resources/frontend/css/restrict-content.css
+++ /dev/null
@@ -1,289 +0,0 @@
-/* Resets and typography */
-#convertkit-restrict-content *,
-#convertkit-restrict-content-modal * {
- box-sizing: border-box;
-}
-
-#convertkit-restrict-content h3,
-#convertkit-restrict-content-modal h3 {
- margin: 0 0 20px 0;
- padding: 0;
- font-size: 24px;
- line-height: 40px;
- font-style: normal;
-}
-
-#convertkit-restrict-content h4,
-#convertkit-restrict-content-modal h4 {
- margin: 0 0 5px 0;
- padding: 0;
- font-size: 18px;
- line-height: 30px;
- font-style: normal;
-}
-
-#convertkit-restrict-content p,
-#convertkit-restrict-content-modal p {
- margin: 0 0 20px 0;
- padding: 0;
- font-size: 16px;
- line-height: 28px;
-}
-
-#convertkit-restrict-content small,
-#convertkit-restrict-content-modal small {
- display: block;
- font-size: 13px;
- line-height: 22px;
- color: #111;
-}
-
-/* Overlay */
-#convertkit-restrict-content {
- width: 100%;
- background: #f9f7f4;
- color: #373f45;
- margin: 30px auto;
- padding: 40px;
- text-align: center;
- box-sizing: border-box;
- border-radius: 8px;
-}
-
-/* Actions */
-#convertkit-restrict-content .convertkit-product a {
- display: inline-block;
- text-decoration: none;
- height: 42px;
- line-height: 42px;
- font-size: 15px;
- margin: 0;
- padding: 0 20px !important;
- border: none;
- border-radius: 3px;
-}
-
-/* Notices */
-.convertkit-restrict-content-notice {
- display: inline-block;
- margin: 0 0 20px 0;
- padding: 0 0 0 30px;
- color: #d3434a;
- font-size: 12px;
- line-height: 24px;
- font-weight: 400;
- background-image: url(../images/error.svg);
- background-repeat: no-repeat;
- background-size: 24px 24px;
-}
-
-
-/* Buttons */
-form.convertkit-restrict-content-form input[type="submit"] {
- height: 42px;
- line-height: 42px;
- font-size: 15px;
- margin: 0;
- padding: 0 20px !important;
- border: none;
- border-radius: 3px;
-}
-
-/* Email input with inline button */
-form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field {
- display: grid;
- grid-template-areas: "email button";
- grid-template-columns: 3fr 1fr;
- grid-column-gap: 5px;
- text-align: left;
- max-width: 500px;
- height: 56px;
- margin: 0 auto 20px auto;
- padding: 6px 10px;
- background-image: url(../images/email.svg);
- background-repeat: no-repeat;
- background-color: #fff;
- background-size: 15px 15px;
- background-position: 18px 20px;
- border: 1px solid #fff;
- border-radius: 3px;
-}
-
-form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field.convertkit-restrict-content-error {
- border-color: #d3434a;
-}
-
-form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type="email"] {
- grid-area: email;
- text-indent: 35px;
- height: 42px;
- line-height: 42px;
- margin: 0;
- padding: 0;
- font-size: 15px;
- background: none;
- border: none;
-}
-
-form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type="submit"] {
- grid-area: button;
-}
-
-/* One time code */
-form.convertkit-restrict-content-form div#convertkit-subscriber-code-container {
- width: 427px;
- height: 100px;
- border: 1px solid #dce1e5;
- border-radius: 4px;
- margin: 0 auto 20px auto;
- overflow: hidden;
- background: #dce1e5;
-}
-
-form.convertkit-restrict-content-form div#convertkit-subscriber-code-container.convertkit-restrict-content-error {
- border-color: #d3434a;
-}
-
-form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code {
- --otp-digits: 6;
- --otp-height: 98px;
- --otp-number-width: 70px;
- --otp-letter-spacing: 41px;
- --otp-text-indent: 20px;
- --otp-border-color: #dce1e5;
- --otp-text-color: #697177;
- --otp-font-size: 50px;
- --_otp-digit: 0;
- all: unset;
- text-align: left;
- margin: 0;
- padding: 0;
- background:
- linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0),
- linear-gradient(90deg, #fff var(--otp-number-width), transparent 0);
- background-position: calc(var(--_otp-digit) * (calc(var(--otp-number-width) + 1px))) 0, 0 0;
- background-repeat: no-repeat, repeat-x;
- background-size: calc(var(--otp-number-width) + 1px) 100%;
- inline-size: calc(var(--otp-digits) * calc(var(--otp-number-width) + 1px));
- letter-spacing: var(--otp-letter-spacing);
- text-indent: var(--otp-text-indent);
- width: calc((var(--otp-number-width) * var(--otp-digits)) + var(--otp-digits));
- height: var(--otp-height);
- color: var(--otp-text-color);
- font-size: var(--otp-font-size);
- font-family: monospace;
- font-weight: 400;
-}
-
-/* Modal */
-#convertkit-restrict-content-modal-background {
- display: none;
- position: fixed;
- width: 100%;
- height: 100%;
- z-index: 999998;
- top: 0;
- left: 0;
- background: rgba(9, 13, 22, 0.8);
-}
-
-#convertkit-restrict-content-modal {
- box-sizing: border-box;
- display: none;
- position: fixed;
- z-index: 999999;
- width: 730px;
- height: 328px;
- top: calc(50% - 164px);
- left: calc(50% - 365px);
- margin: 0;
- padding: 80px 115px;
- background: #fff;
- border: 1px solid #fff;
- border-radius: 8px;
- text-align: center;
-}
-
-#convertkit-restrict-content-modal-loading {
- box-sizing: border-box;
- display: none;
- position: absolute;
- z-index: 1000000;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- background: url(../images/spinner.gif) center no-repeat rgba(255, 255, 255, 0.8);
- border: none;
- border-radius: 8px;
- text-align: center;
-}
-
-#convertkit-restrict-content-modal form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field {
- background-color: #f4f6f8;
-}
-
-#convertkit-restrict-content-modal-close {
- position: absolute;
- top: 25px;
- right: 25px;
- text-indent: -9999px;
- background-image: url(../images/cross.svg);
- background-repeat: no-repeat;
- background-size: 12px 12px;
- background-color: transparent;
- border: none;
- cursor: pointer;
-}
-
-/* Responsive */
-@media screen and (max-width: 730px) {
-
- #convertkit-restrict-content {
- padding: 20px;
- }
-
- #convertkit-restrict-content .convertkit-restrict-content-actions {
- padding: 10px;
- }
-
- #convertkit-restrict-content input[type="email"],
- #convertkit-restrict-content input[type="text"],
- #convertkit-restrict-content input#convertkit-subscriber-code {
- width: 100%;
- }
-
- form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field {
- grid-template-areas:
- "email email"
- "button button";
- max-width: 100%;
- height: auto;
- }
-
- form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type="submit"] {
- margin-top: 10px;
- }
-
- #convertkit-restrict-content-modal {
- width: 90%;
- height: auto;
- left: 5%;
- padding: 40px;
- }
-
- form.convertkit-restrict-content-form div#convertkit-subscriber-code-container {
- width: 213px;
- height: 50px;
- }
-
- form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code {
- --otp-height: 49px;
- --otp-number-width: 35px;
- --otp-letter-spacing: 20px;
- --otp-text-indent: 10px;
- --otp-font-size: 25px;
- }
-}
diff --git a/resources/frontend/js/convertkit.js b/resources/frontend/js/convertkit.js
index 598916fe6..7d1eb2a3f 100644
--- a/resources/frontend/js/convertkit.js
+++ b/resources/frontend/js/convertkit.js
@@ -155,6 +155,10 @@ function convertKitRecaptchaFormSubmit(token) {
// Submit the form.
form.submit();
}
+
+// Scope the function to the window object as webpack will wrap everything in a closure,
+// resulting in the function not being available globally.
+window.convertKitRecaptchaFormSubmit = convertKitRecaptchaFormSubmit;
/* eslint-enable no-unused-vars */
/**
diff --git a/resources/frontend/js/dist/frontend.min.asset.php b/resources/frontend/js/dist/frontend.min.asset.php
new file mode 100644
index 000000000..4ae57eb6f
--- /dev/null
+++ b/resources/frontend/js/dist/frontend.min.asset.php
@@ -0,0 +1 @@
+ array(), 'version' => '27c29088bdf910a921c1');
diff --git a/resources/frontend/js/dist/frontend.min.js b/resources/frontend/js/dist/frontend.min.js
new file mode 100644
index 000000000..afeeda6b8
--- /dev/null
+++ b/resources/frontend/js/dist/frontend.min.js
@@ -0,0 +1 @@
+(()=>{var t={184:()=>{document.addEventListener("DOMContentLoaded",function(){document.addEventListener("click",function(t){if(t.target.matches("ul.convertkit-broadcasts-pagination a")){t.preventDefault();const e=t.target.closest("div.convertkit-broadcasts");!function(t,e){convertkit_broadcasts.debug&&(console.log("convertKitBroadcastsRender()"),console.log(e)),t.classList.add("convertkit-broadcasts-loading");const n=new URLSearchParams(e),o=`${convertkit_broadcasts.ajax_url}?${n.toString()}`;fetch(o).then(function(t){return convertkit_broadcasts.debug&&console.log(t),t.json()}).then(function(e){convertkit_broadcasts.debug&&console.log(e),t.classList.remove("convertkit-broadcasts-loading"),t.innerHTML=e}).catch(function(e){convertkit.debug&&console.error(e),t.classList.remove("convertkit-broadcasts-loading")})}(e,{display_date:e.dataset.displayDate,date_format:e.dataset.dateFormat,display_image:e.dataset.displayImage,display_description:e.dataset.displayDescription,display_read_more:e.dataset.displayReadMore,read_more_label:e.dataset.readMoreLabel,limit:e.dataset.limit,paginate:e.dataset.paginate,paginate_label_prev:e.dataset.paginateLabelPrev,paginate_label_next:e.dataset.paginateLabelNext,link_color:e.dataset.linkColor,page:t.target.dataset.page})}})})},509:()=>{function t(t,e){const n=new CustomEvent(t,{detail:e});document.dispatchEvent(n)}window.convertKitRecaptchaFormSubmit=function(t){document.querySelector('[type="submit"][data-callback="convertKitRecaptchaFormSubmit"]').closest("form").submit()},document.addEventListener("DOMContentLoaded",function(){!function(e){const n=new URL(e),o=n.searchParams.get("ck_subscriber_id");if(null===o)return;n.searchParams.delete("ck_subscriber_id");const r=document.getElementsByTagName("title")[0].innerHTML;let c=n.searchParams.toString();c.length>0&&(c="?"+c),window.history.replaceState(null,r,n.pathname+c+n.hash),t("kit_subscriber_id_removed_from_url",{id:o})}(window.location.href),document.addEventListener("click",function(e){if(!(e.target.matches(".formkit-submit")||e.target.parentElement&&e.target.parentElement.matches(".formkit-submit")))return void(convertkit.debug&&console.log("not a ck form"));const n=document.querySelector('input[name="email_address"]').value;n.length?/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(n.toLowerCase())?(function(){const t=(new Date).getTime();for(let e=0;e<1e7&&!((new Date).getTime()-t>2e3);e++);}(),function(e){convertkit.debug&&(console.log("convertStoreSubscriberEmailAsIDInCookie"),console.log(e)),fetch(convertkit.ajaxurl,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded","X-WP-Nonce":convertkit.nonce},body:new URLSearchParams({email:e})}).then(function(t){return convertkit.debug&&console.log(t),t.json()}).then(function(n){convertkit.debug&&console.log(n),t("convertkit_user_subscribed",{id:n.id,email:e})}).catch(function(t){convertkit.debug&&console.error(t)})}(n)):convertkit.debug&&console.log("email not an email address"):convertkit.debug&&console.log("email empty")}),document.querySelectorAll('script[data-kit-limit-per-session="1"]').length>0&&(document.cookie="ck_non_inline_form_displayed=1; path=/",convertkit.debug&&console.log("Set `ck_non_inline_form_displayed` cookie for non-inline form limit"))})},688:()=>{function t(){const t=document.querySelector("#convertkit-subscriber-code");null!==t&&t.addEventListener("input",function(){t.style.setProperty("--_otp-digit",t.value.length),6===t.value.length&&(t.setSelectionRange(0,0),t.blur(),document.querySelector("#convertkit-restrict-content-form").requestSubmit())})}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".convertkit-restrict-content-modal-open").forEach(function(t){t.addEventListener("click",function(t){t.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="block",document.querySelector("#convertkit-restrict-content-modal").style.display="block"})}),document.addEventListener("submit",function(e){e.target.matches("form#convertkit-restrict-content-form")&&(e.preventDefault(),function(e){if(document.querySelectorAll('input[type="text"], input[type="email"], input[type="submit"]').forEach(function(t){t.setAttribute("disabled","disabled")}),document.querySelector("#convertkit-restrict-content-modal-loading").style.display="block",null!==document.querySelector("input#convertkit-subscriber-code"))return n=convertkit_restrict_content.nonce,o=e.target.querySelector('input[name="subscriber_code"]').value,r=e.target.querySelector('input[name="token"]').value,c=e.target.querySelector('input[name="convertkit_post_id"]').value,fetch(convertkit_restrict_content.subscriber_verification_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":n},body:JSON.stringify({subscriber_code:o,token:r,convertkit_post_id:c})}).then(function(t){return convertkit_restrict_content.debug&&console.log(t),t.json()}).then(function(e){if(convertkit_restrict_content.debug&&console.log(e),!e.success)return document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=e.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",void t();window.location=e.url}).catch(function(t){convertkit_restrict_content.debug&&console.error(t)}),!1;var n,o,r,c;!function(e,n,o,r,c){fetch(convertkit_restrict_content.subscriber_authentication_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":e},body:JSON.stringify({convertkit_email:n,convertkit_resource_type:o,convertkit_resource_id:r,convertkit_post_id:c})}).then(function(t){return convertkit_restrict_content.debug&&console.log(t),t.json()}).then(function(e){convertkit_restrict_content.debug&&console.log(e),void 0!==e.code?document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=e.message:document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=e.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",t()}).catch(function(t){convertkit_restrict_content.debug&&console.error(t)})}(convertkit_restrict_content.nonce,e.target.querySelector('input[name="convertkit_email"]').value,e.target.querySelector('input[name="convertkit_resource_type"]').value,e.target.querySelector('input[name="convertkit_resource_id"]').value,e.target.querySelector('input[name="convertkit_post_id"]').value)}(e))});const e=document.querySelector("#convertkit-restrict-content-modal-close");null!==e&&e.addEventListener("click",function(t){t.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="none",document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",document.querySelector("#convertkit-restrict-content-modal").style.display="none"})})}},e={};function n(o){var r=e[o];if(void 0!==r)return r.exports;var c=e[o]={exports:{}};return t[o](c,c.exports,n),c.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";n(184),n(509),n(688)})()})();
\ No newline at end of file
diff --git a/resources/frontend/js/frontend.js b/resources/frontend/js/frontend.js
new file mode 100644
index 000000000..e4a6a2d15
--- /dev/null
+++ b/resources/frontend/js/frontend.js
@@ -0,0 +1,3 @@
+import './broadcasts.js';
+import './convertkit.js';
+import './restrict-content.js';
diff --git a/resources/frontend/scss/_broadcasts.scss b/resources/frontend/scss/_broadcasts.scss
new file mode 100644
index 000000000..a39007b7a
--- /dev/null
+++ b/resources/frontend/scss/_broadcasts.scss
@@ -0,0 +1,239 @@
+/**
+ * Pagination
+ */
+.convertkit-broadcasts-pagination {
+ display: grid;
+ grid-template-areas: "prev next";
+ grid-template-columns: repeat(2, 1fr);
+ grid-column-gap: 20px;
+ padding: 20px 0 0 0;
+
+ li {
+ list-style: none;
+ margin: 0;
+
+ &.convertkit-broadcasts-pagination-prev {
+ grid-area: prev;
+ text-align: left;
+ }
+
+ &.convertkit-broadcasts-pagination-next {
+ grid-area: next;
+ text-align: right;
+ }
+ }
+}
+
+/**
+* Shared list reset
+*/
+.convertkit-broadcasts-list,
+.convertkit-broadcasts-pagination {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.editor-styles-wrapper {
+
+ .convertkit-broadcasts-list,
+ .convertkit-broadcasts-pagination {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+}
+
+/**
+* Broadcast List Items
+*/
+.convertkit-broadcasts-list {
+
+ li {
+ list-style: none;
+ margin: 0;
+ padding: 5px 0;
+ display: grid;
+ grid-template-areas:
+ "date title"
+ "image text";
+ grid-template-columns: 150px auto;
+ grid-column-gap: 20px;
+
+ time {
+ display: inline-block;
+ grid-area: date;
+ }
+
+ .convertkit-broadcast-title {
+ display: inline-block;
+ grid-area: title;
+ }
+
+ .convertkit-broadcast-image {
+ display: inline-block;
+ grid-area: image;
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+ }
+
+ .convertkit-broadcast-text {
+ display: inline-block;
+ grid-area: text;
+ font-size: 16px;
+ }
+
+ .convertkit-broadcast-read-more {
+ display: block;
+ margin: 10px 0 0 0;
+ }
+ }
+}
+
+/**
+* Broadcasts
+*/
+.convertkit-broadcasts {
+ margin-bottom: 20px;
+
+ @media only screen and (min-width: 482px) {
+ margin-bottom: 30px;
+ }
+
+ &.has-background,
+ &[data-background-color] {
+ padding: 20px;
+ }
+
+ &.convertkit-broadcasts-loading {
+ background-color: #e3e3e3 !important;
+ background-image: url(../images/spinner.gif);
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+
+ .editor-styles-wrapper &.has-background {
+ padding: 20px;
+ }
+
+ .editor-styles-wrapper &.convertkit-broadcasts-loading {
+ background-color: #e3e3e3 !important;
+ background-image: url(../images/spinner.gif);
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+
+ /**
+ * List View Layout Variant
+ */
+ &[data-display-order="broadcast-date"] {
+
+ .convertkit-broadcasts-list li {
+ grid-template-areas:
+ "title date"
+ "text image";
+ grid-template-columns: auto 150px;
+ }
+ }
+
+ /**
+ * Grid View
+ */
+ &[data-display-grid="1"] {
+
+ .convertkit-broadcasts-list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-column-gap: 20px;
+ grid-row-gap: 20px;
+ align-items: start;
+
+ @media screen and (max-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media screen and (max-width: 478px) {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ li {
+ grid-template-areas:
+ "image"
+ "date"
+ "title"
+ "text";
+ grid-template-columns: none;
+ grid-row-gap: 10px;
+ }
+ }
+
+ &[data-display-order="broadcast-date"] {
+
+ .convertkit-broadcasts-list li {
+ grid-template-areas:
+ "image"
+ "title"
+ "text"
+ "date";
+ }
+ }
+ }
+}
+
+/**
+* Date alignment variants
+*/
+.convertkit-broadcasts[data-display-order="broadcast-date"]
+ .convertkit-broadcasts-list
+ li
+ time {
+ text-align: right;
+}
+
+.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"]
+ .convertkit-broadcasts-list
+ li
+ time {
+ text-align: left;
+}
+
+/**
+* Mobile Layout Adjustments
+*/
+@media screen and (max-width: 478px) {
+
+ .convertkit-broadcasts-list li {
+ grid-template-areas:
+ "image image"
+ "date date"
+ "title title"
+ "text text";
+ grid-row-gap: 10px;
+ }
+
+ .convertkit-broadcasts[data-display-image="1"]
+ .convertkit-broadcasts-list
+ li {
+ margin: 0 0 20px 0;
+ }
+}
+
+/**
+* Imported Broadcast Overrides
+*/
+body.convertkit-broadcast.elementor-default {
+
+ table,
+ table tbody,
+ table tbody td {
+ border: none;
+ }
+
+ table tbody > tr:nth-child(odd) > td,
+ table tbody > tr:nth-child(odd) > th {
+ background: none;
+ }
+}
diff --git a/resources/frontend/scss/_button.scss b/resources/frontend/scss/_button.scss
new file mode 100644
index 000000000..289054eab
--- /dev/null
+++ b/resources/frontend/scss/_button.scss
@@ -0,0 +1,24 @@
+.convertkit-product,
+.convertkit-button {
+
+ /**
+ * Replicates CSS styles provided by block themes for older non-block themes
+ * that may not include these definitions, resulting in incorrect spacing.
+ */
+ margin-bottom: 20px;
+
+ @media only screen and (min-width: 482px) {
+ margin-bottom: 30px;
+ }
+
+ a,
+ span {
+ display: block;
+ padding: calc(0.667em + 2px) calc(1.333em + 2px);
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ word-break: break-word;
+ box-sizing: border-box;
+ }
+}
diff --git a/resources/frontend/scss/_form-builder.scss b/resources/frontend/scss/_form-builder.scss
new file mode 100644
index 000000000..870b31e69
--- /dev/null
+++ b/resources/frontend/scss/_form-builder.scss
@@ -0,0 +1,31 @@
+/**
+ * Define some sensible default styles for the form elements,
+ * in case a theme doesn't define them.
+ */
+.wp-block-convertkit-form-builder-field {
+
+ input,
+ textarea {
+ width: 100%;
+ margin: 0 0 20px 0;
+ padding: 10px;
+ box-sizing: border-box;
+ font-family: inherit;
+ }
+
+ label {
+
+ span.convertkit-form-builder-field-required {
+ color: #f00;
+ }
+ }
+}
+
+form {
+
+ .convertkit-form-builder-subscribed-message {
+ width: 100%;
+ margin: 0 0 20px 0;
+ box-sizing: border-box;
+ }
+}
diff --git a/resources/frontend/css/form.css b/resources/frontend/scss/_form.scss
similarity index 62%
rename from resources/frontend/css/form.css
rename to resources/frontend/scss/_form.scss
index 76950d183..715fe6579 100644
--- a/resources/frontend/css/form.css
+++ b/resources/frontend/scss/_form.scss
@@ -2,16 +2,16 @@
* Replicates CSS styles provided by block themes for older non-block themes
* that may not include these definitions, resulting in incorrect spacing.
*/
-form.formkit-form[data-format="inline"] {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 20px;
-}
+form.formkit-form {
-@media only screen and (min-width: 482px) {
+ &[data-format="inline"] {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
- form.formkit-form[data-format="inline"] {
- margin-bottom: 30px;
+ @media only screen and (min-width: 482px) {
+ margin-bottom: 30px;
+ }
}
}
diff --git a/resources/frontend/scss/_restrict-content.scss b/resources/frontend/scss/_restrict-content.scss
new file mode 100644
index 000000000..a5533253e
--- /dev/null
+++ b/resources/frontend/scss/_restrict-content.scss
@@ -0,0 +1,316 @@
+/* Resets and typography */
+#convertkit-restrict-content,
+#convertkit-restrict-content-modal {
+
+ * {
+ box-sizing: border-box;
+ }
+
+ h3 {
+ margin: 0 0 20px 0;
+ padding: 0;
+ font-size: 24px;
+ line-height: 40px;
+ font-style: normal;
+ }
+
+ h4 {
+ margin: 0 0 5px 0;
+ padding: 0;
+ font-size: 18px;
+ line-height: 30px;
+ font-style: normal;
+ }
+
+ p {
+ margin: 0 0 20px 0;
+ padding: 0;
+ font-size: 16px;
+ line-height: 28px;
+ }
+
+ small {
+ display: block;
+ font-size: 13px;
+ line-height: 22px;
+ color: #111;
+ }
+}
+
+/* Overlay */
+#convertkit-restrict-content {
+ width: 100%;
+ background: #f9f7f4;
+ color: #373f45;
+ margin: 30px auto;
+ padding: 40px;
+ text-align: center;
+ box-sizing: border-box;
+ border-radius: 8px;
+
+ /* Actions */
+ .convertkit-product {
+
+ a {
+ display: inline-block;
+ text-decoration: none;
+ height: 42px;
+ line-height: 42px;
+ font-size: 15px;
+ margin: 0;
+ padding: 0 20px !important;
+ border: none;
+ border-radius: 3px;
+ }
+ }
+}
+
+/* Notices */
+.convertkit-restrict-content-notice {
+ display: inline-block;
+ margin: 0 0 20px 0;
+ padding: 0 0 0 30px;
+ color: #d3434a;
+ font-size: 12px;
+ line-height: 24px;
+ font-weight: 400;
+ background-image: url(../images/error.svg);
+ background-repeat: no-repeat;
+ background-size: 24px 24px;
+}
+
+/* Buttons */
+form.convertkit-restrict-content-form {
+
+ input[type="submit"] {
+ height: 42px;
+ line-height: 42px;
+ font-size: 15px;
+ margin: 0;
+ padding: 0 20px !important;
+ border: none;
+ border-radius: 3px;
+ }
+
+ /* Email input with inline button */
+ div#convertkit-restrict-content-email-field {
+ display: grid;
+ grid-template-areas: "email button";
+ grid-template-columns: 3fr 1fr;
+ grid-column-gap: 5px;
+ text-align: left;
+ max-width: 500px;
+ height: 56px;
+ margin: 0 auto 20px auto;
+ padding: 6px 10px;
+ background-image: url(../images/email.svg);
+ background-repeat: no-repeat;
+ background-color: #fff;
+ background-size: 15px 15px;
+ background-position: 18px 20px;
+ border: 1px solid #fff;
+ border-radius: 3px;
+
+ &.convertkit-restrict-content-error {
+ border-color: #d3434a;
+ }
+
+ input[type="email"] {
+ grid-area: email;
+ text-indent: 35px;
+ height: 42px;
+ line-height: 42px;
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ background: none;
+ border: none;
+ }
+
+ input[type="submit"] {
+ grid-area: button;
+ }
+ }
+
+ /* One time code */
+ div#convertkit-subscriber-code-container {
+ width: 427px;
+ height: 100px;
+ border: 1px solid #dce1e5;
+ border-radius: 4px;
+ margin: 0 auto 20px auto;
+ overflow: hidden;
+ background: #dce1e5;
+
+ &.convertkit-restrict-content-error {
+ border-color: #d3434a;
+ }
+
+ input#convertkit-subscriber-code {
+ --otp-digits: 6;
+ --otp-height: 98px;
+ --otp-number-width: 70px;
+ --otp-letter-spacing: 41px;
+ --otp-text-indent: 20px;
+ --otp-border-color: #dce1e5;
+ --otp-text-color: #697177;
+ --otp-font-size: 50px;
+ --_otp-digit: 0;
+ all: unset;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+ background:
+ linear-gradient(
+ 90deg,
+ #dce1e5 var(--otp-number-width),
+ transparent 0
+ ),
+ linear-gradient(
+ 90deg,
+ #fff var(--otp-number-width),
+ transparent 0
+ );
+ background-position:
+ calc(var(--_otp-digit) * (calc(var(--otp-number-width) + 1px)))
+ 0,
+ 0 0;
+ background-repeat: no-repeat, repeat-x;
+ background-size: calc(var(--otp-number-width) + 1px) 100%;
+ inline-size: calc(
+ var(--otp-digits) * calc(var(--otp-number-width) + 1px)
+ );
+ letter-spacing: var(--otp-letter-spacing);
+ text-indent: var(--otp-text-indent);
+ width: calc(
+ (var(--otp-number-width) * var(--otp-digits)) +
+ var(--otp-digits)
+ );
+ height: var(--otp-height);
+ color: var(--otp-text-color);
+ font-size: var(--otp-font-size);
+ font-family: monospace;
+ font-weight: 400;
+ }
+ }
+}
+
+/* Modal */
+#convertkit-restrict-content-modal-background {
+ display: none;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ z-index: 999998;
+ top: 0;
+ left: 0;
+ background: rgba(9, 13, 22, 0.8);
+}
+
+#convertkit-restrict-content-modal {
+ box-sizing: border-box;
+ display: none;
+ position: fixed;
+ z-index: 999999;
+ width: 730px;
+ height: 328px;
+ top: calc(50% - 164px);
+ left: calc(50% - 365px);
+ margin: 0;
+ padding: 80px 115px;
+ background: #fff;
+ border: 1px solid #fff;
+ border-radius: 8px;
+ text-align: center;
+
+ form.convertkit-restrict-content-form {
+
+ div#convertkit-restrict-content-email-field {
+ background-color: #f4f6f8;
+ }
+ }
+
+ #convertkit-restrict-content-modal-close {
+ position: absolute;
+ top: 25px;
+ right: 25px;
+ text-indent: -9999px;
+ background-image: url(../images/cross.svg);
+ background-repeat: no-repeat;
+ background-size: 12px 12px;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ }
+}
+
+#convertkit-restrict-content-modal-loading {
+ box-sizing: border-box;
+ display: none;
+ position: absolute;
+ z-index: 1000000;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ background: url(../images/spinner.gif) center no-repeat
+ rgba(255, 255, 255, 0.8);
+ border: none;
+ border-radius: 8px;
+ text-align: center;
+}
+
+/* Responsive */
+@media screen and (max-width: 730px) {
+
+ #convertkit-restrict-content {
+ padding: 20px;
+
+ .convertkit-restrict-content-actions {
+ padding: 10px;
+ }
+
+ input[type="email"],
+ input[type="text"],
+ input#convertkit-subscriber-code {
+ width: 100%;
+ }
+ }
+
+ form.convertkit-restrict-content-form {
+
+ div#convertkit-restrict-content-email-field {
+ grid-template-areas:
+ "email email"
+ "button button";
+ max-width: 100%;
+ height: auto;
+
+ input[type="submit"] {
+ margin-top: 10px;
+ }
+ }
+
+ div#convertkit-subscriber-code-container {
+ width: 213px;
+ height: 50px;
+
+ input#convertkit-subscriber-code {
+ --otp-height: 49px;
+ --otp-number-width: 35px;
+ --otp-letter-spacing: 20px;
+ --otp-text-indent: 10px;
+ --otp-font-size: 25px;
+ }
+ }
+ }
+
+ #convertkit-restrict-content-modal {
+ width: 90%;
+ height: auto;
+ left: 5%;
+ padding: 40px;
+ }
+}
diff --git a/resources/frontend/scss/frontend.scss b/resources/frontend/scss/frontend.scss
new file mode 100644
index 000000000..38e1c4f49
--- /dev/null
+++ b/resources/frontend/scss/frontend.scss
@@ -0,0 +1,5 @@
+@use "broadcasts";
+@use "button";
+@use "form-builder";
+@use "form";
+@use "restrict-content";
diff --git a/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php b/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php
index 81161668f..7a5e8d350 100644
--- a/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php
+++ b/tests/EndToEnd/broadcasts/blocks-shortcodes/PageBlockBroadcastsCest.php
@@ -780,7 +780,7 @@ public function testBroadcastsBlockWithThemeColorParameters(EndToEndTester $I)
);
// Confirm that our stylesheet loaded.
- $I->seeInSource('seeInSource('seeInSource('amOnPage('/');
// Confirm no CSS is output by the Plugin.
- $I->dontSeeInSource('broadcasts.css');
- $I->dontSeeInSource('button.css');
+ $I->dontSeeInSource('frontend.css');
// Go to the Plugin's Settings Screen.
$I->loadKitSettingsGeneralScreen($I);
@@ -776,8 +775,7 @@ public function testEnableAndDisableCSSSetting(EndToEndTester $I)
$I->amOnPage('/');
// Confirm CSS is output by the Plugin.
- $I->seeInSource('dontSeeInSource('restrict-content.css');
+ $I->dontSeeInSource('frontend.css');
}
/**
diff --git a/tests/Support/Helper/KitForms.php b/tests/Support/Helper/KitForms.php
index f4411fcdf..9c676254d 100644
--- a/tests/Support/Helper/KitForms.php
+++ b/tests/Support/Helper/KitForms.php
@@ -88,7 +88,7 @@ public function seeFormOutput($I, $formID, $position = false, $element = false,
public function seeFormTriggerOutput($I, $formURL, $text = false, $textColor = false, $backgroundColor = false, $cssClasses = false, $styles = false, $isBlock = false)
{
// Confirm that the button stylesheet loaded.
- $I->seeInSource('