← All changes
|
includes/blocks/class-convertkit-block-form-trigger.php
+110
-95
2.2.7
→
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_styles_editor_and_frontend', array( $this, 'enqueue_styles' ) ); |
| 35 | 35 | |
| @@ -35,19 +35,8 @@ | ||
| 35 | 35 | |
| 36 | 36 | } |
| 37 | 37 | |
| 38 | 38 | /** |
| 39 | - * Enqueues scripts for this Gutenberg Block in the editor view. | |
| 40 | - * | |
| 41 | - * @since 2.2.0 | |
| 42 | - */ | |
| 43 | - public function enqueue_scripts_editor() { | |
| 44 | - | |
| 45 | - wp_enqueue_script( 'convertkit-gutenberg-block-form-trigger', CONVERTKIT_PLUGIN_URL . 'resources/backend/js/gutenberg-block-form-trigger.js', array( 'convertkit-gutenberg' ), CONVERTKIT_PLUGIN_VERSION, true ); | |
| 46 | - | |
| 47 | - } | |
| 48 | - | |
| 49 | - /** | |
| 50 | 39 | * Enqueues styles for this Gutenberg Block in the editor and frontend views. |
| 51 | 40 | * |
| 52 | 41 | * @since 2.2.0 |
| 53 | 42 | */ |
| @@ -52,10 +41,13 @@ | ||
| 52 | 41 | * @since 2.2.0 |
| 53 | 42 | */ |
| 54 | 43 | public function enqueue_styles() { |
| 55 | 44 | |
| 56 | - wp_enqueue_style( 'convertkit-button', CONVERTKIT_PLUGIN_URL . 'resources/frontend/css/button.css', array(), CONVERTKIT_PLUGIN_VERSION ); | |
| 45 | + convertkit_enqueue_frontend_css(); | |
| 57 | 46 | |
| 47 | + // Enqueue the block button CSS. | |
| 48 | + wp_enqueue_style( 'wp-block-button' ); | |
| 49 | + | |
| 58 | 50 | } |
| 59 | 51 | |
| 60 | 52 | /** |
| 61 | 53 | * Returns this block's programmatic name, excluding the convertkit- prefix. |
| @@ -66,8 +58,9 @@ | ||
| 66 | 58 | |
| 67 | 59 | /** |
| 68 | 60 | * This will register as: |
| 69 | 61 | * - a shortcode, with the name [convertkit_formtrigger]. |
| 62 | + * - a shortcode, with the name [kit_formtrigger]. | |
| 70 | 63 | * - a Gutenberg block, with the name convertkit/formtrigger. |
| 71 | 64 | */ |
| 72 | 65 | return 'formtrigger'; |
| 73 | 66 | |
| @@ -73,8 +66,43 @@ | ||
| 73 | 66 | |
| 74 | 67 | } |
| 75 | 68 | |
| 76 | 69 | /** |
| 70 | + * Returns this block's title. | |
| 71 | + * | |
| 72 | + * @since 3.1.1 | |
| 73 | + */ | |
| 74 | + public function get_title() { | |
| 75 | + | |
| 76 | + return __( 'Kit Form Trigger', 'convertkit' ); | |
| 77 | + | |
| 78 | + } | |
| 79 | + | |
| 80 | + /** | |
| 81 | + * Returns this block's plural title. | |
| 82 | + * | |
| 83 | + * @since 3.4.0 | |
| 84 | + * | |
| 85 | + * @return string | |
| 86 | + */ | |
| 87 | + public function get_title_plural() { | |
| 88 | + | |
| 89 | + return __( 'Kit Form Triggers', 'convertkit' ); | |
| 90 | + | |
| 91 | + } | |
| 92 | + | |
| 93 | + /** | |
| 94 | + * Returns this block's icon. | |
| 95 | + * | |
| 96 | + * @since 3.1.1 | |
| 97 | + */ | |
| 98 | + public function get_icon() { | |
| 99 | + | |
| 100 | + return 'resources/backend/images/block-icon-formtrigger.svg'; | |
| 101 | + | |
| 102 | + } | |
| 103 | + | |
| 104 | + /** | |
| 77 | 105 | * Returns this block's Title, Icon, Categories, Keywords and properties. |
| 78 | 106 | * |
| 79 | 107 | * @since 2.2.0 |
| 80 | 108 | */ |
| @@ -83,56 +111,59 @@ | ||
| 83 | 111 | $convertkit_forms = new ConvertKit_Resource_Forms( 'block_edit' ); |
| 84 | 112 | $settings = new ConvertKit_Settings(); |
| 85 | 113 | |
| 86 | 114 | return array( |
| 87 | - 'title' => __( 'ConvertKit Form Trigger', 'convertkit' ), | |
| 88 | - 'description' => __( 'Displays a modal, sticky bar or slide in form to display when the button is pressed.', 'convertkit' ), | |
| 89 | - 'icon' => 'resources/backend/images/block-icon-formtrigger.svg', | |
| 90 | - 'category' => 'convertkit', | |
| 91 | - 'keywords' => array( | |
| 115 | + 'title' => $this->get_title(), | |
| 116 | + 'description' => __( 'Displays a modal, sticky bar or slide in form to display when the button is pressed.', 'convertkit' ), | |
| 117 | + 'icon' => $this->get_icon(), | |
| 118 | + 'category' => 'convertkit', | |
| 119 | + 'keywords' => array( | |
| 92 | 120 | __( 'ConvertKit', 'convertkit' ), |
| 121 | + __( 'Kit', 'convertkit' ), | |
| 93 | 122 | __( 'Form', 'convertkit' ), |
| 94 | 123 | ), |
| 95 | 124 | |
| 96 | 125 | // Function to call when rendering as a block or a shortcode on the frontend web site. |
| 97 | - 'render_callback' => array( $this, 'render' ), | |
| 126 | + 'render_callback' => array( $this, 'render' ), | |
| 98 | 127 | |
| 99 | 128 | // Shortcode: TinyMCE / QuickTags Modal Width and Height. |
| 100 | - 'modal' => array( | |
| 129 | + 'modal' => array( | |
| 101 | 130 | 'width' => 500, |
| 102 | - 'height' => 352, | |
| 131 | + 'height' => 282, | |
| 103 | 132 | ), |
| 104 | 133 | |
| 105 | 134 | // Shortcode: Include a closing [/shortcode] tag when using TinyMCE or QuickTag Modals. |
| 106 | - 'shortcode_include_closing_tag' => false, | |
| 135 | + 'shortcode_include_closing_tag' => false, | |
| 107 | 136 | |
| 108 | 137 | // Gutenberg: Block Icon in Editor. |
| 109 | - 'gutenberg_icon' => convertkit_get_file_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-formtrigger.svg' ), | |
| 138 | + 'gutenberg_icon' => convertkit_get_file_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-formtrigger.svg' ), | |
| 110 | 139 | |
| 111 | 140 | // Gutenberg: Example image showing how this block looks when choosing it in Gutenberg. |
| 112 | - 'gutenberg_example_image' => CONVERTKIT_PLUGIN_URL . 'resources/backend/images/block-example-formtrigger.png', | |
| 141 | + 'gutenberg_example_image' => CONVERTKIT_PLUGIN_URL . 'resources/backend/images/block-example-formtrigger.png', | |
| 113 | 142 | |
| 114 | 143 | // Help descriptions, displayed when no API key / resources exist and this block/shortcode is added. |
| 115 | - 'no_api_key' => array( | |
| 116 | - 'notice' => __( 'No API Key specified.', 'convertkit' ), | |
| 117 | - 'link' => convertkit_get_setup_wizard_plugin_link(), | |
| 118 | - 'link_text' => __( 'Click here to add your API Key.', 'convertkit' ), | |
| 144 | + 'no_access_token' => array( | |
| 145 | + 'notice' => __( 'Not connected to Kit.', 'convertkit' ), | |
| 146 | + 'link' => convertkit_get_setup_wizard_plugin_link(), | |
| 147 | + 'link_text' => __( 'Click here to connect your Kit account.', 'convertkit' ), | |
| 148 | + 'instruction_text' => __( 'Connect your Kit account at Settings > Kit, and then refresh this page to select a form.', 'convertkit' ), | |
| 119 | 149 | ), |
| 120 | - 'no_resources' => array( | |
| 121 | - 'notice' => __( 'No modal, sticky bar or slide in forms exist in ConvertKit.', 'convertkit' ), | |
| 122 | - 'link' => convertkit_get_new_form_url(), | |
| 123 | - 'link_text' => __( 'Click here to create a form.', 'convertkit' ), | |
| 150 | + 'no_resources' => array( | |
| 151 | + 'notice' => __( 'No modal, sticky bar or slide in forms exist in Kit.', 'convertkit' ), | |
| 152 | + 'link' => convertkit_get_new_form_url(), | |
| 153 | + 'link_text' => __( 'Click here to create a form.', 'convertkit' ), | |
| 154 | + 'instruction_text' => __( 'Add a non-inline form to your Kit account, and then refresh this page to select a form.', 'convertkit' ), | |
| 124 | 155 | ), |
| 125 | - 'gutenberg_help_description' => __( 'Select a Form using the Form option in the Gutenberg sidebar.', 'convertkit' ), | |
| 126 | 156 | |
| 127 | - // Gutenberg: JS function to call when rendering the block preview in the Gutenberg editor. | |
| 128 | - // If not defined, render_callback above will be used. | |
| 129 | - 'gutenberg_preview_render_callback' => 'convertKitGutenbergFormTriggerBlockRenderPreview', | |
| 157 | + // The attribute to check if a value exists when rendering the block in the editor, | |
| 158 | + // and the message to display if no value exists. | |
| 159 | + 'gutenberg_help_description' => __( 'Select a Form using the Form option in the Gutenberg sidebar.', 'convertkit' ), | |
| 160 | + 'gutenberg_help_description_attribute' => 'form', | |
| 130 | 161 | |
| 131 | 162 | // Whether an API Key exists in the Plugin, and are the required resources (non-inline forms) available. |
| 132 | 163 | // If no API Key is specified in the Plugin's settings, render the "No API Key" output. |
| 133 | - 'has_api_key' => $settings->has_api_key_and_secret(), | |
| 134 | - 'has_resources' => $convertkit_forms->non_inline_exist(), | |
| 164 | + 'has_access_token' => $settings->has_access_and_refresh_token(), | |
| 165 | + 'has_resources' => $convertkit_forms->non_inline_exist(), | |
| 135 | 166 | ); |
| 136 | 167 | |
| 137 | 168 | } |
| 138 | 169 | |
| @@ -155,9 +186,12 @@ | ||
| 155 | 186 | ), |
| 156 | 187 | |
| 157 | 188 | // The below are built in Gutenberg attributes registered in get_supports(). |
| 158 | 189 | |
| 159 | - // Color. | |
| 190 | + // get_supports() style, color and typography attributes. | |
| 191 | + 'style' => array( | |
| 192 | + 'type' => 'object', | |
| 193 | + ), | |
| 160 | 194 | 'backgroundColor' => array( |
| 161 | 195 | 'type' => 'string', |
| 162 | 196 | ), |
| 163 | 197 | 'textColor' => array( |
| @@ -162,37 +196,12 @@ | ||
| 162 | 196 | ), |
| 163 | 197 | 'textColor' => array( |
| 164 | 198 | 'type' => 'string', |
| 165 | 199 | ), |
| 166 | - | |
| 167 | - // Typography. | |
| 168 | 200 | 'fontSize' => array( |
| 169 | 201 | 'type' => 'string', |
| 170 | 202 | ), |
| 171 | 203 | |
| 172 | - // Spacing/Dimensions > Padding. | |
| 173 | - 'style' => array( | |
| 174 | - 'type' => 'object', | |
| 175 | - 'visualizers' => array( | |
| 176 | - 'type' => 'object', | |
| 177 | - 'padding' => array( | |
| 178 | - 'type' => 'object', | |
| 179 | - 'top' => array( | |
| 180 | - 'type' => 'boolean', | |
| 181 | - ), | |
| 182 | - 'bottom' => array( | |
| 183 | - 'type' => 'boolean', | |
| 184 | - ), | |
| 185 | - 'left' => array( | |
| 186 | - 'type' => 'boolean', | |
| 187 | - ), | |
| 188 | - 'right' => array( | |
| 189 | - 'type' => 'boolean', | |
| 190 | - ), | |
| 191 | - ), | |
| 192 | - ), | |
| 193 | - ), | |
| 194 | - | |
| 195 | 204 | // Always required for Gutenberg. |
| 196 | 205 | 'is_gutenberg_example' => array( |
| 197 | 206 | 'type' => 'boolean', |
| 198 | 207 | 'default' => false, |
| @@ -212,19 +221,23 @@ | ||
| 212 | 221 | |
| 213 | 222 | return array( |
| 214 | 223 | 'className' => true, |
| 215 | 224 | 'color' => array( |
| 216 | - 'background' => true, | |
| 217 | - 'text' => true, | |
| 225 | + 'background' => true, | |
| 226 | + 'text' => true, | |
| 227 | + | |
| 228 | + // Don't apply styles to the block editor's div element. | |
| 229 | + // This ensures what's rendered in the Gutenberg editor matches the frontend output for styling. | |
| 230 | + // See: https://github.com/WordPress/gutenberg/issues/32417. | |
| 231 | + '__experimentalSkipSerialization' => true, | |
| 218 | 232 | ), |
| 219 | 233 | 'typography' => array( |
| 220 | - 'fontSize' => true, | |
| 234 | + 'fontSize' => true, | |
| 235 | + 'lineHeight' => true, | |
| 221 | 236 | ), |
| 222 | 237 | 'spacing' => array( |
| 223 | - 'padding' => array( | |
| 224 | - 'horizontal', | |
| 225 | - 'vertical', | |
| 226 | - ), | |
| 238 | + 'margin' => true, | |
| 239 | + 'padding' => true, | |
| 227 | 240 | ), |
| 228 | 241 | ); |
| 229 | 242 | |
| 230 | 243 | } |
| @@ -237,19 +250,19 @@ | ||
| 237 | 250 | * @return bool|array |
| 238 | 251 | */ |
| 239 | 252 | public function get_fields() { |
| 240 | 253 | |
| 241 | - // Bail if the request is not for the WordPress Administration or frontend editor. | |
| 242 | - if ( ! WP_ConvertKit()->is_admin_or_frontend_editor() ) { | |
| 243 | - return false; | |
| 244 | - } | |
| 245 | - | |
| 246 | 254 | // Get non-inline ConvertKit Forms. |
| 247 | 255 | $forms = array(); |
| 248 | 256 | $convertkit_forms = new ConvertKit_Resource_Forms( 'block_edit' ); |
| 249 | 257 | if ( $convertkit_forms->non_inline_exist() ) { |
| 250 | 258 | foreach ( $convertkit_forms->get_non_inline() as $form ) { |
| 251 | - $forms[ absint( $form['id'] ) ] = sanitize_text_field( $form['name'] ); | |
| 259 | + // Legacy forms don't include a `format` key, so define them as inline. | |
| 260 | + $forms[ absint( $form['id'] ) ] = sprintf( | |
| 261 | + '%s [%s]', | |
| 262 | + sanitize_text_field( $form['name'] ), | |
| 263 | + ( ! empty( $form['format'] ) ? sanitize_text_field( $form['format'] ) : 'inline' ) | |
| 264 | + ); | |
| 252 | 265 | } |
| 253 | 266 | } |
| 254 | 267 | |
| 255 | 268 | // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included |
| @@ -256,11 +269,12 @@ | ||
| 256 | 269 | // automatically by Gutenberg. |
| 257 | 270 | return array( |
| 258 | 271 | 'form' => array( |
| 259 | 272 | 'label' => __( 'Form', 'convertkit' ), |
| 260 | - 'type' => 'select', | |
| 273 | + 'type' => 'resource', | |
| 274 | + 'resource' => 'forms', | |
| 261 | 275 | 'values' => $forms, |
| 262 | - 'description' => __( 'The modal, sticky bar or slide in form to display when the button is pressed. To embed a form, use the ConvertKit Form block instead.', 'convertkit' ), | |
| 276 | + 'description' => __( 'The modal, sticky bar or slide in form to display when the button is pressed. To embed a form, use the Kit Form block instead.', 'convertkit' ), | |
| 263 | 277 | ), |
| 264 | 278 | 'text' => array( |
| 265 | 279 | 'label' => __( 'Button Text', 'convertkit' ), |
| 266 | 280 | 'type' => 'text', |
| @@ -289,13 +303,8 @@ | ||
| 289 | 303 | * @return bool|array |
| 290 | 304 | */ |
| 291 | 305 | public function get_panels() { |
| 292 | 306 | |
| 293 | - // Bail if the request is not for the WordPress Administration or frontend editor. | |
| 294 | - if ( ! WP_ConvertKit()->is_admin_or_frontend_editor() ) { | |
| 295 | - return false; | |
| 296 | - } | |
| 297 | - | |
| 298 | 307 | // Gutenberg's built-in fields (such as styling, padding etc) don't need to be defined here, as they'll be included |
| 299 | 308 | // automatically by Gutenberg. |
| 300 | 309 | return array( |
| 301 | 310 | 'general' => array( |
| @@ -348,10 +357,10 @@ | ||
| 348 | 357 | * Returns the block's output, based on the supplied configuration attributes. |
| 349 | 358 | * |
| 350 | 359 | * @since 2.2.0 |
| 351 | 360 | * |
| 352 | - * @param array $atts Block / Shortcode Attributes. | |
| 353 | - * @return string Output | |
| 361 | + * @param array $atts Block / Shortcode / Page Builder Module Attributes. | |
| 362 | + * @return string | |
| 354 | 363 | */ |
| 355 | 364 | public function render( $atts ) { |
| 356 | 365 | |
| 357 | 366 | // Parse attributes, defining fallback defaults if required |
| @@ -361,11 +370,17 @@ | ||
| 361 | 370 | // Setup Settings class. |
| 362 | 371 | $settings = new ConvertKit_Settings(); |
| 363 | 372 | |
| 364 | 373 | // Build HTML. |
| 365 | - $html = $this->get_html( $atts['form'], $atts['text'], $atts['_css_classes'], $atts['_css_styles'], $this->is_block_editor_request() ); | |
| 374 | + $html = $this->get_html( | |
| 375 | + $atts['form'], | |
| 376 | + $atts['text'], | |
| 377 | + $this->get_css_classes( array( 'wp-block-button__link', 'wp-element-button' ) ), | |
| 378 | + $this->get_css_styles( $atts ), | |
| 379 | + $this->is_block_editor_request() | |
| 380 | + ); | |
| 366 | 381 | |
| 367 | - // Bail if an error occured. | |
| 382 | + // Bail if an error occurred. | |
| 368 | 383 | if ( is_wp_error( $html ) ) { |
| 369 | 384 | if ( $settings->debug_enabled() ) { |
| 370 | 385 | return '<!-- ' . $html->get_error_message() . ' -->'; |
| 371 | 386 | } |
| @@ -394,9 +409,9 @@ | ||
| 394 | 409 | * |
| 395 | 410 | * @param int $id Form ID. |
| 396 | 411 | * @param string $button_text Button Text. |
| 397 | 412 | * @param array $css_classes CSS classes to apply to link (typically included when using Gutenberg). |
| 398 | - * @param array $css_styles CSS inline styles to apply to link (typically included when using Gutenberg). | |
| 413 | + * @param array $css_styles CSS inline styles to apply to link (typically included when using Shortcode or third party page builder module / widget). | |
| 399 | 414 | * @param bool $return_as_span If true, returns a <span> instead of <a>. Useful for the block editor so that the element is interactible. |
| 400 | 415 | * @return WP_Error|string Button HTML |
| 401 | 416 | */ |
| 402 | 417 | private function get_html( $id, $button_text, $css_classes = array(), $css_styles = array(), $return_as_span = false ) { |
| @@ -415,9 +430,9 @@ | ||
| 415 | 430 | return new WP_Error( |
| 416 | 431 | 'convertkit_block_form_trigger_get_html', |
| 417 | 432 | sprintf( |
| 418 | 433 | /* translators: ConvertKit Form ID */ |
| 419 | - __( 'ConvertKit Form ID %s does not exist on ConvertKit.', 'convertkit' ), | |
| 434 | + __( 'Kit Form ID %s does not exist on Kit.', 'convertkit' ), | |
| 420 | 435 | $id |
| 421 | 436 | ) |
| 422 | 437 | ); |
| 423 | 438 | } |
| @@ -427,9 +442,9 @@ | ||
| 427 | 442 | return new WP_Error( |
| 428 | 443 | 'convertkit_block_form_trigger_get_html', |
| 429 | 444 | sprintf( |
| 430 | 445 | /* translators: ConvertKit Form ID */ |
| 431 | - __( 'ConvertKit Form ID %s has no uid property.', 'convertkit' ), | |
| 446 | + __( 'Kit Form ID %s has no uid property.', 'convertkit' ), | |
| 432 | 447 | $id |
| 433 | 448 | ) |
| 434 | 449 | ); |
| 435 | 450 | } |
| @@ -437,9 +452,9 @@ | ||
| 437 | 452 | return new WP_Error( |
| 438 | 453 | 'convertkit_block_form_trigger_get_html', |
| 439 | 454 | sprintf( |
| 440 | 455 | /* translators: ConvertKit Form ID */ |
| 441 | - __( 'ConvertKit Form ID %s has no embed_js property.', 'convertkit' ), | |
| 456 | + __( 'Kit Form ID %s has no embed_js property.', 'convertkit' ), | |
| 442 | 457 | $id |
| 443 | 458 | ) |
| 444 | 459 | ); |
| 445 | 460 | } |
| @@ -452,9 +467,9 @@ | ||
| 452 | 467 | } else { |
| 453 | 468 | $html .= '<a data-formkit-toggle="' . esc_attr( $form['uid'] ) . '" href="' . esc_url( $form['embed_url'] ) . '"'; |
| 454 | 469 | } |
| 455 | 470 | |
| 456 | - $html .= ' class="wp-block-button__link ' . implode( ' ', map_deep( $css_classes, 'sanitize_html_class' ) ) . '" style="' . implode( ';', map_deep( $css_styles, 'esc_attr' ) ) . '">'; | |
| 471 | + $html .= ' class="' . implode( ' ', map_deep( $css_classes, 'sanitize_html_class' ) ) . '" style="' . implode( ';', map_deep( $css_styles, 'esc_attr' ) ) . '">'; | |
| 457 | 472 | $html .= esc_html( $button_text ); |
| 458 | 473 | |
| 459 | 474 | if ( $return_as_span ) { |
| 460 | 475 | $html .= '</span>'; |
| @@ -466,9 +481,9 @@ | ||
| 466 | 481 | |
| 467 | 482 | // Register the script, so it's only loaded once for this non-inline form across the entire page. |
| 468 | 483 | add_filter( |
| 469 | 484 | 'convertkit_output_scripts_footer', |
| 470 | - function( $scripts ) use ( $form ) { | |
| 485 | + function ( $scripts ) use ( $form ) { | |
| 471 | 486 | |
| 472 | 487 | $scripts[] = array( |
| 473 | 488 | 'async' => true, |
| 474 | 489 | 'data-uid' => $form['uid'], |