diff --git a/.github/workflows/coding-standards.yml b/.github/workflows/coding-standards.yml index 6ad649ac5..0f0d065f5 100644 --- a/.github/workflows/coding-standards.yml +++ b/.github/workflows/coding-standards.yml @@ -116,12 +116,12 @@ jobs: working-directory: ${{ env.PLUGIN_DIR }} run: composer dump-autoload - # Run PSR-12 Coding Standards on Tests. - - name: Run PSR-12 Coding Standards on Tests + # Run Coding Standards on Tests. + - name: Run Coding Standards on Tests working-directory: ${{ env.PLUGIN_DIR }} run: php vendor/bin/phpcs ./tests --standard=phpcs.tests.xml -v -s - # Run WordPress Coding Standards. + # Run WordPress Coding Standards on Plugin. - name: Run WordPress Coding Standards working-directory: ${{ env.PLUGIN_DIR }} run: php vendor/bin/phpcs ./ --standard=phpcs.xml -v -s diff --git a/includes/blocks/class-convertkit-block-broadcasts.php b/includes/blocks/class-convertkit-block-broadcasts.php index ff9faaa5c..3f930af8a 100644 --- a/includes/blocks/class-convertkit-block-broadcasts.php +++ b/includes/blocks/class-convertkit-block-broadcasts.php @@ -27,6 +27,9 @@ public function __construct() { // Register this as a Gutenberg block in the ConvertKit Plugin. add_filter( 'convertkit_blocks', array( $this, 'register' ) ); + // Enqueue scripts and styles for this Gutenberg Block in the editor view. + add_action( 'convertkit_gutenberg_enqueue_scripts', array( $this, 'enqueue_scripts_editor' ) ); + // Enqueue scripts and styles for this Gutenberg Block in the editor and frontend views. add_action( 'convertkit_gutenberg_enqueue_scripts_editor_and_frontend', array( $this, 'enqueue_scripts' ) ); add_action( 'convertkit_gutenberg_enqueue_styles_editor_and_frontend', array( $this, 'enqueue_styles' ) ); @@ -40,6 +43,17 @@ public function __construct() { /** * Enqueues scripts for this Gutenberg Block in the editor view. * + * @since 2.0.1 + */ + public function enqueue_scripts_editor() { + + wp_enqueue_script( 'convertkit-gutenberg-block-broadcasts', CONVERTKIT_PLUGIN_URL . 'resources/backend/js/gutenberg-block-broadcasts.js', array( 'convertkit-gutenberg' ), CONVERTKIT_PLUGIN_VERSION, true ); + + } + + /** + * Enqueues scripts for this Gutenberg Block in the editor and frontend views. + * * @since 1.9.7.6 */ public function enqueue_scripts() { @@ -98,37 +112,47 @@ public function get_name() { */ public function get_overview() { + // Fetch Posts. + $posts = new ConvertKit_Resource_Posts( 'output_broadcasts' ); + return array( - 'title' => __( 'ConvertKit Broadcasts', 'convertkit' ), - 'description' => __( 'Displays a list of your ConvertKit broadcasts.', 'convertkit' ), - 'icon' => 'resources/backend/images/block-icon-broadcasts.png', - 'category' => 'convertkit', - 'keywords' => array( + 'title' => __( 'ConvertKit Broadcasts', 'convertkit' ), + 'description' => __( 'Displays a list of your ConvertKit broadcasts.', 'convertkit' ), + 'icon' => 'resources/backend/images/block-icon-broadcasts.png', + 'category' => 'convertkit', + 'keywords' => array( __( 'ConvertKit', 'convertkit' ), __( 'Broadcasts', 'convertkit' ), __( 'Posts', 'convertkit' ), ), // Function to call when rendering as a block or a shortcode on the frontend web site. - 'render_callback' => array( $this, 'render' ), + 'render_callback' => array( $this, 'render' ), // Shortcode: TinyMCE / QuickTags Modal Width and Height. - 'modal' => array( + 'modal' => array( 'width' => 500, 'height' => 580, ), // Shortcode: Include a closing [/shortcode] tag when using TinyMCE or QuickTag Modals. - 'shortcode_include_closing_tag' => false, + 'shortcode_include_closing_tag' => false, // Gutenberg: Block Icon in Editor. - 'gutenberg_icon' => file_get_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-broadcasts.svg' ), /* phpcs:ignore */ + 'gutenberg_icon' => file_get_contents( CONVERTKIT_PLUGIN_PATH . '/resources/backend/images/block-icon-broadcasts.svg' ), /* phpcs:ignore */ // Gutenberg: Example image showing how this block looks when choosing it in Gutenberg. - 'gutenberg_example_image' => CONVERTKIT_PLUGIN_URL . 'resources/backend/images/block-example-broadcasts.png', + 'gutenberg_example_image' => CONVERTKIT_PLUGIN_URL . 'resources/backend/images/block-example-broadcasts.png', + + // Gutenberg: Help description, displayed when no Posts exist. + 'gutenberg_help_description' => __( 'No Broadcasts exist in ConvertKit. Send your first Broadcast in ConvertKit to see the link to it here.', 'convertkit' ), + + // Gutenberg: JS function to call when rendering the block preview in the Gutenberg editor. + // If not defined, render_callback above will be used. + 'gutenberg_preview_render_callback' => 'convertKitGutenbergBroadcastsBlockRenderPreview', - // Gutenberg: Help description, displayed when no settings defined for a newly added Block. - 'gutenberg_help_description' => __( 'Define this Block\'s settings in the Gutenberg sidebar to display a list of your broadcasts.', 'convertkit' ), + // Flag to determine if Broadcasts exist. + 'has_posts' => $posts->exist(), ); } diff --git a/readme.txt b/readme.txt index ec30476cf..0b23e3cdd 100755 --- a/readme.txt +++ b/readme.txt @@ -117,6 +117,9 @@ Full Plugin documentation can be found [here](https://help.convertkit.com/en/art == Changelog == +### 2.0.1 2022-10-xx +* Added: Broadcasts: Block: Display message in editor when no Broadcasts exist in ConvertKit + ### 2.0.0 2022-10-24 * Added: ConvertKit Products Block, to output a button linking to a ConvertKit Product or Tip Jar * Added: ConvertKit Products Shortcode, to output a button linking to a ConvertKit Product or Tip Jar diff --git a/resources/backend/js/gutenberg-block-broadcasts.js b/resources/backend/js/gutenberg-block-broadcasts.js new file mode 100644 index 000000000..da0432e28 --- /dev/null +++ b/resources/backend/js/gutenberg-block-broadcasts.js @@ -0,0 +1,41 @@ +/** + * Broadcasts Block specific functions for Gutenberg. + * + * @since 2.0.1 + * + * @package ConvertKit + * @author ConvertKit + */ + +/** + * Custom callback function to render the ConvertKit Broadcasts Block preview in the Gutenberg Editor. + * + * @since 2.0.1 + */ +function convertKitGutenbergBroadcastsBlockRenderPreview( block, props ) { + + // If no Broadcasts exist, return a prompt to tell the editor what to do. + if ( ! block.has_posts ) { + return wp.element.createElement( + 'div', + { + // convertkit-no-content class allows resources/backend/css/gutenberg.css + // to apply styling/branding to the block. + className: 'convertkit-' + block.name + ' convertkit-no-content' + }, + block.gutenberg_help_description + ); + } + + // A Product is specified. + // Use the block's PHP's render() function by calling the ServerSideRender component. + return wp.element.createElement( + wp.components.ServerSideRender, + { + block: 'convertkit/' + block.name, + attributes: props.attributes, + className: 'convertkit-' + block.name, + } + ); + +} diff --git a/tests/acceptance/broadcasts/PageBlockBroadcastsCest.php b/tests/acceptance/broadcasts/PageBlockBroadcastsCest.php index 4c42752b6..d16d1ffc5 100644 --- a/tests/acceptance/broadcasts/PageBlockBroadcastsCest.php +++ b/tests/acceptance/broadcasts/PageBlockBroadcastsCest.php @@ -16,8 +16,40 @@ class PageBlockBroadcastsCest public function _before(AcceptanceTester $I) { $I->activateConvertKitPlugin($I); - $I->setupConvertKitPlugin($I); + } + + /** + * Test the Broadcasts block outputs a message when no Broadcasts exist. + * + * @since 2.0.1 + * + * @param AcceptanceTester $I Tester. + */ + public function testBroadcastsBlockWithNoBroadcasts(AcceptanceTester $I) + { + // Setup Plugin with API keys for ConvertKit Account that has no Broadcasts, and enable debug log. + $I->setupConvertKitPlugin($I, $_ENV['CONVERTKIT_API_KEY_NO_DATA'], $_ENV['CONVERTKIT_API_SECRET_NO_DATA']); $I->enableDebugLog($I); + + // Add a Page using the Gutenberg editor. + $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: No Broadcasts'); + + // Add block to Page. + $I->addGutenbergBlock($I, 'ConvertKit Broadcasts', 'convertkit-broadcasts'); + + // Confirm that the Broadcasts block tells the user that no Broadcasts exist in ConvertKit. + $I->see( + 'No Broadcasts exist in ConvertKit. Send your first Broadcast in ConvertKit to see the link to it here.', + [ + 'css' => '.convertkit-no-content', + ] + ); + + // Publish and view the Page on the frontend site. + $I->publishAndViewGutenbergPage($I); + + // Confirm that no ConvertKit Broadcasts are displayed. + $I->dontSeeElementInDOM('div.convertkit-broadcasts'); } /** @@ -29,6 +61,10 @@ public function _before(AcceptanceTester $I) */ public function testBroadcastsBlockWithDefaultParameters(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Add a Page using the Gutenberg editor. $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: Default Params'); @@ -57,6 +93,10 @@ public function testBroadcastsBlockWithDefaultParameters(AcceptanceTester $I) */ public function testBroadcastsBlockWithDateFormatParameter(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Add a Page using the Gutenberg editor. $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: Date Format Param'); @@ -92,6 +132,10 @@ public function testBroadcastsBlockWithDateFormatParameter(AcceptanceTester $I) */ public function testBroadcastsBlockWithLimitParameter(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Add a Page using the Gutenberg editor. $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: Limit Param'); @@ -124,6 +168,10 @@ public function testBroadcastsBlockWithLimitParameter(AcceptanceTester $I) */ public function testBroadcastsBlockWithBlankLimitParameter(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Add a Page using the Gutenberg editor. $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: Blank Limit Param'); @@ -157,6 +205,10 @@ public function testBroadcastsBlockWithBlankLimitParameter(AcceptanceTester $I) */ public function testBroadcastsBlockWithPaginationEnabled(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Add a Page using the Gutenberg editor. $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: Pagination'); @@ -187,6 +239,10 @@ public function testBroadcastsBlockWithPaginationEnabled(AcceptanceTester $I) */ public function testBroadcastsBlockWithPaginationLabelParameters(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Add a Page using the Gutenberg editor. $I->addGutenbergPage($I, 'page', 'ConvertKit: Page: Broadcasts: Pagination Labels'); @@ -219,6 +275,10 @@ public function testBroadcastsBlockWithPaginationLabelParameters(AcceptanceTeste */ public function testBroadcastsBlockWithThemeColorParameters(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Define colors. $backgroundColor = 'white'; $textColor = 'purple'; @@ -262,6 +322,10 @@ public function testBroadcastsBlockWithThemeColorParameters(AcceptanceTester $I) */ public function testBroadcastsBlockWithHexColorParameters(AcceptanceTester $I) { + // Setup Plugin and enable debug log. + $I->setupConvertKitPlugin($I); + $I->enableDebugLog($I); + // Define colors. $backgroundColor = '#ee1616'; $textColor = '#1212c0';