Try: A block-based version of Mayland #2802

kjellr · 2020-11-11T16:45:51Z

This PR is the beginnings of a block-based version of Mayland.

The social icons block has colored icons for now — we could add a theme-specific block style to take care of that though.
Post meta blocks can't currently be placed inline, so the single line of post meta blocks isn't possible right now. For now I've included only the post date, and filed Allow post meta to be arranged inline WordPress/gutenberg#26899.
Comments look unstyled — these blocks don't provide styles, but they should. I filed some issues for that yesterday: Post Comments Block: Provide default styles WordPress/gutenberg#26864 and Post Comments Form Block: Block should ship with default styles WordPress/gutenberg#26865.
There are a number of small spacing/style issues that don't match up exactly with the original theme, but I expect we could sort those out.

Screenshots

Original	Block-based

Original	Block-based

Original	Block-based

jffng

In general this LGTM.

I tested this on 9.3 (the latest plugin release as of this review) and the font families are not transformed nor applied.

As of 9.4.0rc1, the font families work but the template parts aren't loading in the site editor:

MaggieCabrera · 2020-11-18T11:19:46Z

I do see header and footer on 9.3.0 but not the fonts 😃

kjellr · 2020-11-18T14:11:36Z

Yeah, I think the template parts issue is a 9.4 bug. Filed here.

kjellr · 2021-02-01T14:51:10Z

This has been dormant for a while, so here's a fresh set of things that it needs:

Reformat theme.json to the new spec.
Remove theme slugs in templates.
Consider removing the spacing overrides in style.css.
Add query pagination.
Double check that comments are working.

cc @scruffian

MaggieCabrera · 2021-02-15T14:03:23Z

I've worked a bit on this theme. One of the things I found was that when adding the Next/Previous links to a single post template I was not able to make the "Previous/Next post" text a link to the post just using the block. The final result of the block will require some extra CSS to make it fit the design of the theme as well (I haven't added it yet but I plan to do so unless there are any objections to that)

Original	Block-Based

scruffian · 2021-02-15T14:59:15Z

I feel like that's a pretty common pattern so should be added to the editor

kjellr · 2021-02-15T20:57:52Z

Yeah, I agree — that should be a variation for the core block. If we do decide to build it in here, I suggest we do it as a block style maybe?

MaggieCabrera · 2021-02-16T11:23:33Z

Yeah, I agree — that should be a variation for the core block. If we do decide to build it in here, I suggest we do it as a block style maybe?

I'm not sure if a block style is the best idea here since turning off the block style would make it look not so great. I'd say it's best if it's just styled by the theme (I'm talking in terms of just the font sizes and positioning of the links). Hopefully, the block will allow for more styling in the future too.

Besides, the issue with the "Previous/Next post" not being a link to the post too can't be solved by a block style either. I opened an issue for the block, which is also a very very new block to be using, so I suppose it will only improve with time (and our contributions, ofc): WordPress/gutenberg#29032

kjellr · 2021-02-16T14:18:33Z

If it doesn't exist the way we need it to yet, I'd suggest we just leave that post pagination out of the theme and open a ticket to add it later.

MaggieCabrera · 2021-02-16T18:11:26Z

I added the issue for the post pagination here and removed the block for the moment

MaggieCabrera · 2021-02-16T18:20:43Z

For reference: this Gutenberg issue holds the discussion for implementing letter spacing controls on FSE

scruffian · 2021-02-26T10:04:07Z

mayland-blocks/functions.php

+ */
+function mayland_blocks_scripts() {
+	// Enqueue front-end styles.
+	wp_enqueue_style( 'mayland-blocks-styles', get_template_directory_uri() . '/style.css' );


Do we need this line? I thought this file was enqueued by default. Also we could just use get_stylesheet_uri...

Apparently we do, if I remove it it doesn't load automatically

mayland-blocks/functions.php

scruffian · 2021-02-26T10:04:49Z

mayland-blocks/style.css

+
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;


This feels like it should be part of Gutenberg

Not sure if every theme will want to have this on their stylesheet, feels like something we want for this specific font family.

What is under /* Set editor widths. */ would be something we'd be able to remove once the alignment PR lands most likely.
The rest of the styles (header spacing and letter spacing) are dependant on WordPress/gutenberg#23294 and WordPress/gutenberg#23228 respectively

mayland-blocks/style.css

scruffian

This looks good. I think everything in style.css should be in Gutenberg somehow, so it would be good to have issues for it if there aren't already.

MaggieCabrera · 2021-02-26T14:46:01Z

This is a list of the editor issues that are affecting this theme:

Navigation block: Add a way to control spacing Navigation block: Add a way to control spacing WordPress/gutenberg#23294
Site Title: A few styling option ideas Site Title: A few styling option ideas WordPress/gutenberg#23228
Rethink FSE alignments Add a layout config to the group and theme.json and make alignments declarative WordPress/gutenberg#29335
[Block: Post Navigation Link] Add the ability to have both the text title and the label be a part of the link [Block: Post Navigation Link] Add the ability to have both the text title and the label be a part of the link WordPress/gutenberg#29032
Post Comments Form Block: Block should ship with default styles Post Comments Form Block: Block should ship with default styles WordPress/gutenberg#26865
Post Comments Block: Provide default styles Post Comments Block: Provide default styles WordPress/gutenberg#26864
Allow post meta to be arranged inline Allow post meta to be arranged inline WordPress/gutenberg#26899

mayland-blocks/assets/alignments.css

danieldudzic

I didn't find any blockers for the launch :)

Just a few issues with the frontend styling:

Layout Grid columns are displaying one under another
Screenshots: https://cldup.com/BwY5yx1W2S.png / https://cldup.com/cnI7FwSEtZ.png
Button styling issue
Screenshots: https://cldup.com/oHi6rbHij4.png / https://cldup.com/B7j0OfyOyZ.png
Contact form missing styling: https://cldup.com/BZUulYROfK.png

MaggieCabrera · 2021-02-26T16:07:34Z

I didn't find any blockers for the launch :)

Just a few issues with the frontend styling:

Looks like some of those are Jetpack blocks causing issues. I didn't see problems with the Button Block on my testing, though.

These issues will be easier to test and report on once the theme is on wpcom.

kjellr requested a review from a team November 11, 2020 16:45

kjellr self-assigned this Nov 11, 2020

jffng reviewed Nov 17, 2020

View reviewed changes

jffng mentioned this pull request Nov 18, 2020

Template parts do not load in the full-site editor. WordPress/gutenberg#27072

Closed

scruffian unassigned kjellr Feb 1, 2021

MaggieCabrera force-pushed the try/mayland-blocks branch from ea5d99f to 4286238 Compare February 15, 2021 09:38

scruffian reviewed Feb 26, 2021

View reviewed changes

mayland-blocks/functions.php Outdated Show resolved Hide resolved

scruffian reviewed Feb 26, 2021

View reviewed changes

mayland-blocks/style.css Show resolved Hide resolved

scruffian approved these changes Feb 26, 2021

View reviewed changes

pbking reviewed Feb 26, 2021

View reviewed changes

mayland-blocks/assets/alignments.css Outdated Show resolved Hide resolved

danieldudzic self-requested a review February 26, 2021 15:09

danieldudzic reviewed Feb 26, 2021

View reviewed changes

kjellr added 4 commits February 26, 2021 17:15

Add Mayland Blocks

6efc207

Cleanup

74ab44e

More cleanup.

b3f1156

Adjust homepage template.

1a28531

MaggieCabrera added 11 commits February 26, 2021 17:15

updated theme.json to fit new structure

92249d5

removed theme slug from templates

69f81ea

added root element to theme.json

61d7826

next/Previous blocks on single page

7cd6a6e

show title on next post

2d47632

removed post navigation links for the moment

16f854f

fixed format of theme.json, changed color of social links

fca7ef5

changed stylesheet enqueue route

97904b8

changed alignments.css enqueue route

98ceac0

simplified heading selectors

d54b035

fixes to alignment styles

09dbe87

MaggieCabrera force-pushed the try/mayland-blocks branch from f6ca1eb to 09dbe87 Compare February 26, 2021 16:15

MaggieCabrera merged commit 0196fe5 into trunk Feb 26, 2021

MaggieCabrera deleted the try/mayland-blocks branch February 26, 2021 16:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: A block-based version of Mayland #2802

Try: A block-based version of Mayland #2802

kjellr commented Nov 11, 2020

jffng left a comment

MaggieCabrera commented Nov 18, 2020

kjellr commented Nov 18, 2020 •

edited

Loading

kjellr commented Feb 1, 2021 •

edited by MaggieCabrera

Loading

MaggieCabrera commented Feb 15, 2021

scruffian commented Feb 15, 2021

kjellr commented Feb 15, 2021

MaggieCabrera commented Feb 16, 2021

kjellr commented Feb 16, 2021

MaggieCabrera commented Feb 16, 2021

MaggieCabrera commented Feb 16, 2021 •

edited

Loading

scruffian Feb 26, 2021

MaggieCabrera Feb 26, 2021

scruffian Feb 26, 2021

MaggieCabrera Feb 26, 2021

scruffian left a comment

MaggieCabrera commented Feb 26, 2021

danieldudzic left a comment

MaggieCabrera commented Feb 26, 2021

Try: A block-based version of Mayland #2802

Try: A block-based version of Mayland #2802

Conversation

kjellr commented Nov 11, 2020

Screenshots

jffng left a comment

Choose a reason for hiding this comment

MaggieCabrera commented Nov 18, 2020

kjellr commented Nov 18, 2020 • edited Loading

kjellr commented Feb 1, 2021 • edited by MaggieCabrera Loading

MaggieCabrera commented Feb 15, 2021

scruffian commented Feb 15, 2021

kjellr commented Feb 15, 2021

MaggieCabrera commented Feb 16, 2021

kjellr commented Feb 16, 2021

MaggieCabrera commented Feb 16, 2021

MaggieCabrera commented Feb 16, 2021 • edited Loading

scruffian Feb 26, 2021

Choose a reason for hiding this comment

MaggieCabrera Feb 26, 2021

Choose a reason for hiding this comment

scruffian Feb 26, 2021

Choose a reason for hiding this comment

MaggieCabrera Feb 26, 2021

Choose a reason for hiding this comment

scruffian left a comment

Choose a reason for hiding this comment

MaggieCabrera commented Feb 26, 2021

danieldudzic left a comment

Choose a reason for hiding this comment

MaggieCabrera commented Feb 26, 2021

kjellr commented Nov 18, 2020 •

edited

Loading

kjellr commented Feb 1, 2021 •

edited by MaggieCabrera

Loading

MaggieCabrera commented Feb 16, 2021 •

edited

Loading