From 73f48177412f1feb960700bda054d83d88de4089 Mon Sep 17 00:00:00 2001 From: Kev Date: Thu, 4 Apr 2024 01:31:59 -0400 Subject: [PATCH] Blocks: upgrade to API version 3 - Part 1 (#36701) * Bump Blog Stats block API version * Bump Premium Content Button API version * Bump Recurring Payments block API version * Bump Send A Message block API version * Bump Word Ads block API version * changelog * Fix tests * Fix tests * Update snapshot --- .../changelog/update-bump-block-api-version | 4 ++ .../extensions/blocks/blog-stats/block.json | 2 +- .../extensions/blocks/blog-stats/edit.js | 7 +-- .../extensions/blocks/blog-stats/test/edit.js | 5 ++ .../blocks/premium-content/buttons/index.js | 2 +- .../blocks/recurring-payments/block.json | 2 +- .../blocks/send-a-message/block.json | 2 +- .../extensions/blocks/send-a-message/edit.js | 7 +-- .../extensions/blocks/send-a-message/save.js | 8 +-- .../extensions/blocks/wordads/block.json | 2 +- .../jetpack/extensions/blocks/wordads/edit.js | 54 ++++++++++--------- .../wordads/test/__snapshots__/edit.js.snap | 22 ++++++++ .../extensions/blocks/wordads/test/edit.js | 12 ++--- 13 files changed, 83 insertions(+), 46 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-bump-block-api-version create mode 100644 projects/plugins/jetpack/extensions/blocks/wordads/test/__snapshots__/edit.js.snap diff --git a/projects/plugins/jetpack/changelog/update-bump-block-api-version b/projects/plugins/jetpack/changelog/update-bump-block-api-version new file mode 100644 index 0000000000000..9cf68189e96d8 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-bump-block-api-version @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Update blocks to use API version 3 diff --git a/projects/plugins/jetpack/extensions/blocks/blog-stats/block.json b/projects/plugins/jetpack/extensions/blocks/blog-stats/block.json index 7a49113967e81..e9d860a0d070e 100644 --- a/projects/plugins/jetpack/extensions/blocks/blog-stats/block.json +++ b/projects/plugins/jetpack/extensions/blocks/blog-stats/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 3, "name": "jetpack/blog-stats", "title": "Blog Stats", "description": "Show a stats counter for your blog.", diff --git a/projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js b/projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js index 789673de74d83..8c4e7dcbf2dfa 100644 --- a/projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/blog-stats/edit.js @@ -1,7 +1,7 @@ import { numberFormat } from '@automattic/jetpack-components'; import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils'; import apiFetch from '@wordpress/api-fetch'; -import { InspectorControls, RichText } from '@wordpress/block-editor'; +import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import { __, _n } from '@wordpress/i18n'; @@ -15,6 +15,7 @@ function BlogStatsEdit( { attributes, className, setAttributes } ) { const [ blogViews, setBlogViews ] = useState( null ); const [ blogVisitors, setBlogVisitors ] = useState(); const [ postViews, setPostViews ] = useState(); + const blockProps = useBlockProps(); const blogStats = statsData === 'views' ? blogViews : blogVisitors; const stats = statsOption === 'post' ? postViews : blogStats; @@ -64,7 +65,7 @@ function BlogStatsEdit( { attributes, className, setAttributes } ) { _n( 'hit', 'hits', parseInt( stats ), 'jetpack', 0 ); return ( - <> +
@@ -85,7 +86,7 @@ function BlogStatsEdit( { attributes, className, setAttributes } ) {

) }
- + ); } diff --git a/projects/plugins/jetpack/extensions/blocks/blog-stats/test/edit.js b/projects/plugins/jetpack/extensions/blocks/blog-stats/test/edit.js index 6ac0df62dff8f..642174b960441 100644 --- a/projects/plugins/jetpack/extensions/blocks/blog-stats/test/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/blog-stats/test/edit.js @@ -15,6 +15,11 @@ useSelect.mockImplementation( () => { }; } ); +jest.mock( '@wordpress/block-editor', () => ( { + ...jest.requireActual( '@wordpress/block-editor' ), + useBlockProps: jest.fn(), +} ) ); + const defaultAttributes = { label: '', statsOption: 'site', diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/index.js b/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/index.js index aea3154473d49..d465487df4a75 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/index.js +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/buttons/index.js @@ -6,7 +6,7 @@ import save from './save'; const name = 'premium-content/buttons'; const settings = { - apiVersion: 2, + apiVersion: 3, title: __( 'Premium Content buttons', 'jetpack' ), description: __( 'Prompt Premium Content visitors to take action with a group of button-style links.', diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json b/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json index 78dd93ab67831..e9bbf5895617a 100644 --- a/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json +++ b/projects/plugins/jetpack/extensions/blocks/recurring-payments/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "jetpack/recurring-payments", "title": "Payment Button", "description": "Button allowing you to sell products and subscriptions.", diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/block.json b/projects/plugins/jetpack/extensions/blocks/send-a-message/block.json index 1dc6f1ae77d55..b4c431d458323 100644 --- a/projects/plugins/jetpack/extensions/blocks/send-a-message/block.json +++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 3, "name": "jetpack/send-a-message", "title": "Send A Message", "description": "Let your visitors send you messages with the tap of a button.", diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js index c223422be97c8..ce91abac0b155 100644 --- a/projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/edit.js @@ -1,13 +1,14 @@ -import { InnerBlocks } from '@wordpress/block-editor'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -export default function SendAMessageEdit( { className } ) { +export default function SendAMessageEdit() { + const blockProps = useBlockProps(); // Default template is single WhatsApp block until we offer // more services const DEFAULT_TEMPLATE = [ [ 'jetpack/whatsapp-button', {} ] ]; const ALLOWED_BLOCKS = [ 'jetpack/whatsapp-button' ]; return ( -
+
); diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/save.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/save.js index 5a70add9166d8..c18a4ced057a8 100644 --- a/projects/plugins/jetpack/extensions/blocks/send-a-message/save.js +++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/save.js @@ -1,8 +1,10 @@ -import { InnerBlocks } from '@wordpress/block-editor'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +export default () => { + const blockProps = useBlockProps.save(); -export default props => { return ( -
+
); diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/block.json b/projects/plugins/jetpack/extensions/blocks/wordads/block.json index 5a8533f7696e7..e1064977b5426 100644 --- a/projects/plugins/jetpack/extensions/blocks/wordads/block.json +++ b/projects/plugins/jetpack/extensions/blocks/wordads/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 1, + "apiVersion": 3, "name": "jetpack/wordads", "title": "Ad", "description": "Earn income by adding high quality ads to your post.", diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/edit.js b/projects/plugins/jetpack/extensions/blocks/wordads/edit.js index 0f0acf15b49dd..e576c605cf6f3 100644 --- a/projects/plugins/jetpack/extensions/blocks/wordads/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/wordads/edit.js @@ -1,5 +1,6 @@ import { ThemeProvider } from '@automattic/jetpack-components'; import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils'; +import { useBlockProps } from '@wordpress/block-editor'; import { WordAdsPlaceholder } from './components/jetpack-wordads-placeholder'; import { WordAdsSkeletonLoader } from './components/jetpack-wordads-skeleton-loader'; import { AD_FORMATS } from './constants'; @@ -12,6 +13,7 @@ import leaderboardExample from './example_728x90.png'; import './editor.scss'; const WordAdsEdit = ( { attributes, setAttributes } ) => { + const blockProps = useBlockProps(); const { format } = attributes; const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = useModuleStatus( 'wordads' ); @@ -30,40 +32,44 @@ const WordAdsEdit = ( { attributes, setAttributes } ) => { } }; + let content; + if ( ! isModuleActive ) { if ( isLoadingModules ) { - return ( + content = ( ); + } else { + content = ( + + ); } - - return ( - + } else { + content = ( + <> + +
+
+
+ ); } - return ( - <> - -
-
-
- - ); + return
{ content }
; }; export default WordAdsEdit; diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/test/__snapshots__/edit.js.snap b/projects/plugins/jetpack/extensions/blocks/wordads/test/__snapshots__/edit.js.snap new file mode 100644 index 0000000000000..a6aabd7babf71 --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/wordads/test/__snapshots__/edit.js.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WordAdsEdit matches snapshot: WordAdsEdit 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/test/edit.js b/projects/plugins/jetpack/extensions/blocks/wordads/test/edit.js index 4f707cc27ee37..82c215f7c0adf 100644 --- a/projects/plugins/jetpack/extensions/blocks/wordads/test/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/wordads/test/edit.js @@ -30,8 +30,8 @@ describe( 'WordAdsEdit', () => { const renderWordAdsEdit = props => { const { container } = render( ); - // eslint-disable-next-line testing-library/no-node-access - return container.firstChild.firstChild; + // eslint-disable-next-line testing-library/no-node-access,testing-library/no-container + return container.querySelector( '.jetpack-wordads__ad' ); }; // Renders the component, extracting the inner placeholder element and finding @@ -47,13 +47,10 @@ describe( 'WordAdsEdit', () => { return { placeholder, selectedFormat }; }; - test( 'renders wrapper with correct css class', () => { + test( 'matches snapshot', () => { const { container } = render( ); - // eslint-disable-next-line testing-library/no-node-access - expect( container.firstChild ).toHaveClass( 'wp-block-jetpack-wordads' ); - // eslint-disable-next-line testing-library/no-node-access - expect( container.firstChild ).toHaveClass( `jetpack-wordads-${ defaultAttributes.format }` ); + expect( container ).toMatchSnapshot( 'WordAdsEdit' ); } ); test( 'renders ad placeholder with correct css class and styles', () => { @@ -61,7 +58,6 @@ describe( 'WordAdsEdit', () => { const placeholder = renderWordAdsEdit( defaultProps ); const selectedFormat = getFormat( defaultAttributes.format ); - expect( placeholder ).toHaveClass( 'jetpack-wordads__ad' ); expect( placeholder ).toHaveStyle( `width: ${ selectedFormat.width }px` ); expect( placeholder ).toHaveStyle( `height: ${ selectedFormat.height }px` ); expect( placeholder ).toHaveStyle( `backgroundImage: url( ${ rectangleExample } )` );