automattic / default-small-business-theme

Default Small Business Theme

This theme is designed to showcase what Gutenberg can do with regards to themes. It is intended as a work in progress, at least until v1 of the new editor (and maybe beyond).

Block focused

If something isn't a block yet, this theme will not have it. As each block happens, the theme will gain that functionality.

Styling just like Gutenberg

The idea of the default look for this theme is to as closely replicate that of the Gutenberg editor output as possible. As a result the focus is on that styling not creating a new look.. yet. As things grow, we may have styles and go further into what the theme can have... who knows.

default-small-business-theme's Issues

Editor Styles: media+text block padding doesn't match front-end

When using the Gutenberg editor and Business theme, the whitespace between image and content doesn't match the front-end. This doesn't exist in Radcliffe, with the same content.

Editor:

Front-end:

Change editor font enqueue from inline to an action hook

While poking around in the editor styles, I noticed that external font resources are being enqueued via @import from editor.css. A better, more portable solution, would be to enqueue it in functions.php via similar code:

/**
 * Gutenberg Editor Styles
 */
function business_theme_editor_styles() {
	wp_enqueue_style( 'business-theme-fonts', business_theme_fonts_url() );
	wp_enqueue_style( 'business-theme-editor-block-style', get_template_directory_uri() . '/editor.css' );
}
add_action( 'enqueue_block_editor_assets', 'business_theme_editor_styles' );

That should enqueue any external font resources that were defined in business_theme_fonts_url()

Editor Styles: cover image block doesn't show full-alignment

When the cover image block is "full width", it displays as left-aligned and ~60% width in the editor.

Editor Styles: core media+text block overflow issues

When adding text to the core Media+Text block, the text has a min-width that causes it to not wrap and flow off of the page.

Create Menu UI for desktop and mobile

Desktop

Add a responsive menu UI. On desktop it may need to use a priority+ display so that the links always stay on one line.

Desktop with dropdown:

Mobile

Ideally the menu should be positioned at the bottom of the UI on mobile

Editor Styles: font size inside nested elements is too small/not accurate

When using the Gutenberg editor and Business theme, text inserted into a wrapper component (i.e. columns) is rendered very small and doesn't match the front-end.

Style all Core Gutenberg Blocks

All core blocks need to be styled for both the front end and the editor

Editor styles: Classic Block - Insert Tag incorrect styling

The <ins> tag styling isn't matching the front end.

I have noticed this discrepancy while reviewing the Business editor styles rewrite PR.

This is happening in the Gutenberg: Classic Block post from the gutenberg-test-data.

Editor Styles: block boundaries overlap

When using the Gutenberg editor with the Business theme, block boundaries overlap each other, making some blocks (especially wrapper blocks like columns) almost impossible to select.

Create SASS file structure.

Create and setup the SASS file structure.

Option to hide homepage title - issues roundup.

I did some testing of this feature before deploying, and found some minor issues:

• I'm seeing a space above the cover image, when it's the first element on the page
  
  In general the space should not be there, if the first element of the content is an image, gallery, cover, or video.

• If a page created with classic editor is used, there is not space above the first element
  

• I was wondering if we should change the option name from "Hide Front Page Title" to "Hide homepage Title", since in the select above it, it's called "Homepage"

cc @crunnells

"Cover Image" block renamed to "Cover"

The Cover image block was renamed to just "Cover", and all the classes with it. So .wp-block-cover-image is now just .wp-block-cover, and .wp-block-cover-image-text is now .wp-block-cover-text.

Editor styles: Classic Block - nested list style type discrepancy

The list-style-type for the 3rd level items in the nested list aren't matching the front end.

I have noticed this discrepancy while reviewing the Business editor styles rewrite PR.

This is happening in the Gutenberg: Classic Block post from the gutenberg-test-data.

Add Option to Hide Home Page/Front Page Title

After talking to @ianstewart, @fditrapani, @michaeldcain and @davemart-in, we decided we needed the flexibility hide the home page/front page title on a site. This allows the customer more design flexibility.

We'd want to do this in a theme option, but we could put that setting in the Homepage Settings of the Customizer. This title would just be hidden off screen visually so as to not impact SEO or accessibility.

If we do that, there is potentially some CSS we'd want to adjust. See this video from @davemart-in: https://cl.ly/07f9d07ad8f4

cc: @alaczek

Editor styles: Classic Block - table not clearing

In the editor, the table isn't clearing correctly.

I have noticed this discrepancy while reviewing the Business editor styles rewrite PR.

This is happening in the Gutenberg: Classic Block post from the gutenberg-test-data.

Editor styles: Redundant enqueuing of editor styles

I mentioned this during Business Elegant's review, but right now the editor styles are enqueued two different ways into the new block editor:

This method is standard, and I think a bit more predictable: https://github.com/Automattic/default-small-business-theme/blob/master/functions.php#L192-L199 It links the stylesheet, as is, to the page.

This method is actually intended for existing TinyMCE stylesheets in older themes (like Twenty Seventeen): https://github.com/Automattic/default-small-business-theme/blob/master/functions.php#L75-L76 So it's basically expecting stylesheets that only reference HTML elements (h1, table), and maybe some classes like .gallery.

The second method embeds the styles in the head of the page, prefixed with the class .editor-styles-wrapper. This makes these styles a lot more "powerful" and overridy than they would be enqueued in the first method. Because of that, when this is updated some careful testing will be needed, to make sure those styles still work as expected.