Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create the TwentyTwenty Demo Site using Block Templates #5

Merged
merged 24 commits into from
Jan 20, 2020

Conversation

jffng
Copy link
Collaborator

@jffng jffng commented Jan 15, 2020

Description

[WIP] This PR is an attempt to create https://2020.wordpress.net/ using block templates. The purpose is to demonstrate how block templates work and identify any hiccups encountered developing a theme + site this way.

How To Test

  1. Create a fresh WordPress site
  2. Install Gutenberg and enable the Full Site Editing experiment
  3. Upload the demo content (may replace this with starter content later)
  4. Clone, install, and activate this theme

Known Issues

  • Padding / spacing in header and footer
  • Home page design is missing the background white element on the featured image
  • Mobile menu
  • Search bar

Screenshots

Home page
Screen Shot 2020-01-15 at 11 16 31 AM

Exhibitions page
Screen Shot 2020-01-15 at 11 17 17 AM

Footer
Screen Shot 2020-01-15 at 11 17 36 AM

@kjellr kjellr added the block-based theme A theme using HTML templates label Jan 15, 2020
Copy link
Collaborator

@kjellr kjellr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was unable to get this loaded... it kept giving me "Template not found" errors locally, and this is what I saw when I tried it on jurassic.ninja:

Screen Shot 2020-01-17 at 11 32 30 AM

I'll try digging in a little myself, but in the meantime, I left some smaller code comments throughout. 👍

twentytwenty-blocks/readme.txt Outdated Show resolved Hide resolved
twentytwenty-blocks/style.css Outdated Show resolved Hide resolved
twentytwenty-blocks/style.css Outdated Show resolved Hide resolved
twentytwenty-blocks/readme.txt Outdated Show resolved Hide resolved
jffng and others added 9 commits January 17, 2020 10:53
Add block style variations for about page and header
Add about page and blog page templates to starter content
Add template parts for primary page content
Namespace to twentytwenty-blocks
The stylesheet registration here throws errors if it's tied to the after_setup_theme hook. This commit moves it to init instead.
@jffng
Copy link
Collaborator Author

jffng commented Jan 17, 2020

@kjellr I made two commits that attempt to simplify the example by moving the blocks that were previously in block templates, directly into the starter content.

This has caused some unexpected issues that I could use a second pair of eyes on to debug, namely:

  • When I activate the theme, only the Home, Contact, and Blog pages are created with the correct content.
  • About is created but missing the starter content I've specified. Maybe this has to do with the theme supplying a page-about.html.
  • Exhibitions and From Signac to Matisse are not created at all.

I've tested this locally and on jurassic ninja.

@kjellr
Copy link
Collaborator

kjellr commented Jan 20, 2020

@jffng: I pushed a bunch of updates this morning. These sort of sidestep the issues you'd been having around the starter content by (mostly) falling back on the starter content that's baked into the theme by default, rather than the more complicated starter content in the theme demo site. This is a little bit of a shift from the initial attempt that this PR made, but I think it is a decent start for the demo, as it simplifies things greatly.

I also updated the readme.txt, and fixed up some styles around the page header. These aren't exactly like the original theme, but they're pretty close. The main hiccup is the treatment around the featured image. We can't easily add a white background behind it on the homepage (since we're not actually displaying the real featured image yet), and we can't replicate the full-screen featured image that lives behind the post title on subpages with blocks yet either.

Here are a few screenshots of a fresh install, with the starter content active:

Screen Shot 2020-01-20 at 09 45 38

Screen Shot 2020-01-20 at 09 46 55

Screen Shot 2020-01-20 at 09 47 17


Anyway, let me know what you think. If this is generally working, I think we can probably merge this in and iterate so other folks can get testing more easily.

'thumbnail' => '{{image-opening}}',
'post_content' => join(
'',
array(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little torn about how to handle this starter content still:

For our purposes now, I do think it would help code readability to move this into template part, but I'm not sure it actually makes sense to at this point — since this is just standard page content, users will want to edit this inside the standard page editor, not in the block templates area of the editor.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think what we're really looking to use is "Page Templates", as per WordPress/gutenberg#18055. That functionality doesn't appear to be ready for themes too hook into yet, so sticking with the starter content is probably the best option we have at the moment. I've left some feedback in that ticket here: WordPress/gutenberg#18055 (comment).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While it does improve readability at this moment, I agree that putting starter content in a block template is not the right approach.

@jffng
Copy link
Collaborator Author

jffng commented Jan 20, 2020

It works like a charm.

Much simpler and easier to understand the concept of a block based theme this way, instead of trying to recreate the demo site entirely, thank you! 🎉

Going to merge, and we can revisit this if and when it becomes clearer how to handle starter content.

@jffng jffng merged commit c5e6859 into master Jan 20, 2020
@kjellr kjellr deleted the add/block-based-2020 branch January 20, 2020 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
block-based theme A theme using HTML templates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants