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 -113 2.3.0 → 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,58 +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.svg',
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 - // 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' ),
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 - '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 177
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' ),
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',
150 181
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(),
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(),
159 186 );
160 187
161 188 }
162 189
@@ -168,57 +195,47 @@
168 195 public function get_attributes() {
169 196
170 197 return array(
171 198 // Block attributes.
172 - 'product' => array(
199 + 'product' => array(
173 200 'type' => 'string',
174 201 'default' => $this->get_default_value( 'product' ),
175 202 ),
176 - 'text' => array(
203 + 'text' => array(
177 204 'type' => 'string',
178 205 'default' => $this->get_default_value( 'text' ),
179 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 + ),
180 219
181 220 // The below are built in Gutenberg attributes registered in get_supports().
182 221
183 - // Color.
184 - 'backgroundColor' => array(
222 + // get_supports() style, color and typography attributes.
223 + 'style' => array(
224 + 'type' => 'object',
225 + ),
226 + 'backgroundColor' => array(
185 227 'type' => 'string',
186 228 ),
187 - 'textColor' => array(
229 + 'textColor' => array(
188 230 'type' => 'string',
189 231 ),
190 -
191 - // Typography.
192 - 'fontSize' => array(
232 + 'fontSize' => array(
193 233 'type' => 'string',
194 234 ),
195 235
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 236 // Always required for Gutenberg.
220 - 'is_gutenberg_example' => array(
237 + 'is_gutenberg_example' => array(
221 238 'type' => 'boolean',
222 239 'default' => false,
223 240 ),
224 241 );
@@ -236,19 +253,23 @@
236 253
237 254 return array(
238 255 'className' => true,
239 256 'color' => array(
240 - 'background' => true,
241 - '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,
242 264 ),
243 265 'typography' => array(
244 - 'fontSize' => true,
266 + 'fontSize' => true,
267 + 'lineHeight' => true,
245 268 ),
246 269 'spacing' => array(
247 - 'padding' => array(
248 - 'horizontal',
249 - 'vertical',
250 - ),
270 + 'margin' => true,
271 + 'padding' => true,
251 272 ),
252 273 );
253 274
254 275 }
@@ -261,13 +282,8 @@
261 282 * @return bool|array
262 283 */
263 284 public function get_fields() {
264 285
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 286 // Get ConvertKit Products.
271 287 $products = array();
272 288 $convertkit_products = new ConvertKit_Resource_Products();
273 289 if ( $convertkit_products->exist() ) {
@@ -278,26 +294,42 @@
278 294
279 295 // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included
280 296 // automatically by Gutenberg.
281 297 return array(
282 - 'product' => array(
283 - 'label' => __( 'Product', 'convertkit' ),
284 - 'type' => 'select',
285 - 'values' => $products,
298 + 'product' => array(
299 + 'label' => __( 'Product', 'convertkit' ),
300 + 'type' => 'resource',
301 + 'resource' => 'products',
302 + 'values' => $products,
286 303 ),
287 - 'text' => array(
304 + 'text' => array(
288 305 'label' => __( 'Button Text', 'convertkit' ),
289 306 'type' => 'text',
290 307 'description' => __( 'The text to display for the button.', 'convertkit' ),
291 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 + ),
292 324
293 325 // These fields will only display on the shortcode, and are deliberately not registered in get_attributes(),
294 326 // because Gutenberg will register its own color pickers for link, background and text.
295 - 'background_color' => array(
327 + 'background_color' => array(
296 328 'label' => __( 'Background color', 'convertkit' ),
297 329 'type' => 'color',
298 330 ),
299 - 'text_color' => array(
331 + 'text_color' => array(
300 332 'label' => __( 'Text color', 'convertkit' ),
301 333 'type' => 'color',
302 334 ),
303 335 );
@@ -312,13 +344,8 @@
312 344 * @return bool|array
313 345 */
314 346 public function get_panels() {
315 347
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 348 // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included
322 349 // automatically by Gutenberg.
323 350 return array(
324 351 'general' => array(
@@ -325,8 +352,11 @@
325 352 'label' => __( 'General', 'convertkit' ),
326 353 'fields' => array(
327 354 'product',
328 355 'text',
356 + 'discount_code',
357 + 'checkout',
358 + 'disable_modal_on_mobile',
329 359 'background_color',
330 360 'text_color',
331 361 ),
332 362 ),
@@ -343,18 +373,21 @@
343 373 */
344 374 public function get_default_values() {
345 375
346 376 return array(
347 - 'product' => '',
348 - 'text' => __( 'Buy my product', 'convertkit' ),
349 - 'background_color' => '',
350 - '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' => '',
351 384
352 385 // Built-in Gutenberg block attributes.
353 - 'backgroundColor' => '',
354 - 'textColor' => '',
355 - 'fontSize' => '',
356 - 'style' => array(
386 + 'backgroundColor' => '',
387 + 'textColor' => '',
388 + 'fontSize' => '',
389 + 'style' => array(
357 390 'visualizers' => array(
358 391 'padding' => array(
359 392 'top' => '',
360 393 'bottom' => '',
@@ -371,10 +404,10 @@
371 404 * Returns the block's output, based on the supplied configuration attributes.
372 405 *
373 406 * @since 1.9.8.5
374 407 *
375 - * @param array $atts Block / Shortcode Attributes.
376 - * @return string Output
408 + * @param array $atts Block / Shortcode / Page Builder Module Attributes.
409 + * @return string
377 410 */
378 411 public function render( $atts ) {
379 412
380 413 // Parse attributes, defining fallback defaults if required
@@ -387,11 +420,22 @@
387 420 // Get Products Resource.
388 421 $convertkit_products = new ConvertKit_Resource_Products();
389 422
390 423 // Build HTML.
391 - $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 + );
392 436
393 - // Bail if an error occured.
437 + // Bail if an error occurred.
394 438 if ( is_wp_error( $html ) ) {
395 439 if ( $settings->debug_enabled() ) {
396 440 return '<!-- ' . $html->get_error_message() . ' -->';
397 441 }