Blog

Teaching Gutenberg

Women Who WP: We’re Learning Gutenberg

Bridget gives a tour of Gutenberg to the Women Who WP Meetup at Mimi's in Fountain Valley, California. Thanks DreamHost for sponsoring dinner.

Innovate and Iterate – Encourage and Educate

We’re always growing and changing and evolving. As we better ourselves, the community gets better and vice versa. Life imitates art. Art imitates life. And tech is no different. Last year at WordCamp Europe, Gutenberg was announced as an editor replacement. In the final phase, it will be much more than that but as of now, it will be an editor replacement in WordPress 5.0.

“Gutenberg has three planned stages. The first, aimed for inclusion in WordPress 5.0, focuses on the post editing experience and the implementation of blocks. This initial phase focuses on a content-first approach. The use of blocks, as detailed above, allows you to focus on how your content will look without the distraction of other configuration options. This ultimately will help all users present their content in a way that is engaging, direct, and visual.

These foundational elements will pave the way for stages two and three, planned for the next year, to go beyond the post into page templates and ultimately, full site customization.” https://wordpress.org/plugins/gutenberg/

What is Gutenberg?

Gutenberg, eventually will change how you interact with WordPress but in it's first inclusion into Core, will be a new editor experience.

Blocks Replace Meta Boxes

Instead of meta boxes, you interact with your content in blocks. Contextual Enhancements.

This means every block has its own control. Every plugin can create settings for their blocks.

"Gutenberg tries to identify all of these types of content properties so we can control it. It's all based on blocks and block context." Morten Rand-Hendriksen

Uncategorized

Women Who WP: We’re Learning Gutenberg

Innovate and Iterate – Encourage and Educate

We’re always growing and changing and evolving. As we better ourselves, the community gets better and vice versa. Life imitates art. Art imitates life. And tech is no different.
Last year at WordCamp Europe, Gutenberg was announced as an editor replacement. In the final phase, it will be much more than that but as of now, it will be an editor replacement in WordPress 5.0.

“Gutenberg has three planned stages. The first, aimed for inclusion in WordPress 5.0, focuses on the post editing experience and the implementation of blocks. This initial phase focuses on a content-first approach. The use of blocks, as detailed above, allows you to focus on how your content will look without the distraction of other configuration options. This ultimately will help all users present their content in a way that is engaging, direct, and visual.

These foundational elements will pave the way for stages two and three, planned for the next year, to go beyond the post into page templates and ultimately, full site customization.” https://wordpress.org/plugins/gutenberg/

In this presentation, Bridget Willard goes over some key features and builds a blog post live for Women Who WP 1/17/18. https://www.meetup.com/OC-Wordpress-Group/events/244337019/

What is Gutenberg?

Gutenberg, eventually will change how you interact with WordPress but in it’s first inclusion into Core, will be a new editor experience.

Blocks Replace Meta Boxes

Instead of meta boxes, you interact with your content in blocks.
Contextual Enhancements.

This means every block has its own control. Every plugin can create settings for their blocks.

“Gutenberg tries to identify all of these types of content properties so we can control it. It’s all based on blocks and block context.” Morten Rand-Hendriksen

GitHub Issue for Gutenberg

Gutenberg oEmbed Support While Writing Content

GitHub Issue #4404

oEmbed support for Gutenberg is an important functionality because writers like myself often compose text and then enter Tweets, Instagram Posts, and YouTube video links to support the text.

Issue Overview

Embedding Tweets, and other links through oEmbed without Gutenberg is an ease. Instead of just pasting a Twitter URL on a hard break on my page, I had to choose a Twitter embed block and enter the url of the tweet, to show my tweet. That is a significant impact to my workflow as a content creator.

It seems like a small thing but one of the reasons why this matters is that writers like myself often compose text and then enter Tweets, Instagram Posts, and YouTube video links to support the text.

When I ran a Twitter chat, I posted a recap with 5 embedded Tweets with each question (7-10 questions). With the demise of Storify, it's even more important that we, as WordPress get this right.

Matías asked me to open an issue.

Steps to Reproduce (for bugs)

Instead of just pasting a Twitter URL on a hard break on my page, I had to choose a Twitter embed block and enter the url of the tweet, to show my tweet. This behavior is on my home page of gutenbridget.com !

screen shot 2017-12-15 at 10 50 35 am

Expected Behavior

I expected to paste in the link, press enter, and keep typing and the tweet to render as it does now in WordPress. 

Current Behavior

Currently, I had to choose an embed block, paste the link, and then start a new paragraph block for the rest of the article I was composing. 

Possible Solution

I wish I knew what the possible solution was. Thanks for your time and attention.

Testing a new block with text as if I am really writing the way I do when I create blog posts. Then I press return and CTRL + V to paste link.

And that is when the oEmbed doesn't work. 

Updating GitHub with this Record.it Gif. 1/4/18.

GitHub Issue for Gutenberg

Gutenberg and Open Graph Data – Conflict

This is submitted to Github #4030.

Issue Closed 12/15/17 – Appears to be working.

Issue Overview

This site is currently using the Bookmark Theme, Gutenberg, and Yoast.

I have tried to pull the correct open graph data for social sharing on both Facebook's Object Debugger and with Twitter's Card Validator tools for my home page. 

For the record, it works on a blog post (like this one).

Steps to Reproduce

On the published page, the source shows that og:image is correct which is the featured image I chose for the page at gutenbridget.com (home page).

og-image-featured-image-code-121417

Expected Behavior

Given that the code is in view source, I would expect that Facebook could scrape this data. 

Current Behavior

The Card Validator and Object Debugger show the screenshot and is also not pulling the meta data from Yoast.

twitter-card-validator-unable-to-read-card
fb-objectdebugger-og-image-121417
fb-objectdebugger-meta-121417

Possible Solution

With all of my being I wish I knew enough code to offer a possible solution. But it's an error that matters to anyone who publishes, so I thought it was worth bringing up. Thank you so much for your attention.

As an aside, I copied this entire thread from Github and Gutenberg perfectly made blocks and images. That, my friends, is quite impressive. Way to go GTeam!

This issue seems to be resolved. I closed the ticket.