Redesign Table Block Placeholder

[tellthemachines]

Description

Fixes #15820

Updated table block to use Placeholder component and implement design from #15820.

How has this been tested?

Updated e2e tests to reflect changed button text.

Steps to test:

1. Create a new post;
2. Add table block;
3. Verify that placeholder displays according to design spec.

Screenshots

Types of changes

Enhancement (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[tellthemachines]

Hi @mapk and @kjellr the design changes to the table block placeholder are ready for review. As discussed on the issue, these changes vary slightly from the designs on the issue. Let me know what you think!

[kjellr]

Thanks, @tellthemachines! This looks great.

Here's a screenshot:

I don't mind the labels-on-top, but I do think the number fields are a little long considering the content that'll go inside them. I wonder if we can narrow them down a bit? Something like this, perhaps:

[tellthemachines]

@kjellr done!

[noisysocks]

Nice work, and congrats on your first PR! 🎉🌈

Tested this locally and it's looking groovy. Just a few minor comments.

[noisysocks]

Any thoughts on overriding this style in packages/block-library/src/table/editor.scss as opposed to introducing a new prop? Will the prop be useful in any other blocks?

[tellthemachines]

Not sure. The existing blocks all have a horizontal layout, but so far there are no others with multiple inputs. That is probably the scenario where the column layout is most useful. Is it likely there will be more of these in the future?

[noisysocks]

I'd lean towards You Ain't Gonna Need It, but no strong preference either way 🙂

[tellthemachines]

Hmm good point, I'll look into a table-specific override.

[tellthemachines]

OK so there's no way of doing this without changing the Placeholder component in some way, because the CSS for column layout needs to be added to an inner element, not to the wrapper that takes the className prop. The alternative to isColumnLayout would be to pass in a second className prop, say fieldsetClassName, to be applied to the inner div. That seems a bit messier, and less self-explanatory, so will stick with the current solution.

[noisysocks]

We could pass in className="wp-block-table__placeholder" and then have:

.wp-block-table__placeholder .components-placeholder__fieldset,
.wp-block-table__placeholder .components-placeholder__fieldset form,
{
	flex-direction: column;
}

But, yes, as this point it's not very tidy. I'll defer to your judgement! 🙂

[tellthemachines]

I've been using CSS Modules for too long, keep forgetting that nesting classes is a thing 😭 😂

[kjellr]

Cool, thanks @tellthemachines. Looks good on my end:

I'd like to just make sure @mapk gets one last look too, since he started the original ticket.

[noisysocks]

Doesn't look like the Travis CI failures are legitimate—I restarted the job for you!

[tellthemachines]

@mapk would be awesome to get your feedback on this change!

[mapk]

I just tested as well. It looks great @tellthemachines! LGTM! Thanks so much for working on this.

[kjellr]

Excellent. Looks like we've got multiple ✅, so I'll go ahead and merge this in. Thanks again, @tellthemachines!

[youknowriad]

Nice one @tellthemachines