select element doesn't work in paragraph

[joyously]

A <select> element in a paragraph block looks correct, but does not show the <option> values.
I checked the pointer-events CSS property and it was set to auto.
I tested this on GB 5.8.0, using Twenty Nineteen.

To reproduce
Steps to reproduce the behavior:

1. Add a Custom HTML block.
2. Enter HTML with a <select> and <option>s elements.
3. Click on Preview on the HTML block.
4. See that the select drops down to show the options.
5. Add a Paragraph block.
6. Edit the block's HTML.
7. Enter the same HTML as in the Custom HTML block.
8. Edit the block visually.
9. See that the select does not drop down to show the options.

Expected behavior
The select in both blocks should show the option values the same way.

Screenshots

Desktop

• OS: Ubuntu Studio 16.04
• Browser Firefox
• Version 66

[talldan]

Hi @joyously. What's the use-case for putting a select within a paragraph block? Curiously this works in Chrome, but not in Firefox. And I thought browser inconsistencies were a thing of the past!

Anyway, most blocks aren't intended to support arbitrary markup, with many it'll cause a block validation error. For example if you try putting two <p> tags inside a paragraph block, it'll show a validation error because there's no way for the editor to know how to parse the altered markup back into a block.

The Custom HTML block was created for this purpose, and as mentioned the markup works fine there.

As such, I'm going to close the issue and mark as Won't Fix, but by all means the conversation can continue, and if it turns out there is something to fix the issue can be reopened.

[joyously]

My use case was to test my theme styles. I didn't see any other way to enter a select.
As you can see here the Custom HTML block uses an iframe, so I can't style anything in there.

Regardless of whether a select should be in a paragraph, it should still work when it is. There are no validation errors. The browser can handle that markup (as shown in the Custom HTML block), so why doesn't it work?

[joyously]

I was just thinking that if I was writing a blog on HTML tutorials, I would want to be able to use the elements in my prose to show live examples. Why would any inline element be a problem for any block element?
And last I checked, WP was supporting the 2 latest versions of Firefox and Chrome.
https://make.wordpress.org/core/handbook/best-practices/browser-support/
https://make.wordpress.org/core/2017/02/28/the-new-editor-and-browser-support/

[talldan]

I was just thinking that if I was writing a blog on HTML tutorials, I would want to be able to use the elements in my prose to show live examples. Why would any inline element be a problem for any block element?

Yep, that's an interesting use case that doesn't seem well supported at the moment. The Custom HTML block does seem to be the best option, so it's a shame that it doesn't support styles properly.

#9129 seems to be the issue covering it.

Why would any inline element be a problem for any block element?

The issue is that blocks perform validation on their markup to check if the block's HTML is as expected:
https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#validation

Editing the HTML can cause this validation to fail. In the worst case the block's attributes won't be properly parsable if the content has changed radically.

I found a few issues that are related:

• Remove the "Edit as HTML" button from blocks that don't support editing of their HTML #9571
• Paragraph block fails validation and appears externally modified when content is valid #8950
• Block Validation, Deprecation and Migration Experience #7604 (this is the main umbrella issue for block validation)
• Modifying a block's HTML can cause an unexpected "This block appears to have been modified externally." error #6826

I suppose the core of the issue is that you want to be able to insert inline custom HTML while maintaining a good writing experience. In a block that's properly intended to support that experience, the select would ideally work consistently across browsers. Perhaps also a secondary issue that the validation issues that can arise from the 'Edit as HTML' option aren't abundantly clear to users.

And last I checked, WP was supporting the 2 latest versions of Firefox and Chrome.

I just checked my comment above and I can't see where I said that this wasn't the case 😄.