Twenty Nineteen as a Block-based Theme

[kjellr]

This PR uses a similar approach to #2, but applies it to Twenty Nineteen. It's based on the demo content from the Twenty Nineteen theme demo, but implemented as a Block-based Theme. CSS is mostly just duplicated from Twenty Nineteen, but has a few small adjustments as noted in the code comments.

Basic steps for testing:

1. Create a fresh WordPress site
2. Clone this repository or upload a zip into the site’s themes directory
3. Install the Gutenberg plugin
4. Enable the Full Site Editing and Full Site Editing Demo Templates experiments in the Gutenberg > Experiments panel.
5. Activate the "Twenty Nineteen Blocks" theme from within Appearance > Themes.
6. Visit the Customizer and hit "Publish"

You can compare to the Twenty Nineteen Demo site. It should look pretty similar.

Issues

This is still in very much in progress, so this is surely not an exhaustive list of issues:

• The menu doesn't work right if the starter content creates pages using IDs in their URLs instead of slugs.
• The Cover Images at the top of pages don't exactly match the demo. This'll require a bunch of extra styles, so may not be worth it for this demo.
• The site tagline/image don't correspond to the actual tagline/image.
• The site image doesn't hang off the left side like it does in the original theme.
• The menu does not collapse nicely on mobile.
• Button styles don't match.
• The blog page is currently empty.

Screenshots:

[jffng]

Awesome! Works for me. A couple notes:

1. Should we get into the habit of adding a readme with the steps to recreate the demo before merging? Basically it could just contain the steps you outlined in the PR. Also, there is one step I'd add to your current list: I've found that the theme needs to be activated first via the Appearance > Themes Panel, before you can actually successfully publish via the Customizer.

2. The nav links + pages are created correctly for me. I tested locally with the following specs:

• php 7.3.2
• wp 5.3.2
• gutenberg 7.2.0

[kjellr]

Should we get into the habit of adding a readme with the steps to recreate the demo before merging? Basically it could just contain the steps you outlined in the PR.

Yeah, we probably should. There's a readme.txt format that's required for themes in the theme repository:

https://make.wordpress.org/themes/2015/04/29/a-revised-readme/

Though many of these are just demos and not intended for the theme repo, we should probably still use that general format for consistency.

Also, there is one step I'd add to your current list: I've found that the theme needs to be activated first via the Appearance > Themes Panel, before you can actually successfully publish via the Customizer.

Ah, thanks. I'll add this.

[kjellr]

I did some digging into why button styles weren't looking right in the footer, and it was because block styles for Twenty Nineteen were previously scoped only to the entry-content. I've expanded this in afc5cb5. This should bring in a lot more consistency for header/footer styles in general.

[kjellr]

Similar to the Twenty Twenty PR, I've gone ahead and simplified this PR down a bit. I've removed all starter content, except for the simple Home + Blog pages. (The blog page template is the easiest way to get the blog page working with blocks for now).

I've also fixed a few visual bugs in the header too. Some of the smaller issues noted above are still present, but I think this is a pretty good start, and should be a candidate for merge once it's tested out. 👍

[jffng]

Works for me!

What do you think about adding social links to the header like the demo site?

I think we can merge it and iterate as desired.

[kjellr]

What do you think about adding social links to the header like the demo site?

Yeah, I think we can add that in too. I'll work on that after we merge this. 👍

Thanks!