Save/Submit button not working with form blocks in Edit page

Created on 1 April 2025, 5 months ago

Problem/Motivation

In Drupal 10, using this module, I'm running into issues on Layout Paragraphs node edit pages. For example, the Edit page for a Basic Page. The submit/save page either disappears or does not work correctly when I have a webform content block or a block view with exposed filters, using a block display paragraph type.

With a webform, the form is rendered in the edit page. It shows the submit button and is an active webform, even in the edit page. Technically, it's a
within a
which is probably problematic.

I don't know if it's Drupal core or Layout Paragraphs that puts the entire edit form in a
tag. Maybe there's no workaround for this. As for the display of blocks, I have been able to workaround the issue by going into the Block Layout page, selecting Configure for the block, then preventing the display of the form on the node/123/edit page. This is just a workaround and I think a more reasonable solution must exist.

Ultimately, I think the browser doesn't handle a form within a form and conflicting submit actions.

Steps to reproduce

Using Drupal 10, create a webform. Allow it to be rendered as a block, then go to Block Layout. Configure a new block and assign this form. Save the block, save the page.

Go to a Layouts Paragraph-enabled node. Edit the node. Add a block paragraph and display the block which has the webform. Click Save for the paragraph edit form, then Save for the page. You may run into problems with the Save function for the page. It also may not even be displayed.

Proposed resolution

Perhaps the edit form could be put into some other type of HTML element, or better yet, figure out a way to allow placeholders of the forms within Layout Paragraphs.

πŸ› Bug report
Status

Active

Version

2.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States rraney

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @rraney
  • πŸ‡ΊπŸ‡ΈUnited States rraney
  • πŸ‡ΊπŸ‡ΈUnited States rraney
  • πŸ‡ΊπŸ‡ΈUnited States rraney
  • πŸ‡¬πŸ‡§United Kingdom robcarr Perthshire, Scotland

    I only see this problem in Gin theme when used to edit content. If Claro is used then the normal Save/Preview etc buttons are rendered.

    See #3360044-5: Submit button on edit form gets replaced by contact-forms submit-button β†’ which re-iterates the problem... but not a solution, alas

  • πŸ‡¬πŸ‡§United Kingdom robcarr Perthshire, Scotland
  • πŸ‡ΊπŸ‡ΈUnited States rraney

    There are at least two big issues with Gin that have forced me to switch to Claro. I wish the best parts of both would merge into a dream theme :). This may be a Gin issue and not Layout Paragraphs, as you mentioned.

  • πŸ‡ΊπŸ‡ΈUnited States fholub13

    Encountered this on a client site recently. Setup:

    • PHP 8.1
    • Gin 4.1.0
    • Layout Paragraphs 2.1.1
    • Embedded webform block paragraph on the page

    What I believe is happening is that the form submit/action of the embedded form that's being rendered in the layout is clobbering the form submit/action of the node edit page.

    Temporary workaround that "fixed" the issue for us:

    Layout Paragraphs can be configured to display a Preview mode of the paragraphs within the layout. If one doesn't exist yet, create a Preview view mode for embedded block paragraph type and modify the display format to Block field label. This ensures that the embedded form will only render as a field label inside the layout instead of as a full form. Once I did this, the save/submit button on the node edit form started to render again.

    Of note, this issue doesn't appear on a local environment, only on a staging/dev server. CSS/JS aggregation settings don't seem to have an effect on this behavior. Switching to the Claro admin theme also works around this issue. That said, I believe this is something that should be accounted for and fixed in Layout Paragraphs rather than in Gin.

Production build 0.71.5 2024