Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contact Form Block: Prevent removal of the submit button #24838

Merged
merged 6 commits into from
Jul 1, 2022
Merged

Contact Form Block: Prevent removal of the submit button #24838

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
db7cb15
set the lock attribute to remove the delete option from form buttons
vykes-mac Jun 24, 2022
8c5b0f3
remove ability to delete form button on exisiting forms
vykes-mac Jun 24, 2022
47fb77e
changelog
vykes-mac Jun 24, 2022
3008e29
update existing contact form submit button only when jetpack form is …
vykes-mac Jun 27, 2022
8196fd5
move logic to lock existing submit button to edit.js to prevent loadi…
vykes-mac Jun 28, 2022
2829da2
Merge branch 'trunk' into update/disable-removal-submit-btn
coder-karen Jun 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/disable-removal-form-submit-btn
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: enhancement

Prevent users from removing the contact form submit button.
1 change: 1 addition & 0 deletions projects/plugins/jetpack/extensions/blocks/contact-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import deprecated from './deprecated';
import edit from './edit';
import transforms from './transforms';
import variations from './variations';
import './view';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you'd like to start loading js on the frontend whenever the form block is added to a post / page, you would need to also rely on Jetpack_Gutenberg::load_assets_as_required() in PHP to ensure the js gets loaded on the frontend.

That said, I'm thinking we may not need to add this to the frontend, right? It should be enough to load this in the editor.
In this case, I would recommend that you move the code from view.js to edit.js.
This will have the added bonus of not having to load @wordpress/data on the frontend.

Copy link
Contributor Author

@vykes-mac vykes-mac Jun 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That said, I'm thinking we may not need to add this to the frontend, right?

Yes this is not needed in the front-end only the editor. It's purpose is to update existing form blocks to remove the delete option for the submit button.

In this case, I would recommend that you move the code from view.js to edit.js.
This will have the added bonus of not having to load @wordpress/data on the frontend.

Thank you for the suggestion, this make sense since this piece of code is not needed in the front-end. I will update accordingly.


export const name = 'contact-form';

Expand Down
6 changes: 6 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/contact-form/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const variations = compact( [
{
text: __( 'Contact Us', 'jetpack' ),
element: 'button',
lock: { remove: true },
},
],
],
Expand Down Expand Up @@ -57,6 +58,7 @@ const variations = compact( [
{
text: __( 'Subscribe', 'jetpack' ),
element: 'button',
lock: { remove: true },
},
],
],
Expand Down Expand Up @@ -91,6 +93,7 @@ const variations = compact( [
{
text: __( 'Send RSVP', 'jetpack' ),
element: 'button',
lock: { remove: true },
},
],
],
Expand Down Expand Up @@ -134,6 +137,7 @@ const variations = compact( [
{
text: __( 'Send', 'jetpack' ),
element: 'button',
lock: { remove: true },
},
],
],
Expand Down Expand Up @@ -173,6 +177,7 @@ const variations = compact( [
{
text: __( 'Book Appointment', 'jetpack' ),
element: 'button',
lock: { remove: true },
},
],
],
Expand Down Expand Up @@ -216,6 +221,7 @@ const variations = compact( [
{
text: __( 'Send Feedback', 'jetpack' ),
element: 'button',
lock: { remove: true },
},
],
],
Expand Down
24 changes: 24 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/contact-form/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { dispatch, select, subscribe } from '@wordpress/data';
import domReady from '@wordpress/dom-ready';

if ( typeof window !== 'undefined' ) {
domReady( () => {
const getBlockList = () => select( 'core/block-editor' ).getBlocks();
const unsubscribe = subscribe( () => {
const newBlockList = getBlockList();
const forms = newBlockList.filter( block => ( block.name = 'jetpack/contact-form' ) );
if ( forms.length > 0 ) {
unsubscribe();
forms.forEach( form => {
const button = form.innerBlocks.find( block => block.name === 'jetpack/button' );
if ( button ) {
const lock = { move: false, remove: true };
dispatch( 'core/block-editor' ).updateBlockAttributes( button.clientId, {
lock,
} );
}
} );
}
} );
} );
}