From 8ce3d46ec0ff67b1c29b7926fd6ab4d8c0d696b4 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 11:34:10 +0800 Subject: [PATCH 1/8] Switch from withDispatch to useDispatch in contact form block --- .../packages/forms/src/blocks/contact-form/edit.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index fff949c91a86..9576c7de7b6a 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -12,6 +12,7 @@ import { useBlockProps, __experimentalBlockVariationPicker as BlockVariationPicker, // eslint-disable-line @wordpress/no-unsafe-wp-apis __experimentalBlockPatternSetup as BlockPatternSetup, // eslint-disable-line @wordpress/no-unsafe-wp-apis + store as blockEditorStore, } from '@wordpress/block-editor'; import { createBlock, registerBlockVariation } from '@wordpress/blocks'; import { @@ -24,7 +25,7 @@ import { Notice, } from '@wordpress/components'; import { compose, withInstanceId } from '@wordpress/compose'; -import { withDispatch, withSelect } from '@wordpress/data'; +import { useDispatch, withSelect } from '@wordpress/data'; import { forwardRef, Fragment, useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; @@ -79,8 +80,6 @@ export const JetpackContactFormEdit = forwardRef( setAttributes, postAuthorEmail, hasInnerBlocks, - replaceInnerBlocks, - selectBlock, clientId, instanceId, className, @@ -102,6 +101,8 @@ export const JetpackContactFormEdit = forwardRef( jetpackCRM, salesforceData, } = attributes; + + const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore ); const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false ); const blockProps = useBlockProps(); @@ -394,10 +395,6 @@ export default compose( [ postAuthorEmail: authorEmail, }; } ), - withDispatch( dispatch => { - const { replaceInnerBlocks, selectBlock } = dispatch( 'core/block-editor' ); - return { replaceInnerBlocks, selectBlock }; - } ), withInstanceId, withThemeProvider, ] )( withStyleVariables( JetpackContactFormEdit ) ); From d092f8f4bdd1ed424c8a0d87e02270d900e4ccaf Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 11:42:12 +0800 Subject: [PATCH 2/8] Switch from withSelect to useSelect in contact form block --- .../forms/src/blocks/contact-form/edit.js | 97 ++++++++----------- 1 file changed, 43 insertions(+), 54 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index 9576c7de7b6a..2ffa2d800cf0 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -12,7 +12,6 @@ import { useBlockProps, __experimentalBlockVariationPicker as BlockVariationPicker, // eslint-disable-line @wordpress/no-unsafe-wp-apis __experimentalBlockPatternSetup as BlockPatternSetup, // eslint-disable-line @wordpress/no-unsafe-wp-apis - store as blockEditorStore, } from '@wordpress/block-editor'; import { createBlock, registerBlockVariation } from '@wordpress/blocks'; import { @@ -25,7 +24,7 @@ import { Notice, } from '@wordpress/components'; import { compose, withInstanceId } from '@wordpress/compose'; -import { useDispatch, withSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { forwardRef, Fragment, useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; @@ -74,23 +73,7 @@ const RESPONSES_PATH = `${ get( getJetpackData(), 'adminUrl', false ) }edit.php? const CUSTOMIZING_FORMS_URL = 'https://jetpack.com/support/jetpack-blocks/contact-form/'; export const JetpackContactFormEdit = forwardRef( - ( - { - attributes, - setAttributes, - postAuthorEmail, - hasInnerBlocks, - clientId, - instanceId, - className, - blockType, - variations, - defaultVariation, - canUserInstallPlugins, - style, - }, - ref - ) => { + ( { name, attributes, setAttributes, clientId, instanceId, className, style }, ref ) => { const { to, subject, @@ -102,7 +85,42 @@ export const JetpackContactFormEdit = forwardRef( salesforceData, } = attributes; - const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore ); + const { replaceInnerBlocks, selectBlock } = useDispatch( 'core/block-editor' ); + const { + blockType, + canUserInstallPlugins, + defaultVariation, + variations, + hasInnerBlocks, + postAuthorEmail, + } = useSelect( + select => { + const { getBlockType, getBlockVariations, getDefaultBlockVariation } = + select( 'core/blocks' ); + const { getBlocks } = select( 'core/block-editor' ); + const { getEditedPostAttribute } = select( 'core/editor' ); + const { getUser, canUser } = select( 'core' ); + const innerBlocks = getBlocks( clientId ); + + const authorId = getEditedPostAttribute( 'author' ); + const authorEmail = authorId && getUser( authorId ) && getUser( authorId ).email; + const submitButton = innerBlocks.find( block => block.name === 'jetpack/button' ); + if ( submitButton && ! submitButton.attributes.lock ) { + const lock = { move: false, remove: true }; + submitButton.attributes.lock = lock; + } + + return { + blockType: getBlockType && getBlockType( name ), + canUserInstallPlugins: canUser( 'create', 'plugins' ), + defaultVariation: getDefaultBlockVariation && getDefaultBlockVariation( name, 'block' ), + variations: getBlockVariations && getBlockVariations( name, 'block' ), + hasInnerBlocks: innerBlocks.length > 0, + postAuthorEmail: authorEmail, + }; + }, + [ clientId, name ] + ); const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false ); const blockProps = useBlockProps(); @@ -119,8 +137,8 @@ export const JetpackContactFormEdit = forwardRef( ]; const createBlocksFromInnerBlocksTemplate = innerBlocksTemplate => { - const blocks = map( innerBlocksTemplate, ( [ name, attr, innerBlocks = [] ] ) => - createBlock( name, attr, createBlocksFromInnerBlocksTemplate( innerBlocks ) ) + const blocks = map( innerBlocksTemplate, ( [ blockName, attr, innerBlocks = [] ] ) => + createBlock( blockName, attr, createBlocksFromInnerBlocksTemplate( innerBlocks ) ) ); return blocks; @@ -366,35 +384,6 @@ const withThemeProvider = WrappedComponent => props => ( ); -export default compose( [ - withSelect( ( select, props ) => { - const { getBlockType, getBlockVariations, getDefaultBlockVariation } = select( 'core/blocks' ); - const { getBlocks } = select( 'core/block-editor' ); - const { getEditedPostAttribute } = select( 'core/editor' ); - const { getUser, canUser } = select( 'core' ); - const innerBlocks = getBlocks( props.clientId ); - - const authorId = getEditedPostAttribute( 'author' ); - const authorEmail = authorId && getUser( authorId ) && getUser( authorId ).email; - const canUserInstallPlugins = canUser( 'create', 'plugins' ); - - const submitButton = innerBlocks.find( block => block.name === 'jetpack/button' ); - if ( submitButton && ! submitButton.attributes.lock ) { - const lock = { move: false, remove: true }; - submitButton.attributes.lock = lock; - } - - return { - blockType: getBlockType && getBlockType( props.name ), - canUserInstallPlugins, - defaultVariation: getDefaultBlockVariation && getDefaultBlockVariation( props.name, 'block' ), - variations: getBlockVariations && getBlockVariations( props.name, 'block' ), - - innerBlocks, - hasInnerBlocks: innerBlocks.length > 0, - postAuthorEmail: authorEmail, - }; - } ), - withInstanceId, - withThemeProvider, -] )( withStyleVariables( JetpackContactFormEdit ) ); +export default compose( [ withInstanceId, withThemeProvider ] )( + withStyleVariables( JetpackContactFormEdit ) +); From 1df30466c4ade54d4991cb686cdc141162a0707d Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 11:53:52 +0800 Subject: [PATCH 3/8] Switch from withInstanceId to useInstanceId and move ThemeProvider inline --- .../forms/src/blocks/contact-form/edit.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index 2ffa2d800cf0..c0d3b52bc769 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -23,7 +23,7 @@ import { TextControl, Notice, } from '@wordpress/components'; -import { compose, withInstanceId } from '@wordpress/compose'; +import { useInstanceId } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; import { forwardRef, Fragment, useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -73,7 +73,7 @@ const RESPONSES_PATH = `${ get( getJetpackData(), 'adminUrl', false ) }edit.php? const CUSTOMIZING_FORMS_URL = 'https://jetpack.com/support/jetpack-blocks/contact-form/'; export const JetpackContactFormEdit = forwardRef( - ( { name, attributes, setAttributes, clientId, instanceId, className, style }, ref ) => { + ( { name, attributes, setAttributes, clientId, className, style }, ref ) => { const { to, subject, @@ -85,6 +85,7 @@ export const JetpackContactFormEdit = forwardRef( salesforceData, } = attributes; + const instanceId = useInstanceId( JetpackContactFormEdit ); const { replaceInnerBlocks, selectBlock } = useDispatch( 'core/block-editor' ); const { blockType, @@ -308,7 +309,7 @@ export const JetpackContactFormEdit = forwardRef( elt = renderVariationPicker(); } else { elt = ( - <> + { ! attributes.formTitle && ( @@ -370,7 +371,7 @@ export const JetpackContactFormEdit = forwardRef( templateInsertUpdatesSelection={ false } /> - + ); } @@ -378,12 +379,4 @@ export const JetpackContactFormEdit = forwardRef( } ); -const withThemeProvider = WrappedComponent => props => ( - - - -); - -export default compose( [ withInstanceId, withThemeProvider ] )( - withStyleVariables( JetpackContactFormEdit ) -); +export default withStyleVariables( JetpackContactFormEdit ); From 79eea81e971b84c8ebd7ab5da0fee761479eafc3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 11:57:12 +0800 Subject: [PATCH 4/8] Move where ThemeProvider is rendered to ensure it always wraps --- .../forms/src/blocks/contact-form/edit.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index c0d3b52bc769..b3aaf03f9b6d 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -25,7 +25,7 @@ import { } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; -import { forwardRef, Fragment, useEffect, useState } from '@wordpress/element'; +import { forwardRef, Fragment, useEffect, useRef, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; import { filter, get, isArray, map } from 'lodash'; @@ -123,8 +123,8 @@ export const JetpackContactFormEdit = forwardRef( [ clientId, name ] ); const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false ); - - const blockProps = useBlockProps(); + const wrapperRef = useRef(); + const blockProps = useBlockProps( { ref: wrapperRef } ); const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = useModuleStatus( 'contact-form' ); @@ -309,7 +309,7 @@ export const JetpackContactFormEdit = forwardRef( elt = renderVariationPicker(); } else { elt = ( - + <> { ! attributes.formTitle && ( @@ -371,11 +371,15 @@ export const JetpackContactFormEdit = forwardRef( templateInsertUpdatesSelection={ false } /> - + ); } - return
{ elt }
; + return ( + +
{ elt }
+ + ); } ); From 451243f999320277c98967e824128de6df1ae53b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 12:15:19 +0800 Subject: [PATCH 5/8] Move withStyleVariables inline and delete HOC --- .../forms/src/blocks/contact-form/edit.js | 551 +++++++++--------- .../contact-form/util/with-style-variables.js | 15 - 2 files changed, 272 insertions(+), 294 deletions(-) delete mode 100644 projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index b3aaf03f9b6d..d500a53a5d94 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -25,7 +25,7 @@ import { } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; -import { forwardRef, Fragment, useEffect, useRef, useState } from '@wordpress/element'; +import { Fragment, useEffect, useRef, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; import { filter, get, isArray, map } from 'lodash'; @@ -38,7 +38,6 @@ import JetpackEmailConnectionSettings from './components/jetpack-email-connectio import JetpackManageResponsesSettings from './components/jetpack-manage-responses-settings'; import NewsletterIntegrationSettings from './components/jetpack-newsletter-integration-settings'; import SalesforceLeadFormSettings from './components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings'; -import { withStyleVariables } from './util/with-style-variables'; import defaultVariations from './variations'; const validFields = filter( childBlocks, ( { settings } ) => { @@ -72,315 +71,309 @@ const PRIORITIZED_INSERTER_BLOCKS = [ ...map( validFields, block => `jetpack/${ const RESPONSES_PATH = `${ get( getJetpackData(), 'adminUrl', false ) }edit.php?post_type=feedback`; const CUSTOMIZING_FORMS_URL = 'https://jetpack.com/support/jetpack-blocks/contact-form/'; -export const JetpackContactFormEdit = forwardRef( - ( { name, attributes, setAttributes, clientId, className, style }, ref ) => { - const { - to, - subject, - customThankyou, - customThankyouHeading, - customThankyouMessage, - customThankyouRedirect, - jetpackCRM, - salesforceData, - } = attributes; +function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, className } ) { + const { + to, + subject, + customThankyou, + customThankyouHeading, + customThankyouMessage, + customThankyouRedirect, + jetpackCRM, + salesforceData, + } = attributes; + const instanceId = useInstanceId( JetpackContactFormEdit ); + const { replaceInnerBlocks, selectBlock } = useDispatch( 'core/block-editor' ); + const { + blockType, + canUserInstallPlugins, + defaultVariation, + variations, + hasInnerBlocks, + postAuthorEmail, + } = useSelect( + select => { + const { getBlockType, getBlockVariations, getDefaultBlockVariation } = + select( 'core/blocks' ); + const { getBlocks } = select( 'core/block-editor' ); + const { getEditedPostAttribute } = select( 'core/editor' ); + const { getUser, canUser } = select( 'core' ); + const innerBlocks = getBlocks( clientId ); - const instanceId = useInstanceId( JetpackContactFormEdit ); - const { replaceInnerBlocks, selectBlock } = useDispatch( 'core/block-editor' ); - const { - blockType, - canUserInstallPlugins, - defaultVariation, - variations, - hasInnerBlocks, - postAuthorEmail, - } = useSelect( - select => { - const { getBlockType, getBlockVariations, getDefaultBlockVariation } = - select( 'core/blocks' ); - const { getBlocks } = select( 'core/block-editor' ); - const { getEditedPostAttribute } = select( 'core/editor' ); - const { getUser, canUser } = select( 'core' ); - const innerBlocks = getBlocks( clientId ); + const authorId = getEditedPostAttribute( 'author' ); + const authorEmail = authorId && getUser( authorId ) && getUser( authorId ).email; + const submitButton = innerBlocks.find( block => block.name === 'jetpack/button' ); + if ( submitButton && ! submitButton.attributes.lock ) { + const lock = { move: false, remove: true }; + submitButton.attributes.lock = lock; + } - const authorId = getEditedPostAttribute( 'author' ); - const authorEmail = authorId && getUser( authorId ) && getUser( authorId ).email; - const submitButton = innerBlocks.find( block => block.name === 'jetpack/button' ); - if ( submitButton && ! submitButton.attributes.lock ) { - const lock = { move: false, remove: true }; - submitButton.attributes.lock = lock; - } + return { + blockType: getBlockType && getBlockType( name ), + canUserInstallPlugins: canUser( 'create', 'plugins' ), + defaultVariation: getDefaultBlockVariation && getDefaultBlockVariation( name, 'block' ), + variations: getBlockVariations && getBlockVariations( name, 'block' ), + hasInnerBlocks: innerBlocks.length > 0, + postAuthorEmail: authorEmail, + }; + }, + [ clientId, name ] + ); + const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false ); + const wrapperRef = useRef(); + const innerRef = useRef(); + const blockProps = useBlockProps( { ref: wrapperRef } ); + const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = + useModuleStatus( 'contact-form' ); - return { - blockType: getBlockType && getBlockType( name ), - canUserInstallPlugins: canUser( 'create', 'plugins' ), - defaultVariation: getDefaultBlockVariation && getDefaultBlockVariation( name, 'block' ), - variations: getBlockVariations && getBlockVariations( name, 'block' ), - hasInnerBlocks: innerBlocks.length > 0, - postAuthorEmail: authorEmail, - }; - }, - [ clientId, name ] - ); - const [ isPatternsModalOpen, setIsPatternsModalOpen ] = useState( false ); - const wrapperRef = useRef(); - const blockProps = useBlockProps( { ref: wrapperRef } ); - const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = - useModuleStatus( 'contact-form' ); + const formClassnames = clsx( className, 'jetpack-contact-form', { + 'is-placeholder': ! hasInnerBlocks && registerBlockVariation, + } ); - const formClassnames = clsx( className, 'jetpack-contact-form', { - 'is-placeholder': ! hasInnerBlocks && registerBlockVariation, - } ); + const isSalesForceExtensionEnabled = + !! window?.Jetpack_Editor_Initial_State?.available_blocks[ + 'contact-form/salesforce-lead-form' + ]; - const isSalesForceExtensionEnabled = - !! window?.Jetpack_Editor_Initial_State?.available_blocks[ - 'contact-form/salesforce-lead-form' - ]; + const createBlocksFromInnerBlocksTemplate = innerBlocksTemplate => { + const blocks = map( innerBlocksTemplate, ( [ blockName, attr, innerBlocks = [] ] ) => + createBlock( blockName, attr, createBlocksFromInnerBlocksTemplate( innerBlocks ) ) + ); - const createBlocksFromInnerBlocksTemplate = innerBlocksTemplate => { - const blocks = map( innerBlocksTemplate, ( [ blockName, attr, innerBlocks = [] ] ) => - createBlock( blockName, attr, createBlocksFromInnerBlocksTemplate( innerBlocks ) ) - ); + return blocks; + }; - return blocks; - }; + const setVariation = variation => { + if ( variation.attributes ) { + setAttributes( variation.attributes ); + } - const setVariation = variation => { - if ( variation.attributes ) { - setAttributes( variation.attributes ); - } + if ( variation.innerBlocks ) { + replaceInnerBlocks( clientId, createBlocksFromInnerBlocksTemplate( variation.innerBlocks ) ); + } - if ( variation.innerBlocks ) { - replaceInnerBlocks( - clientId, - createBlocksFromInnerBlocksTemplate( variation.innerBlocks ) - ); - } + selectBlock( clientId ); + }; - selectBlock( clientId ); - }; + useEffect( () => { + // Populate default variation on older versions of WP or GB that don't support variations. + if ( ! hasInnerBlocks && ! registerBlockVariation ) { + setVariation( defaultVariations[ 0 ] ); + } + } ); - useEffect( () => { - // Populate default variation on older versions of WP or GB that don't support variations. - if ( ! hasInnerBlocks && ! registerBlockVariation ) { - setVariation( defaultVariations[ 0 ] ); - } - } ); + useEffect( () => { + if ( + ! hasInnerBlocks && + registerBlockVariation && + ! isPatternsModalOpen && + window.location.search.indexOf( 'showJetpackFormsPatterns' ) !== -1 + ) { + setIsPatternsModalOpen( true ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); - useEffect( () => { - if ( - ! hasInnerBlocks && - registerBlockVariation && - ! isPatternsModalOpen && - window.location.search.indexOf( 'showJetpackFormsPatterns' ) !== -1 - ) { - setIsPatternsModalOpen( true ); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [] ); + const renderSubmissionSettings = () => { + return ( + <> + + { __( 'Customize the view after form submission:', 'jetpack-forms' ) } + + setAttributes( { customThankyou: newMessage } ) } + __nextHasNoMarginBottom={ true } + __next40pxDefaultSize={ true } + /> - const renderSubmissionSettings = () => { - return ( - <> - - { __( 'Customize the view after form submission:', 'jetpack-forms' ) } - - setAttributes( { customThankyou: newMessage } ) } + { 'redirect' !== customThankyou && ( + setAttributes( { customThankyouHeading: newHeading } ) } __nextHasNoMarginBottom={ true } __next40pxDefaultSize={ true } /> + ) } - { 'redirect' !== customThankyou && ( - setAttributes( { customThankyouHeading: newHeading } ) } - __nextHasNoMarginBottom={ true } - __next40pxDefaultSize={ true } - /> - ) } + { 'message' === customThankyou && ( + setAttributes( { customThankyouMessage: newMessage } ) } + __nextHasNoMarginBottom={ true } + /> + ) } - { 'message' === customThankyou && ( - setAttributes( { customThankyouMessage: newMessage } ) } - __nextHasNoMarginBottom={ true } + { 'redirect' === customThankyou && ( +
+ setAttributes( { customThankyouRedirect: newURL } ) } /> - ) } +
+ ) } + + ); + }; - { 'redirect' === customThankyou && ( -
- setAttributes( { customThankyouRedirect: newURL } ) } - /> -
+ const renderVariationPicker = () => { + return ( +
+ - ); - }; - - const renderVariationPicker = () => { - return ( -
- ! v.hiddenFromPicker ) } - onSelect={ ( nextVariation = defaultVariation ) => { - setVariation( nextVariation ); - } } - /> -
- +
+ -
- - -
-
- { isPatternsModalOpen && ( - setIsPatternsModalOpen( false ) } + +
- ); - }; + { isPatternsModalOpen && ( + setIsPatternsModalOpen( false ) } + > + { + return pattern.content.indexOf( 'jetpack/contact-form' ) !== -1; + } } + clientId={ clientId } + /> + + ) } +
+ ); + }; - let elt; + let elt; - if ( ! isModuleActive ) { - if ( isLoadingModules ) { - elt = ; - } else { - elt = ( - - ); - } - } else if ( ! hasInnerBlocks && registerBlockVariation ) { - elt = renderVariationPicker(); + if ( ! isModuleActive ) { + if ( isLoadingModules ) { + elt = ; } else { elt = ( - <> - - { ! attributes.formTitle && ( - - - { __( - 'Add a heading inside the form or before it to help everybody identify it.', - 'jetpack-forms' - ) } - { ' ' } - - ) } - - - - - { renderSubmissionSettings() } - - - - - - { isSalesForceExtensionEnabled && salesforceData?.sendToSalesforce && ( - - ) } - { ! ( isSimpleSite() || isAtomicSite() ) && ( - - { canUserInstallPlugins && ( - - - + + ); + } + } else if ( ! hasInnerBlocks && registerBlockVariation ) { + elt = renderVariationPicker(); + } else { + const { generateStyleVariables } = window.jetpackForms; + const style = generateStyleVariables( innerRef.current ); + elt = ( + <> + + { ! attributes.formTitle && ( + + + { __( + 'Add a heading inside the form or before it to help everybody identify it.', + 'jetpack-forms' ) } - - - - - ) } - + { ' ' } + + ) } + + + + + { renderSubmissionSettings() } + + + + -
- -
- - ); - } + ) } + { ! ( isSimpleSite() || isAtomicSite() ) && ( + + { canUserInstallPlugins && ( + + + + ) } + + + + + ) } + - return ( - -
{ elt }
- +
+ +
+ ); } -); -export default withStyleVariables( JetpackContactFormEdit ); + return ( + +
{ elt }
+ + ); +} + +export default JetpackContactFormEdit; diff --git a/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js b/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js deleted file mode 100644 index 705689137dda..000000000000 --- a/projects/packages/forms/src/blocks/contact-form/util/with-style-variables.js +++ /dev/null @@ -1,15 +0,0 @@ -import './form-styles.js'; -import { useRef } from '@wordpress/element'; - -export const withStyleVariables = WrappedComponent => props => { - const { generateStyleVariables } = window.jetpackForms; - const componentRef = useRef( undefined ); - - return ( - - ); -}; From 9379f3acc0fc9e228e6bc3932581ef4244374ae7 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 12:18:23 +0800 Subject: [PATCH 6/8] Move single use render functions inline, replace Fragment with <> --- .../forms/src/blocks/contact-form/edit.js | 145 ++++++++---------- 1 file changed, 68 insertions(+), 77 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index d500a53a5d94..80a581d43e3b 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -25,7 +25,7 @@ import { } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; -import { Fragment, useEffect, useRef, useState } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; import { filter, get, isArray, map } from 'lodash'; @@ -174,62 +174,22 @@ function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, cl // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); - const renderSubmissionSettings = () => { - return ( - <> - - { __( 'Customize the view after form submission:', 'jetpack-forms' ) } - - setAttributes( { customThankyou: newMessage } ) } - __nextHasNoMarginBottom={ true } - __next40pxDefaultSize={ true } - /> - - { 'redirect' !== customThankyou && ( - setAttributes( { customThankyouHeading: newHeading } ) } - __nextHasNoMarginBottom={ true } - __next40pxDefaultSize={ true } - /> - ) } - - { 'message' === customThankyou && ( - setAttributes( { customThankyouMessage: newMessage } ) } - __nextHasNoMarginBottom={ true } - /> - ) } - - { 'redirect' === customThankyou && ( -
- setAttributes( { customThankyouRedirect: newURL } ) } - /> -
- ) } - - ); - }; + let elt; - const renderVariationPicker = () => { - return ( + if ( ! isModuleActive ) { + if ( isLoadingModules ) { + elt = ; + } else { + elt = ( + + ); + } + } else if ( ! hasInnerBlocks && registerBlockVariation ) { + elt = (
); - }; - - let elt; - - if ( ! isModuleActive ) { - if ( isLoadingModules ) { - elt = ; - } else { - elt = ( - - ); - } - } else if ( ! hasInnerBlocks && registerBlockVariation ) { - elt = renderVariationPicker(); } else { const { generateStyleVariables } = window.jetpackForms; const style = generateStyleVariables( innerRef.current ); @@ -322,7 +264,56 @@ function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, cl - { renderSubmissionSettings() } + + { __( 'Customize the view after form submission:', 'jetpack-forms' ) } + + setAttributes( { customThankyou: newMessage } ) } + __nextHasNoMarginBottom={ true } + __next40pxDefaultSize={ true } + /> + + { 'redirect' !== customThankyou && ( + setAttributes( { customThankyouHeading: newHeading } ) } + __nextHasNoMarginBottom={ true } + __next40pxDefaultSize={ true } + /> + ) } + + { 'message' === customThankyou && ( + setAttributes( { customThankyouMessage: newMessage } ) } + __nextHasNoMarginBottom={ true } + /> + ) } + + { 'redirect' === customThankyou && ( +
+ setAttributes( { customThankyouRedirect: newURL } ) } + /> +
+ ) } ) } { ! ( isSimpleSite() || isAtomicSite() ) && ( - + <> { canUserInstallPlugins && ( - + ) } From a07c46a391481a49a4d28d793b6faa85249b0209 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 15:23:19 +0800 Subject: [PATCH 7/8] Add missing import --- projects/packages/forms/src/blocks/contact-form/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js index 80a581d43e3b..a1279826cc9b 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/edit.js @@ -39,6 +39,7 @@ import JetpackManageResponsesSettings from './components/jetpack-manage-response import NewsletterIntegrationSettings from './components/jetpack-newsletter-integration-settings'; import SalesforceLeadFormSettings from './components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings'; import defaultVariations from './variations'; +import './util/form-styles.js'; const validFields = filter( childBlocks, ( { settings } ) => { return ( @@ -245,8 +246,7 @@ function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, cl
); } else { - const { generateStyleVariables } = window.jetpackForms; - const style = generateStyleVariables( innerRef.current ); + const style = window.jetpackForms.generateStyleVariables( innerRef.current ); elt = ( <> From 75db61a4f2fb18dd5eee8fc50582ad4cc9208e04 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 23 Jan 2025 15:43:25 +0800 Subject: [PATCH 8/8] changelog --- projects/packages/forms/changelog/remove-contact-form-hocs | 4 ++++ projects/plugins/jetpack/changelog/remove-contact-form-hocs | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 projects/packages/forms/changelog/remove-contact-form-hocs create mode 100644 projects/plugins/jetpack/changelog/remove-contact-form-hocs diff --git a/projects/packages/forms/changelog/remove-contact-form-hocs b/projects/packages/forms/changelog/remove-contact-form-hocs new file mode 100644 index 000000000000..9b38f38c0c17 --- /dev/null +++ b/projects/packages/forms/changelog/remove-contact-form-hocs @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Forms: Remove wrapping
element from form block. diff --git a/projects/plugins/jetpack/changelog/remove-contact-form-hocs b/projects/plugins/jetpack/changelog/remove-contact-form-hocs new file mode 100644 index 000000000000..3566d3d26c79 --- /dev/null +++ b/projects/plugins/jetpack/changelog/remove-contact-form-hocs @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Forms: Remove wrapping
element from form block.