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

Twenty Nineteen as a Block-based Theme #4

Merged
merged 19 commits into from Jan 20, 2020
Merged

Twenty Nineteen as a Block-based Theme #4

merged 19 commits into from Jan 20, 2020

Conversation

@kjellr
Copy link
Collaborator

kjellr commented Jan 10, 2020

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:

Screen Shot 2020-01-10 at 13 52 03

Screen Shot 2020-01-10 at 13 53 53

Screen Shot 2020-01-10 at 13 54 01

@kjellr kjellr self-assigned this Jan 10, 2020
@kjellr kjellr changed the title Twenty Nineteen as a Block Based Theme Twenty Nineteen as a Block-based Theme Jan 10, 2020
@kjellr kjellr requested review from allancole and jffng Jan 10, 2020
Copy link
Collaborator

jffng left a comment

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

This comment has been minimized.

Copy link
Collaborator Author

kjellr commented Jan 13, 2020

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 added 4 commits Jan 13, 2020
@kjellr

This comment has been minimized.

Copy link
Collaborator Author

kjellr commented Jan 13, 2020

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

This comment has been minimized.

Copy link
Collaborator Author

kjellr commented Jan 20, 2020

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. 👍

@kjellr kjellr requested a review from jffng Jan 20, 2020
@jffng
jffng approved these changes Jan 20, 2020
Copy link
Collaborator

jffng left a comment

Works for me!

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

Screen Shot 2020-01-20 at 3 13 35 PM

I think we can merge it and iterate as desired.

@kjellr

This comment has been minimized.

Copy link
Collaborator Author

kjellr commented Jan 20, 2020

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!

@kjellr kjellr merged commit ddc7f8b into master Jan 20, 2020
@kjellr kjellr deleted the twentynineteen-blocks branch Jan 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.