wordpress / gutenberg-starter-theme

A simple theme for testing Gutenberg.

Gutenberg Starter Theme

The Gutenberg Starter theme is designed to provide a simple, interference-free theme for testing Gutenberg. It uses no editor styles by default, and is built so that its front-end appearance is as close to the editor's default Gutenberg styles as possible.

The theme is primarily intended for use by those developing for and testing Gutenberg, but may also be helpful for those developing themes, or for folks who would like their site to look like Gutenberg in general.

Theme Options

There are a few optional settings available in the Appearance > Theme Options panel added to WP-Admin. Each setting maps to a theme support option offered by Gutenberg:

• Wide alignment. By default, wide and full alignments are active in the theme. This setting provides you the option to turn them off.
• Color palette. The theme provides a limited custom color palette by default. This can be toggled off if you'd like to test the default Gutenberg colors.
• Dark background. Gutenberg provides some alternate UI colors, optimized for themes that use a dark background color. Turning this on will allow you to test those by enabling a dark mode of the theme.
• Block Styles. This option allows you to opt-in or out of having Gutenberg provide some structural CSS for certain blocks on the front end.
• Responsive embedded content. When this is active, embed blocks will automatically reflect the aspect ratio of content that is embedded in an iFrame.

Contributing

Fixes and enhancements for the theme are welcome and encouraged! For more information about contributing, please visit CONTRIBUTING.md.

gutenberg-starter-theme's Issues

Gutenberg Demo broken

Gutenberg's demo post doesn't get displayed as it should, I assume some recent changes broke it?

The custom font is missing, an image and the video is left aligned, as is a button where you can't read the text

Demo broken

As Issue #31 was closed, i open this issue:

The demo is still broken. I've installed the latest WP Version, latest gutenberg plugin and the latest gutenberg-starter-theme. Still the same problems. Font ist not loading correctly, i think also some CSS bugs.

#31

Find a better approach for centering blocks by default

So we don't have to manually center every block by hand. Is there a shared class we can call on?

Strip out anything that isn't a block until it's a block

A list of things to remove:

• Custom header
• Widgets (mostly done)
• Customizer settings (we aren't having a header so don't need)

Alignment of images left or right next to text blocks

Up till today, adding an image and setting it's alignment (Left, Right, Center, None) would cause the text to wrap around as expected.
Adding the alignment to an image block next to a text block does not work as expected.
More info in the comment section of this post:
https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/comment-page-1/#comment-170699

Dan

Adobe Accessible Mega Menu

hey all,

This is more of a "wish list" than an issue.

It would be really nice if the primary navigation could allow users to skip all the sub-links, and arrow from one top link to another. This would mean users who can't use a mouse would save LOTS of tabs. The sub-menus would still need to be available, but the keyboard user wouldn't need to tab through them to get to the next thing.

Adobe Accessible Mega Menu has this:
https://adobe-accessibility.github.io/Accessible-Mega-Menu/

GitHub Edit Button: SVG file is missing

In PR #23 the GitHub edit button was added. The SVG file is not in the repository, it's not shown on the handbook page.

CC: @pento

Resized image Does not display

Versions: WP 4.9.6 | Gutenberg 2.9.2 | GST 1.0.0 | Chrome 66.0.3359.181

This may be a known issue, but the image block is not rendering. Here is my homepage:

Here is the backend:

In playing with this I figured out how to recreate the issue.

1. Add an image block and upload an image or choose from library.
2. Drag one of the corners to resize the image. Any size adjustment seems to cause the issue.
3. Update and view source. The image is there, but something is setting the size to 0x0. It does not appear to be the CSS that is doing this.

I will try to debug this later if I find time, but work is crazy the next couple of weeks...

Twitter embed needs to get in line, too:-)

What I see now:

h5 and h6 span full width

The Heading block popup toolbar only has h2-h4, but the settings panel includes h1-h6. And even if the settings panel removes h5 and h6, it's still valid HTML markup and should be styled appropriately.

Add menus

browser upscaling

This CSS causes browser upscaling.

gutenberg-starter-theme/css/blocks.css

Lines 151 to 153 in 0661152

	.wp-block-image.alignleft,
	.wp-block-image.alignright {
	width: 100%

along with this CSS

gutenberg-starter-theme/css/blocks.css

Lines 160 to 166 in 0661152

	.wp-block-image .alignleft img,
	.wp-block-image .alignright img,
	.wp-block-image .alignleft figcaption,
	.wp-block-image .alignright figcaption {
	max-width: 100%;
	width: 100%;
	}

It is counter to aligning left or right to make the image 100% width.

Search and 404 needs styling

readme.txt inaccurate

If you want to put this in the WP repo, the readme.txt file needs accurate information.

According to https://wpseek.com/pluginfilecheck/ this theme requires WP 4.5, but the whole concept is for Gutenberg, so it probably should be 5.0, but I ran it on 4.9 just fine.

gutenberg-starter-theme/readme.txt

Line 6 in 0661152

Requires at least: 4.0

Also need Requires PHP header.
And the Contributors header should be an actual .org username
and need a description

See https://wordpress.org/plugins/developers/readme-validator/

Enqueue /css/blocks.css with enqueue_block_assets?

Would it make sense to break the enqueuing of the block.css file from enqueuing with wp_enqueue_scripts and enqueue it with enqueue_block_assets instead?

gutenberg-starter-theme/functions.php

Line 142 in b77d211

wp_enqueue_style( 'gutenbergthemeblocks-style', get_template_directory_uri() . '/css/blocks.css');

My thought for this approach is that if people want to apply future block styles and have them visible in the editor, they can add to the block.css file and those styles would automatically show up in the editor and not require them to add another CSS file and enqueue it with enqueue_block_assets.

I realize that this may mess things up if the code for centering non wide and full width blocks goes in this same file [https://github.com//issues/30]. However, maybe this could be moved to the style.css file as a generic styling for the frontend only?

NOTE: I may be completely missing a place where block styles for the frontend and editor would go! :) But figured it would be helpful if it doesn't already exist :)

Addition for post titles once have site title

Left align post titles and drop them down to 2em like in Gutenberg

Modern layouts (CSS grid + flex)

Just opening a ticket here to start the discussion.

Modernize the dev workflow

Hi,
Anyway to modernize the dev workflow ? npm, sass, composer...
Thanks in advance

Wrong condition in header.php for `site-title`

Hi,

Thanks a lot for this theme. I'm forking it for personal purposes, and I found a mistake related to site-title in header.php.

Nothing can meet the condition below:

if ( is_front_page() && is_home() )

Featured Images don't appear, even though the theme supports them.

This is a fairly straightforward issue, but it requires a bit of discussion. The theme declares support for featured images, but does not display them on the front end. I used this theme for a test recently, and this point caused some confusion.

Should we:

1. Remove theme support for featured images?
This makes sense if we're committed to having the front end look just like the backend editor. But I do think it's helpful for people too see where featured images live inside of Gutenberg.

2. Keep it, and add featured images on the front end.
This solves for potential confusion, but it also means that posts on the front end won't look 100% like they do inside of the editor.

3. Keep things the way they are.

Any thoughts?

Not an issue, just an inquiry about Sass functionality?

Just throwing this question.

Any plans on adding the sass functionality and WP Gulp / Gulp functionality?

Instagram embed needs center alignment

What I see right now.

Newbie question

I am trying to install the Gutenberg Starter theme and it says to down load the ZIP file and upload the theme. When I click on download ZIP it isn't downloading as a .ZIP file it is a simple folder named gutenberg-starter-theme-master. I can't select it for upload, it just opens the folder... What am I doing wrong? I looked everywhere for an answer and don't find anything. Thanks in advance!

Two columns gallery doesn't match with other elements width

In editor 2 columns gallery has the exact same width as image inserted alone:

On frontend page view there is a visible width difference on the right side (marked with the red box):

Element "Read more" has no max-width applied, as not displayed as block-element

Hi @WordPress

If I am adding the "Read more" element in Gutenberg, the html-block-element css rules would not be applied on the front end.

This is a snippet from the generated code from the front page listing all posts.

<div class="entry-content">
  <p>Introtext...</p>
  <a href="url/to/post" class="more-link">Continue reading<span class="screen-reader-text"> „Test“</span></a>
</div>

The a-tag gets a max-width, the paddings and the margins. But none of them would be applied as the a-tag by default is not an html-block-element. Probably you should add a specific rule for the .more-link class.

@adriansuter

not identical backend/frontend

Why in this official theme for gutenberg, backend and frontend does not match the view? how developers will make themes compatible with gutenberg, even if this theme is not relevant? because this is the official wodpress repository.

screenshot
screenshot

Add contextual color classes for editor color palette colors

Describe the bug
Colors are not being appropriately rendered on the front-end of core blocks, as they're not defined within the theme's styles.

Expected behavior
The colors (background/color) are applied on the front-end, with the use of proper contextual color classes.

Screenshots

Additional context
From the Gutenberg doc on the editor color palette (link):

Themes are responsible for creating the classes that apply the colors in different contexts. Core blocks use "color" and "background-color" contexts. So to correctly apply "strong magenta" to all contexts of core blocks a theme should implement the following classes:

.has-strong-magenta-background-color {
	background-color: #313131;
}

.has-strong-magenta-color {
	color: #f78da7;
}

Site Editor question

Hello,
does it support the Site editor?
I am clicked Appearence -> Editor and it shows the blank page

Tables need a max-width

Right now they default to 100%:

Add site title and description

Block color palette names should be translatable

With the addition of slugs, we can now have translatable names for each color defined in the editor-color-palette.

Here's the info on color palettes from the Gutenberg repo.

Blockquotes need to be styled

Should be styled like Gutenberg: