search

bobbingwide / thisis

ThisIs ... experimental Full Site Editing theme
GNU General Public License v3.0
1 stars 0 forks source link

Update for Gutenberg 10.6 #23

Open bobbingwide opened 3 years ago

bobbingwide commented 3 years ago

It looks like I've got to implement a number of changes for Gutenberg 10.6

  1. Switch to theme.json
  2. Implement post-terms blocks for categories and tags
  3. Fix the horizontal menu styling

Switch to theme.json

In Gutenberg 10.6, the theme JSON file no longer be experimental. It's been restructured.

We'll need a theme.json file for Gutenberg 10.6 and above with "version": 1.

And experimental-theme.json for earlier versions of Gutenberg, though this won't be maintained.

See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/themes/theme-json.md

Implement post-terms blocks for post categories and tags

There have been other changes. post-tags and post-hierarchical-terms have become two variations of post-terms.

Fix horizontal menu styling

The menu when looking at a single-post was: image

It's now.:

or is it? The fonts have gone tits up again. Must've been my attempt to put templateParts into theme.json without anything else!

bobbingwide commented 3 years ago

Check if the support is in v10.6.0-rc.1. If so, make the change before 12th May.

bobbingwide commented 3 years ago

I applied 10.6.0-rc.1. In the Site Editor the local customizations were not active... the fonts weren't as expected. But the front end was OK.

Note: I hadn't created theme.json

bobbingwide commented 3 years ago

All that was necessary it seems was to open Global Styles and change the Font family from Default to Open Sans,sans serif

bobbingwide commented 3 years ago

Background colour in Site Editor is different from block/template editor. Makes it difficult to check Global Styles for a striped Table, for example.

image

image

bobbingwide commented 3 years ago

When using the template editor for a post, in order to check the styling for the table block, I noted the following problems:

  1. Meta boxes fill up most of the main body. Worse than this screen capture where the meta boxes have been closed down.
  2. There's a big black border that seems necessary to support the back arrow
  3. The table block looks fine in the editor, but not at all on the front end.

So how can I style the table block using Global styles?

image

bobbingwide commented 3 years ago
  1. Meta boxes fill up most of the main body. Worse than this screen capture where the meta boxes have been closed down.

I raised an issue on Gutenberg. https://github.com/WordPress/gutenberg/issues/31789

bobbingwide commented 3 years ago
  1. The table block looks fine in the editor, but not at all on the front end.

Pragmatic solution is to copy/cobble the CSS from gutenberg/build/block-library/theme.css