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 +163 -99 2.2.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 */
@@ -101,42 +128,62 @@
101 128 * @since 1.9.8.5
102 129 */
103 130 public function get_overview() {
104 131
132 + $convertkit_products = new ConvertKit_Resource_Products( 'block_edit' );
133 + $settings = new ConvertKit_Settings();
134 +
105 135 return array(
106 - 'title' => __( 'ConvertKit Product', 'convertkit' ),
107 - 'description' => __( 'Displays a button to purchase a ConvertKit product.', 'convertkit' ),
108 - 'icon' => 'resources/backend/images/block-icon-product.png',
109 - 'category' => 'convertkit',
110 - '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(
111 141 __( 'ConvertKit', 'convertkit' ),
142 + __( 'Kit', 'convertkit' ),
112 143 __( 'Product', 'convertkit' ),
113 144 ),
114 145
115 146 // Function to call when rendering as a block or a shortcode on the frontend web site.
116 - 'render_callback' => array( $this, 'render' ),
147 + 'render_callback' => array( $this, 'render' ),
117 148
118 149 // Shortcode: TinyMCE / QuickTags Modal Width and Height.
119 - 'modal' => array(
120 - 'width' => 500,
121 - 'height' => 290,
150 + 'modal' => array(
151 + 'width' => 600,
152 + 'height' => 518,
122 153 ),
123 154
124 155 // Shortcode: Include a closing [/shortcode] tag when using TinyMCE or QuickTag Modals.
125 - 'shortcode_include_closing_tag' => false,
156 + 'shortcode_include_closing_tag' => false,
126 157
127 158 // Gutenberg: Block Icon in Editor.
128 - 'gutenberg_icon' => file_get_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-product.svg' ), /* phpcs:ignore */
159 + 'gutenberg_icon' => convertkit_get_file_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-product.svg' ),
129 160
130 161 // Gutenberg: Example image showing how this block looks when choosing it in Gutenberg.
131 - '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',
132 163
133 - // Gutenberg: Help description, displayed when no settings defined for a newly added Block.
134 - 'gutenberg_help_description' => __( 'Select a Product using the Product option in the Gutenberg sidebar.', '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' ),
170 + ),
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' ),
176 + ),
135 177
136 - // Gutenberg: JS function to call when rendering the block preview in the Gutenberg editor.
137 - // If not defined, render_callback above will be used.
138 - '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',
181 +
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(),
139 186 );
140 187
141 188 }
142 189
@@ -148,57 +195,47 @@
148 195 public function get_attributes() {
149 196
150 197 return array(
151 198 // Block attributes.
152 - 'product' => array(
199 + 'product' => array(
153 200 'type' => 'string',
154 201 'default' => $this->get_default_value( 'product' ),
155 202 ),
156 - 'text' => array(
203 + 'text' => array(
157 204 'type' => 'string',
158 205 'default' => $this->get_default_value( 'text' ),
159 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 + ),
160 219
161 220 // The below are built in Gutenberg attributes registered in get_supports().
162 221
163 - // Color.
164 - 'backgroundColor' => array(
222 + // get_supports() style, color and typography attributes.
223 + 'style' => array(
224 + 'type' => 'object',
225 + ),
226 + 'backgroundColor' => array(
165 227 'type' => 'string',
166 228 ),
167 - 'textColor' => array(
229 + 'textColor' => array(
168 230 'type' => 'string',
169 231 ),
170 -
171 - // Typography.
172 - 'fontSize' => array(
232 + 'fontSize' => array(
173 233 'type' => 'string',
174 234 ),
175 235
176 - // Spacing/Dimensions > Padding.
177 - 'style' => array(
178 - 'type' => 'object',
179 - 'visualizers' => array(
180 - 'type' => 'object',
181 - 'padding' => array(
182 - 'type' => 'object',
183 - 'top' => array(
184 - 'type' => 'boolean',
185 - ),
186 - 'bottom' => array(
187 - 'type' => 'boolean',
188 - ),
189 - 'left' => array(
190 - 'type' => 'boolean',
191 - ),
192 - 'right' => array(
193 - 'type' => 'boolean',
194 - ),
195 - ),
196 - ),
197 - ),
198 -
199 236 // Always required for Gutenberg.
200 - 'is_gutenberg_example' => array(
237 + 'is_gutenberg_example' => array(
201 238 'type' => 'boolean',
202 239 'default' => false,
203 240 ),
204 241 );
@@ -216,19 +253,23 @@
216 253
217 254 return array(
218 255 'className' => true,
219 256 'color' => array(
220 - 'background' => true,
221 - '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,
222 264 ),
223 265 'typography' => array(
224 - 'fontSize' => true,
266 + 'fontSize' => true,
267 + 'lineHeight' => true,
225 268 ),
226 269 'spacing' => array(
227 - 'padding' => array(
228 - 'horizontal',
229 - 'vertical',
230 - ),
270 + 'margin' => true,
271 + 'padding' => true,
231 272 ),
232 273 );
233 274
234 275 }
@@ -241,13 +282,8 @@
241 282 * @return bool|array
242 283 */
243 284 public function get_fields() {
244 285
245 - // Bail if the request is not for the WordPress Administration or frontend editor.
246 - if ( ! WP_ConvertKit()->is_admin_or_frontend_editor() ) {
247 - return false;
248 - }
249 -
250 286 // Get ConvertKit Products.
251 287 $products = array();
252 288 $convertkit_products = new ConvertKit_Resource_Products();
253 289 if ( $convertkit_products->exist() ) {
@@ -258,26 +294,42 @@
258 294
259 295 // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included
260 296 // automatically by Gutenberg.
261 297 return array(
262 - 'product' => array(
263 - 'label' => __( 'Product', 'convertkit' ),
264 - 'type' => 'select',
265 - 'values' => $products,
298 + 'product' => array(
299 + 'label' => __( 'Product', 'convertkit' ),
300 + 'type' => 'resource',
301 + 'resource' => 'products',
302 + 'values' => $products,
266 303 ),
267 - 'text' => array(
304 + 'text' => array(
268 305 'label' => __( 'Button Text', 'convertkit' ),
269 306 'type' => 'text',
270 307 'description' => __( 'The text to display for the button.', 'convertkit' ),
271 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 + ),
272 324
273 325 // These fields will only display on the shortcode, and are deliberately not registered in get_attributes(),
274 326 // because Gutenberg will register its own color pickers for link, background and text.
275 - 'background_color' => array(
327 + 'background_color' => array(
276 328 'label' => __( 'Background color', 'convertkit' ),
277 329 'type' => 'color',
278 330 ),
279 - 'text_color' => array(
331 + 'text_color' => array(
280 332 'label' => __( 'Text color', 'convertkit' ),
281 333 'type' => 'color',
282 334 ),
283 335 );
@@ -292,13 +344,8 @@
292 344 * @return bool|array
293 345 */
294 346 public function get_panels() {
295 347
296 - // Bail if the request is not for the WordPress Administration or frontend editor.
297 - if ( ! WP_ConvertKit()->is_admin_or_frontend_editor() ) {
298 - return false;
299 - }
300 -
301 348 // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included
302 349 // automatically by Gutenberg.
303 350 return array(
304 351 'general' => array(
@@ -305,8 +352,11 @@
305 352 'label' => __( 'General', 'convertkit' ),
306 353 'fields' => array(
307 354 'product',
308 355 'text',
356 + 'discount_code',
357 + 'checkout',
358 + 'disable_modal_on_mobile',
309 359 'background_color',
310 360 'text_color',
311 361 ),
312 362 ),
@@ -323,18 +373,21 @@
323 373 */
324 374 public function get_default_values() {
325 375
326 376 return array(
327 - 'product' => '',
328 - 'text' => __( 'Buy my product', 'convertkit' ),
329 - 'background_color' => '',
330 - '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' => '',
331 384
332 385 // Built-in Gutenberg block attributes.
333 - 'backgroundColor' => '',
334 - 'textColor' => '',
335 - 'fontSize' => '',
336 - 'style' => array(
386 + 'backgroundColor' => '',
387 + 'textColor' => '',
388 + 'fontSize' => '',
389 + 'style' => array(
337 390 'visualizers' => array(
338 391 'padding' => array(
339 392 'top' => '',
340 393 'bottom' => '',
@@ -351,10 +404,10 @@
351 404 * Returns the block's output, based on the supplied configuration attributes.
352 405 *
353 406 * @since 1.9.8.5
354 407 *
355 - * @param array $atts Block / Shortcode Attributes.
356 - * @return string Output
408 + * @param array $atts Block / Shortcode / Page Builder Module Attributes.
409 + * @return string
357 410 */
358 411 public function render( $atts ) {
359 412
360 413 // Parse attributes, defining fallback defaults if required
@@ -367,11 +420,22 @@
367 420 // Get Products Resource.
368 421 $convertkit_products = new ConvertKit_Resource_Products();
369 422
370 423 // Build HTML.
371 - $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 + );
372 436
373 - // Bail if an error occured.
437 + // Bail if an error occurred.
374 438 if ( is_wp_error( $html ) ) {
375 439 if ( $settings->debug_enabled() ) {
376 440 return '<!-- ' . $html->get_error_message() . ' -->';
377 441 }