Gutenberg: Starting out blank or with selecting a template layout.

[paaljoachim]

Brainstorming...
Today starting out blank looks like this (I have an active SEO plugin so that the meta boxes show up below):

Meta boxes really should stick/be fixed to the bottom and there should be more space between the meta boxes border line and the block layout area.

--

Clicking into the "Write your story" block (line) and then clicking somewhere else the block looks like this:

So the initial writing block first has the text:
"Write your story". As one has clicked into it and out again it changes to "Add text or type / to add content".

---

Another option when starting could be to see a template gallery of thumbnail previews of post/page templates to begin with.

Perhaps something similar to this wireframe:

Creating templates.
Create post/page layouts and save them as a template to be added to the initial starter design area for a new post/page. Plus have a way to load in a full template into an existing post/page. Either having it overwrite or added to an existing layout.

(I will add on to this issue when additional things come up.)

[paaljoachim]

Additional wireframes where I also include a blank template.

[jasmussen]

CC: @melchoyce

[melchoyce]

Hey, I totally agree @paaljoachim! This is one of the first features we have planned for the Customization phase of Gutenberg. We'll be posting up some more information soon.

[karmatosed]

I am closing this as it's planned as part of Customization and there would be a new issue for this along with that with @melchoyce's solution and in phase two. Thanks everyone.

[paaljoachim]

I have continued some exploration in regards to mainly starter layouts. (But it can also be used along the way in the middle of creating a page/post.)

1. User creates a new page/post.
2. Goes to the Layout section top right.
   First option would be select layout - drop down - with these drop down options:
   Template - user selects it and a modul (?) shows up on the left showing already saved templates.

Layout Structure - user selects it and it shows up on the left showing structure.

Reusable blocks - user selects is and it shows up on the left.

As the modul (?) is open on the left the user can easily click to go to the other layout options (template, layout structure and reusable blocks.)

There can also be a save button to where the user can save page/post as a template.
Select one or more empty blocks and save as a structure.
(similar to saving empty reusable blocks).

Select one or more content added blocks and save as reusable blocks.

The reasoning for doing it this way is that it keeps different types of layouts in one area. User can
begin to get used to the various options in one place.

[melchoyce]

I did some explorations into page layouts last year that could potentially serve as inspiration for future iterations:

(Mobile mockups: https://cloudup.com/cqfTCSlAjCN)

I put together a prototype as well that I ran a couple user tests on: https://marvelapp.com/7fb3074/screen/38364413

The layout picker, like everything else in Gutenberg, is a block. It consists of a couple elements:

• Block title / description.
• Tabs for categorizing layout types (styled after the block inserter).
  
  
  
  • These are theme-defined.
  
  
  • When you only have a couple layouts (let’s say, <5), the tabs don’t appear.
  
  
  • If there aren’t any categorized layouts, the tabs don’t appear.
  
  
• A list of available page layouts.
  
  
  
  • The layout graphics should be automatically generated based on the blocks included in them.
  
  
  • Images are grey boxes, text is darker grey lines, buttons are blue, etc. We should abstract out everything into simple shapes.
  
  
• Finally, the layout itself.
  
  
  
  • In these mockups, you can see theme styles applied to Gutenberg. If theme styles aren’t declared, blocks would fall back to generic Gutenberg styles.
  
  
  • You might also notice the global elements on the page — in this case, the site logo, navigation, and footer. These exist for presentation, but are not editable in this first version of layouts. They uneditable and displayed at 40% opacity.
  
  

I also explored what it would look like to change your page layout: https://wp.invisionapp.com/share/M5JCEDX3GKJ

I think we've evolved beyond these initial concepts, but I'm hoping they're still relevant to the conversation.

[jasmussen]

Really dig the thoughts here. Your mockups, Mel, are incredibly helpful in shaping thoughts.

One of the things that keep me up at night these days, is the idea of the _full editor_. That is, the entire page in the editor is comprised of blocks. The Header is a block, the Sidebar is a block, Post Content is a block, Footer is a block. Most importantly, a Page Template lists _all_ those blocks as part of the layout.

I can't quite divine whether your mockup shows the page template picker as a modal covering the page editor, or whether it's supposed to show the template picker "inline" with the header and footer above and below it. In any case, for a full editor it would be nice to include both the header and footer in the actual template itself. This would also make it trivial to create those popular "no sidebar" templates. Simply don't include that block in the template.

I keep coming back to Polygon.com as a good example of a rich website, where this review is very much your standard post layout, whereas https://www.polygon.com/a/ps4-review is a completely different beast. But both are just posts. By leveraging the _full editor_ and _everything is a block_ mentality, both can easily be accomplished and intuitively edited through post templates.

[paaljoachim]

Just adding this in here:
Here is a template test made by @jeremyfelt
https://twitter.com/jeremyfelt/status/1075932152422756353

Another that adds more complex blocks. It could perhaps also inspire template creation: https://github.com/WordPress/gutenberg/issues/6993

[Soean]

Full Site Editing from Automattic

WP Tavern article: https://wptavern.com/automattic-is-testing-an-experimental-full-site-editing-plugin
Plugin on WP.org: https://wordpress.org/plugins/full-site-editing

[paaljoachim]

Calypso related full site editing issues:
https://github.com/Automattic/wp-calypso/labels/%5BGoal%5D%20Full%20Site%20Editing