Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

Testing Gutenberg front-end

This is first draft what is happening in the front-end when you writen with Gutenberg.

Check the demo page.

Headings

  • Nothing special here.
  • You can set alignment to left, center, or right.
  • Output is inline styles.
  • Same as current editor.

<h2>This is heading</h2> or with inline style <h2 style="text-align:center">This is heading</h2>.

Paragraps

  • You can set alignment to left, center, or right.
  • Output is inline styles.
<p>This is normal paragraph. We know this is the Gutenberg, and we are testing it!</p>

Or with inline style:

<p style="text-align:center">This is centered paragraph. We know this is the Gutenberg, and we are testing it!</p>

But we can also apply several settings to paragraph:

  • Drop Cap.
  • Background color.
  • Text color.
  • Block alignment.

Markup:

<p style="background-color:#eee;font-size:28px;text-align:left" class="has-background has-drop-cap">
This is styled paragraph. We <a href="https://foxnet.fi">know</a> this is the Gutenberg, and we are testing it!
</p>

CSS:

p.has-drop-cap {
	&:first-letter {
		float: left;
		font-size: 4.1em;
		line-height: 0.7;
		font-family: serif;
		font-weight: bold;
		margin: .07em .23em 0 0;
		text-transform: uppercase;
		font-style: normal;
	}
}

p.has-drop-cap:not( :focus )  {
	overflow: hidden;
}

p.has-background {
	padding: 20px 30px;
}

conclusion: Seems OK by me.

Images

  • There are some changes in the markup compared to current editor.

Gutenberg Markup:

<figure class="wp-block-image">
	<img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2-1024x614.jpg" alt="Eating healthy">
</figure>

Old Markup:

<p>
	<img src="URL" alt="Eating healthy">
</p>

Gutenberg Markup with caption:

<figure class="wp-block-image">
	<img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2.jpg" alt="">
	<figcaption>
		This is <a href="http://wordpress-svn/src/">caption</a>
	</figcaption>
</figure>

Old Markup with caption:

<figure id="attachment_6431" style="width: 1024px" class="wp-caption alignnone">
	<img class="wp-image-6431 size-large" src="URL" alt="Array Themes are ok" width="1024" height="907" srcset="stuff in here">
	<figcaption class="wp-caption-text">Array Themes are more than Okay</figcaption>
</figure>
  • Markup is semantic HTML5, which is nice.
  • But in old editor markup without caption is with </p> tags like this <p><img scr="URL"></p>. This might potentially have small design issues.
  • Gutenberg also uses different classes for <figure> and <figcaption> so old styles won't work.
  • Caption color #8f98a1 has too low color contrast even on white.
  • Gutenberg doesn't use srcset for responsive images.
  • Old editor also used several classes like wp-image-{ID} size-large.

Galleries

Gutenberg Markup:

<div class="wp-block-gallery alignnone columns-3 is-cropped">
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/espresso-2.jpg" alt="Alt text" data-id="28"></figure>
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/coffee-2.jpg" alt="" data-id="30"></figure>
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2017/03/sandwich-2.jpg" alt="" data-id="29"></figure>
	<figure class="blocks-gallery-image"><img src="http://wordpress-svn/src/wp-content/uploads/2013/03/unicorn-wallpaper.jpg" alt="Unicorn Wallpaper" data-id="1045"></figure>
</div>

Old markup:

<div id="gallery-1" class="gallery galleryid-1976 gallery-columns-3 gallery-size-thumbnail">
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<img width="150" height="150" src="URL" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-1-29" srcset="stuff" sizes="100vw">
		</div>
		<figcaption class="wp-caption-text gallery-caption" id="gallery-1-29">
			This is caption
		</figcaption>
	</figure>
	
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<img width="150" height="150" src="URL" class="attachment-thumbnail size-thumbnail" alt="" srcset="stuff" sizes="100vw">
		</div>
	</figure>

</div>
  • Pretty much the same comments as in images.
  • Markup and classes are changing a little which means new Galleries styles are Gutenberg-looking and old galleries are theme-looking.

Quotes

Markup:

<blockquote class="wp-block-quote blocks-quote-style-1">
	<p>This is quote with nothing to say</p>
	<footer>From Xami K.</footer>
</blockquote>
  • I'm not sure should <cite> be used here.
  • Many themes already have styles for blockquote so there will be overlapping with styles.
  • There could be add_theme_support for blockquote, and after that you could see option to set two different styling.

Lists

These are pure HTML without CSS classes.

Cover image

Markup:

<section class="wp-block-cover-image has-background-dim" style="background-image:url(http://wordpress-svn/src/wp-content/uploads/2017/09/abc.jpg)">
	<h2>Donate NowWe need you</h2>
</section>
  • I think <section> is OK here since there is <h2>.
  • At the moment you can't change the dim or text color in the block settings.
  • Without the dim color there is big risk for color contrast issues.
  • You can align (left, center, right) cover image but it doesn't have effect in the front end.
  • With add_theme_support( 'gutenberg', array( 'wide-images' => true ) ) I'd actually like the cover image behave like regular image (wide image, full width image). But there are no classes for that. See issue 2650.

Video and audio

Video markup:

<figure class="wp-block-video">
	<video controls="" src="http://wordpress-svn/src/wp-content/uploads/2013/12/2014-slider-mobile-behavior.mov"></video>
	<figcaption>Video caption</figcaption>
</figure>

Audio markup:

<div class="wp-block-audio">
	<audio controls="" src="http://wordpress-svn/src/wp-content/uploads/2012/07/originaldixielandjazzbandwithalbernard-stlouisblues.mp3"></audio>
</div>
  • I wonder why audio uses <div> but not <figure>.

Pull quote

Markup:

<blockquote class="wp-block-pullquote alignleft">
	<p>Left pullquote</p>
	<footer>Caption this is</footer>
</blockquote>
  • Similar issues than regular blockquotes.

Tables

Markup:

<table class="wp-block-table">
	<tr>
		<td>First name</td>
		<td>Last name</td>
	</tr>
	<tr>
		<td>Xami</td>
		<td>Gello</td>
	</tr>
	<tr>
		<td>Zanna</td>
		<td>Petronen</td>
	</tr>
</table>
  • You can't put caption or <th> elements.
  • That's accessibility issue.

CSS:

.wp-block-table {
	overflow-x: auto;
	display: block;

	table {
		border-collapse: collapse;
		width: 100%;
	}
}
  • CSS seems odd, why there is display: block which is messing the theme styles?
  • Also there is no .wp-block-table table element.

Pre-formatted and code

Markup:

<pre class="wp-block-preformatted">Is this pre-formatted</pre>
<pre class="wp-block-code"><code>h2 {
   color: #000; // This is code.
}</code></pre>
  • Seems OK by me.
  • No styles in the front end which is good.

Custom HTML

This can have any markup you want. Nice.

Classic text

Classic text seem to have more options like the old editor inside one block. Nice.

Verse block

Markup:

<pre class="wp-block-verse">Verse? What the heck is Verse?</pre>

Isn't this the same as pre-formatted with different class?

Separator

Markup:

<hr class="wp-block-separator">

CSS:

.wp-block-separator {
	border: none;
	border-bottom: 2px solid $dark-gray-100;
	max-width: 100px;
	margin: 1em auto;
}

Many themes have styles for <hr> so this will have small styling issues with many themes.

Buttons

Markup:

<div class="wp-block-button alignnone"><a href="http://wordpress-svn/src/">This is button</a></div>

Markup with background-color:

<div class="wp-block-button aligncenter" style="background-color:#cf2e2e"><a href="#">Modified button</a></div>
  • aligncenter doesn't have any effect.
  • I'd like to propose a little different markup and put styles to <a> element.
<p class="wp-block-button aligncenter"><a href="#" style="background-color:#cf2e2e">Modified button</a></p>
  • This is how we do links-look-like-a-buttons right now by adding class to <a> element: <a class="button">This is link like a button</a>
  • Naturally CSS would change also.
  • Doesn't have to be <p> but that would have margin-bottom already in place for all themes.

Text columns

Markup:

<section class="wp-block-text-columns alignundefined columns-2">
	<div class="wp-block-column">
		<p>Cras vel nunc auctor massa iaculis scelerisque in semper libero. Pellentesque tincidunt auctor egestas. Quisque a ligula vehicula, condimentum dui pretium, imperdiet erat. Aliquam molestie nisi a metus rhoncus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</div>
	<div class="wp-block-column">
		<p>Cras vel nunc auctor massa iaculis scelerisque in semper libero. Pellentesque tincidunt auctor egestas. Quisque a ligula vehicula, condimentum dui pretium, imperdiet erat. Aliquam molestie nisi a metus rhoncus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
	</div>
</section>
  • I'm not sure is the <section> correct here since there is no heading inside it and it's just for styling the grid.
  • Grid is not responsive. I'd even go that far that we use CSS Grid here with solid flexbox markup.

Latest posts

  • Markup is just a list as it should be.
  • With Grid mode we could use similar idea than in text columns.

Gategories block

This have extra <div> element around <ul> or <select>. For example:

<div class="wp-block-categories wp-block-categories-dropdown aligncenter">
	<select>
		<option></option>
		<option></option>
		<option></option>
	</select>
</div>

Embeds

All embeds have similar markup like this:

<figure class="wp-block-embed-twitter">
	Markup for embed itself
</figure>
  • It might be a good idea to have general class wp-block-embed for all embeds.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment