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