FEATURE - Table component support

[kasprzyk-sz]

Table block needs integrations with
https://visual-framework.github.io/vf-core/components/detail/vf-table.html

Currently:

Input:

Output:

[khawkins98]

I think this might be technically correct according to the VF: vf-table doesn't grow to be full width.

But maybe .vf-content .vf-table should...

[kasprzyk-sz]

Yeah, I think that it would look nicer with full width. Anyway, I guess it's a bit outdated.

HTML output:

[khawkins98]

VF-WP uses the vf-content implementation of vf-table (so no classes on the table). https://visual-framework.github.io/vf-core/components/detail/vf-content.html

The logic for this is that it's not pragmatic to add all the classes needed to a table.

[kasprzyk-sz]

Right! What I meant was table styles. There is only default and stripes available, and they affect the look only in the editor. Also, there are color settings with no effect on the front end.

As for the full width, maybe a good solution would be to have a toggle switch in table settings to determine it.

[dbushell]

It's possible with JavaScript to edit the native Gutenberg table block and add custom styles / options (to some extent).

For the HTML render I've been using PHP filters to replace any markup and classes as necessary.
https://github.com/visual-framework/vf-wp/tree/master/wp-content/plugins/vf-gutenberg/includes/core

There isn't any table block filters yet so it's using the default WP styles.

[dbushell]

I will add that of course. I don't think vf-core had finalised the table pattern when I last looked at default blocks.

[sturobson]

here's what the table looks like inside of vf-content as a default

https://visual-framework.github.io/vf-core/components/detail/vf-content.html

[sturobson]

There's also the vf-table component - https://visual-framework.github.io/vf-core/components/detail/vf-table.html - but I wouldn't think all of that functionality would make it into a blogpost … let alone let content creators have a choice … they've a choice of headings and that does the semantics of the page no favours.