PluginProbe
Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Membership, Subscribers and Landing Pages / 3.4.4
Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Membership, Subscribers and Landing Pages v3.4.4
3.4.4 3.4.3 3.4.2 3.4.1 3.4.0 3.3.9 3.3.8 3.3.7 3.3.6 3.3.5 3.3.4 3.3.3 3.3.2 3.3.1 2.2.0 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.2.6 2.2.7 2.2.8 2.2.9 2.3.0 All 197 releases
← All changes | includes/blocks/class-convertkit-block-product.php +158 -113 2.3.0 → 3.4.4 View file →
@@ -26,10 +26,10 @@
26 26
27 27 // Register this as a Gutenberg block in the ConvertKit Plugin.
28 28 add_filter( 'convertkit_blocks', array( $this, 'register' ) );
29 29
30 - // Enqueue scripts and styles for this Gutenberg Block in the editor view.
31 - add_action( 'convertkit_gutenberg_enqueue_scripts', array( $this, 'enqueue_scripts_editor' ) );
30 + // Register this block's MCP abilities.
31 + add_filter( 'convertkit_abilities', array( $this, 'register_abilities' ) );
32 32
33 33 // Enqueue scripts and styles for this Gutenberg Block in the editor and frontend views.
34 34 add_action( 'convertkit_gutenberg_enqueue_scripts_editor_and_frontend', array( $this, 'enqueue_scripts' ) );
35 35 add_action( 'convertkit_gutenberg_enqueue_styles_editor_and_frontend', array( $this, 'enqueue_styles' ) );
@@ -36,19 +36,8 @@
36 36
37 37 }
38 38
39 39 /**
40 - * Enqueues scripts for this Gutenberg Block in the editor view.
41 - *
42 - * @since 1.9.8.5
43 - */
44 - public function enqueue_scripts_editor() {
45 -
46 - wp_enqueue_script( 'convertkit-gutenberg-block-product', CONVERTKIT_PLUGIN_URL . 'resources/backend/js/gutenberg-block-product.js', array( 'convertkit-gutenberg' ), CONVERTKIT_PLUGIN_VERSION, true );
47 -
48 - }
49 -
50 - /**
51 40 * Enqueues scripts for this Gutenberg Block in the editor and frontend views.
52 41 *
53 42 * @since 1.9.8.5
54 43 */
@@ -74,10 +63,13 @@
74 63 * @since 1.9.8.5
75 64 */
76 65 public function enqueue_styles() {
77 66
78 - wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION );
67 + convertkit_enqueue_frontend_css();
79 68
69 + // Enqueue the block button CSS.
70 + wp_enqueue_style( 'wp-block-button' );
71 +
80 72 }
81 73
82 74 /**
83 75 * Returns this block's programmatic name, excluding the convertkit- prefix.
@@ -88,8 +80,9 @@
88 80
89 81 /**
90 82 * This will register as:
91 83 * - a shortcode, with the name [convertkit_product].
84 + * - a shortcode, with the name [kit_product].
92 85 * - a Gutenberg block, with the name convertkit/product.
93 86 */
94 87 return 'product';
95 88
@@ -95,8 +88,43 @@
95 88
96 89 }
97 90
98 91 /**
92 + * Returns this block's title.
93 + *
94 + * @since 3.1.1
95 + */
96 + public function get_title() {
97 +
98 + return __( 'Kit Product', 'convertkit' );
99 +
100 + }
101 +
102 + /**
103 + * Returns this block's plural title.
104 + *
105 + * @since 3.4.0
106 + *
107 + * @return string
108 + */
109 + public function get_title_plural() {
110 +
111 + return __( 'Kit Products', 'convertkit' );
112 +
113 + }
114 +
115 + /**
116 + * Returns this block's icon.
117 + *
118 + * @since 3.1.1
119 + */
120 + public function get_icon() {
121 +
122 + return 'resources/backend/images/block-icon-product.svg';
123 +
124 + }
125 +
126 + /**
99 127 * Returns this block's Title, Icon, Categories, Keywords and properties.
100 128 *
101 129 * @since 1.9.8.5
102 130 */
@@ -105,58 +133,58 @@
105 133 $convertkit_products = new ConvertKit_Resource_Products( 'block_edit' );
106 134 $settings = new ConvertKit_Settings();
107 135
108 136 return array(
109 - 'title' => __( 'ConvertKit Product', 'convertkit' ),
110 - 'description' => __( 'Displays a button to purchase a ConvertKit product.', 'convertkit' ),
111 - 'icon' => 'resources/backend/images/block-icon-product.svg',
112 - 'category' => 'convertkit',
113 - 'keywords' => array(
137 + 'title' => $this->get_title(),
138 + 'description' => __( 'Displays a button to purchase a Kit product.', 'convertkit' ),
139 + 'icon' => $this->get_icon(),
140 + 'category' => 'convertkit',
141 + 'keywords' => array(
114 142 __( 'ConvertKit', 'convertkit' ),
143 + __( 'Kit', 'convertkit' ),
115 144 __( 'Product', 'convertkit' ),
116 145 ),
117 146
118 147 // Function to call when rendering as a block or a shortcode on the frontend web site.
119 - 'render_callback' => array( $this, 'render' ),
148 + 'render_callback' => array( $this, 'render' ),
120 149
121 150 // Shortcode: TinyMCE / QuickTags Modal Width and Height.
122 - 'modal' => array(
123 - 'width' => 500,
124 - 'height' => 295,
151 + 'modal' => array(
152 + 'width' => 600,
153 + 'height' => 518,
125 154 ),
126 155
127 156 // Shortcode: Include a closing [/shortcode] tag when using TinyMCE or QuickTag Modals.
128 - 'shortcode_include_closing_tag' => false,
157 + 'shortcode_include_closing_tag' => false,
129 158
130 159 // Gutenberg: Block Icon in Editor.
131 - 'gutenberg_icon' => convertkit_get_file_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-product.svg' ),
160 + 'gutenberg_icon' => convertkit_get_file_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-product.svg' ),
132 161
133 162 // Gutenberg: Example image showing how this block looks when choosing it in Gutenberg.
134 - 'gutenberg_example_image' => CONVERTKIT_PLUGIN_URL . 'resources/backend/images/block-example-product.png',
163 + 'gutenberg_example_image' => CONVERTKIT_PLUGIN_URL . 'resources/backend/images/block-example-product.png',
135 164
136 - // Help descriptions, displayed when no API key / resources exist and this block/shortcode is added.
137 - 'no_api_key' => array(
138 - 'notice' => __( 'No API Key specified.', 'convertkit' ),
139 - 'link' => convertkit_get_setup_wizard_plugin_link(),
140 - 'link_text' => __( 'Click here to add your API Key.', 'convertkit' ),
165 + // Help descriptions, displayed when no Access Token / resources exist and this block/shortcode is added.
166 + 'no_access_token' => array(
167 + 'notice' => __( 'Not connected to Kit.', 'convertkit' ),
168 + 'link' => convertkit_get_setup_wizard_plugin_link(),
169 + 'link_text' => __( 'Click here to connect your Kit account.', 'convertkit' ),
170 + 'instruction_text' => __( 'Connect your Kit account at Settings > Kit, and then refresh this page to select a product.', 'convertkit' ),
141 171 ),
142 - 'no_resources' => array(
143 - 'notice' => __( 'No products exist in ConvertKit.', 'convertkit' ),
144 - 'link' => convertkit_get_new_product_url(),
145 - 'link_text' => __( 'Click here to create your first product.', 'convertkit' ),
172 + 'no_resources' => array(
173 + 'notice' => __( 'No products exist in Kit.', 'convertkit' ),
174 + 'link' => convertkit_get_new_product_url(),
175 + 'link_text' => __( 'Click here to create your first product.', 'convertkit' ),
176 + 'instruction_text' => __( 'Add a product to your Kit account, and then refresh this page to select a product.', 'convertkit' ),
146 177 ),
147 178
148 - // Gutenberg: Help descriptions, displayed when no settings defined for a newly added Block.
149 - 'gutenberg_help_description' => __( 'Select a Product using the Product option in the Gutenberg sidebar.', 'convertkit' ),
179 + // Gutenberg: Help description, displayed when the defined attribute has not been set for the block.
180 + 'gutenberg_help_description' => __( 'Select a Product using the Product option in the Gutenberg sidebar.', 'convertkit' ),
181 + 'gutenberg_help_description_attribute' => 'product',
150 182
151 - // Gutenberg: JS function to call when rendering the block preview in the Gutenberg editor.
152 - // If not defined, render_callback above will be used.
153 - 'gutenberg_preview_render_callback' => 'convertKitGutenbergProductBlockRenderPreview',
154 -
155 - // Whether an API Key exists in the Plugin, and are the required resources (products) available.
156 - // If no API Key is specified in the Plugin's settings, render the "No API Key" output.
157 - 'has_api_key' => $settings->has_api_key_and_secret(),
158 - 'has_resources' => $convertkit_products->exist(),
183 + // Whether an Access Token exists in the Plugin, and are the required resources (products) available.
184 + // If no Access Token is specified in the Plugin's settings, render the "Not Connected" output.
185 + 'has_access_token' => $settings->has_access_and_refresh_token(),
186 + 'has_resources' => $convertkit_products->exist(),
159 187 );
160 188
161 189 }
162 190
@@ -168,57 +196,47 @@
168 196 public function get_attributes() {
169 197
170 198 return array(
171 199 // Block attributes.
172 - 'product' => array(
200 + 'product' => array(
173 201 'type' => 'string',
174 202 'default' => $this->get_default_value( 'product' ),
175 203 ),
176 - 'text' => array(
204 + 'text' => array(
177 205 'type' => 'string',
178 206 'default' => $this->get_default_value( 'text' ),
179 207 ),
208 + 'discount_code' => array(
209 + 'type' => 'string',
210 + 'default' => $this->get_default_value( 'discount_code' ),
211 + ),
212 + 'checkout' => array(
213 + 'type' => 'boolean',
214 + 'default' => $this->get_default_value( 'checkout' ),
215 + ),
216 + 'disable_modal_on_mobile' => array(
217 + 'type' => 'boolean',
218 + 'default' => $this->get_default_value( 'disable_modal_on_mobile' ),
219 + ),
180 220
181 221 // The below are built in Gutenberg attributes registered in get_supports().
182 222
183 - // Color.
184 - 'backgroundColor' => array(
223 + // get_supports() style, color and typography attributes.
224 + 'style' => array(
225 + 'type' => 'object',
226 + ),
227 + 'backgroundColor' => array(
185 228 'type' => 'string',
186 229 ),
187 - 'textColor' => array(
230 + 'textColor' => array(
188 231 'type' => 'string',
189 232 ),
190 -
191 - // Typography.
192 - 'fontSize' => array(
233 + 'fontSize' => array(
193 234 'type' => 'string',
194 235 ),
195 236
196 - // Spacing/Dimensions > Padding.
197 - 'style' => array(
198 - 'type' => 'object',
199 - 'visualizers' => array(
200 - 'type' => 'object',
201 - 'padding' => array(
202 - 'type' => 'object',
203 - 'top' => array(
204 - 'type' => 'boolean',
205 - ),
206 - 'bottom' => array(
207 - 'type' => 'boolean',
208 - ),
209 - 'left' => array(
210 - 'type' => 'boolean',
211 - ),
212 - 'right' => array(
213 - 'type' => 'boolean',
214 - ),
215 - ),
216 - ),
217 - ),
218 -
219 237 // Always required for Gutenberg.
220 - 'is_gutenberg_example' => array(
238 + 'is_gutenberg_example' => array(
221 239 'type' => 'boolean',
222 240 'default' => false,
223 241 ),
224 242 );
@@ -236,19 +254,23 @@
236 254
237 255 return array(
238 256 'className' => true,
239 257 'color' => array(
240 - 'background' => true,
241 - 'text' => true,
258 + 'background' => true,
259 + 'text' => true,
260 +
261 + // Don't apply styles to the block editor's div element.
262 + // This ensures what's rendered in the Gutenberg editor matches the frontend output for styling.
263 + // See: https://github.com/WordPress/gutenberg/issues/32417.
264 + '__experimentalSkipSerialization' => true,
242 265 ),
243 266 'typography' => array(
244 - 'fontSize' => true,
267 + 'fontSize' => true,
268 + 'lineHeight' => true,
245 269 ),
246 270 'spacing' => array(
247 - 'padding' => array(
248 - 'horizontal',
249 - 'vertical',
250 - ),
271 + 'margin' => true,
272 + 'padding' => true,
251 273 ),
252 274 );
253 275
254 276 }
@@ -261,13 +283,8 @@
261 283 * @return bool|array
262 284 */
263 285 public function get_fields() {
264 286
265 - // Bail if the request is not for the WordPress Administration or frontend editor.
266 - if ( ! WP_ConvertKit()->is_admin_or_frontend_editor() ) {
267 - return false;
268 - }
269 -
270 287 // Get ConvertKit Products.
271 288 $products = array();
272 289 $convertkit_products = new ConvertKit_Resource_Products();
273 290 if ( $convertkit_products->exist() ) {
@@ -278,26 +295,42 @@
278 295
279 296 // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included
280 297 // automatically by Gutenberg.
281 298 return array(
282 - 'product' => array(
283 - 'label' => __( 'Product', 'convertkit' ),
284 - 'type' => 'select',
285 - 'values' => $products,
299 + 'product' => array(
300 + 'label' => __( 'Product', 'convertkit' ),
301 + 'type' => 'resource',
302 + 'resource' => 'products',
303 + 'values' => $products,
286 304 ),
287 - 'text' => array(
305 + 'text' => array(
288 306 'label' => __( 'Button Text', 'convertkit' ),
289 307 'type' => 'text',
290 308 'description' => __( 'The text to display for the button.', 'convertkit' ),
291 309 ),
310 + 'discount_code' => array(
311 + 'label' => __( 'Discount Code', 'convertkit' ),
312 + 'type' => 'text',
313 + 'description' => __( 'Optional: A discount code to include. Must be defined in the Kit Product.', 'convertkit' ),
314 + ),
315 + 'checkout' => array(
316 + 'label' => __( 'Load checkout step', 'convertkit' ),
317 + 'type' => 'toggle',
318 + 'description' => __( 'If enabled, immediately loads the checkout screen, instead of the Kit Product description.', 'convertkit' ),
319 + ),
320 + 'disable_modal_on_mobile' => array(
321 + 'label' => __( 'Disable modal on mobile', 'convertkit' ),
322 + 'type' => 'toggle',
323 + 'description' => __( 'Recommended if the Kit Product is a digital download being purchased on mobile, to ensure the subscriber can immediately download the PDF once purchased.', 'convertkit' ),
324 + ),
292 325
293 326 // These fields will only display on the shortcode, and are deliberately not registered in get_attributes(),
294 327 // because Gutenberg will register its own color pickers for link, background and text.
295 - 'background_color' => array(
328 + 'background_color' => array(
296 329 'label' => __( 'Background color', 'convertkit' ),
297 330 'type' => 'color',
298 331 ),
299 - 'text_color' => array(
332 + 'text_color' => array(
300 333 'label' => __( 'Text color', 'convertkit' ),
301 334 'type' => 'color',
302 335 ),
303 336 );
@@ -312,13 +345,8 @@
312 345 * @return bool|array
313 346 */
314 347 public function get_panels() {
315 348
316 - // Bail if the request is not for the WordPress Administration or frontend editor.
317 - if ( ! WP_ConvertKit()->is_admin_or_frontend_editor() ) {
318 - return false;
319 - }
320 -
321 349 // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included
322 350 // automatically by Gutenberg.
323 351 return array(
324 352 'general' => array(
@@ -325,8 +353,11 @@
325 353 'label' => __( 'General', 'convertkit' ),
326 354 'fields' => array(
327 355 'product',
328 356 'text',
357 + 'discount_code',
358 + 'checkout',
359 + 'disable_modal_on_mobile',
329 360 'background_color',
330 361 'text_color',
331 362 ),
332 363 ),
@@ -343,18 +374,21 @@
343 374 */
344 375 public function get_default_values() {
345 376
346 377 return array(
347 - 'product' => '',
348 - 'text' => __( 'Buy my product', 'convertkit' ),
349 - 'background_color' => '',
350 - 'text_color' => '',
378 + 'product' => '',
379 + 'text' => __( 'Buy my product', 'convertkit' ),
380 + 'discount_code' => '',
381 + 'checkout' => false,
382 + 'disable_modal_on_mobile' => false,
383 + 'background_color' => '',
384 + 'text_color' => '',
351 385
352 386 // Built-in Gutenberg block attributes.
353 - 'backgroundColor' => '',
354 - 'textColor' => '',
355 - 'fontSize' => '',
356 - 'style' => array(
387 + 'backgroundColor' => '',
388 + 'textColor' => '',
389 + 'fontSize' => '',
390 + 'style' => array(
357 391 'visualizers' => array(
358 392 'padding' => array(
359 393 'top' => '',
360 394 'bottom' => '',
@@ -371,10 +405,10 @@
371 405 * Returns the block's output, based on the supplied configuration attributes.
372 406 *
373 407 * @since 1.9.8.5
374 408 *
375 - * @param array $atts Block / Shortcode Attributes.
376 - * @return string Output
409 + * @param array $atts Block / Shortcode / Page Builder Module Attributes.
410 + * @return string
377 411 */
378 412 public function render( $atts ) {
379 413
380 414 // Parse attributes, defining fallback defaults if required
@@ -387,11 +421,22 @@
387 421 // Get Products Resource.
388 422 $convertkit_products = new ConvertKit_Resource_Products();
389 423
390 424 // Build HTML.
391 - $html = $convertkit_products->get_html( $atts['product'], $atts['text'], $atts['_css_classes'], $atts['_css_styles'], $this->is_block_editor_request() );
425 + $html = $convertkit_products->get_html(
426 + $atts['product'],
427 + $atts['text'],
428 + array(
429 + 'discount_code' => $atts['discount_code'],
430 + 'checkout' => $atts['checkout'],
431 + 'disable_modal' => ( $atts['disable_modal_on_mobile'] && wp_is_mobile() ),
432 + 'css_classes' => $this->get_css_classes( array( 'wp-block-button__link', 'wp-element-button' ) ),
433 + 'css_styles' => $this->get_css_styles( $atts ),
434 + 'return_as_span' => $this->is_block_editor_request(),
435 + )
436 + );
392 437
393 - // Bail if an error occured.
438 + // Bail if an error occurred.
394 439 if ( is_wp_error( $html ) ) {
395 440 if ( $settings->debug_enabled() ) {
396 441 return '<!-- ' . $html->get_error_message() . ' -->';
397 442 }