fbpx
  REQUEST A FREE CONSULTATION
Supercharge your SEO! Subscribe to our newsletter for the latest SEO tactics & best practices

TinyMCE vs. Gutenberg – What’s Changed

By
Updated August 24, 2018
one Comment

 
5
Tiny MCE vs. Gutenberg

Josh Giowaya

I'm Passionate about creating well-crafted, visually engaging and highly usable digital experiences. I have 10+ Years in web design & development at advertising and digital agencies, plus a number of years running my own consultancy. I also bring an extensive background in design that has proven invaluable when contributing to the design process and communicating with creative teams. Currently, I'm a WordPress consultant extremely active in the WordPress community. leveraging WordPress, Gutenberg and React to empower your Marketing Team. Atomic design & Modular development specialist. Speaker, Developer & Designer.

WordPress is reimagining its post content editor in a big way. This decision will come with some necessary casualties, TinyMCE the JavaScript API for custom UI controls in the post admin will be no more. Enter Gutenberg a project that has been in the making since WordCamp San Francisco 2013. The current version is leveraging react.js, like other popular CMS solutions WIX and  Squarespace. What will this mean for you the content editors? Not much from a UI component level will change. You can still customize content within your post. In fact, all of the built-in current WYSIWYG functionality will persist, in the form of a Gutenberg block.

Wait what is a block you ask?

A Gutenberg block is a collection of fields that output data wrapped in HTML saved to your post content. Similarly to how TinyMCE controls currently work without being tethered to What I consider a limited TinyMCE API and lack of documentation. In addition,  Gutenberg blocks are completely modular and reusable across your projects. As a developer, I’m fully behind WordPress decision to go this route. I have developed custom TinyMCE controls and custom Gutenberg blocks. In my opinion, Gutenberg is more flexible and covers more use cases than TinyMCE. The only advantage I would give TinyMCE is a learning curve as the syntax for creating a custom control is similar to and utilizes jQuery. In order to create a Gutenberg block, you do need to learn React.js. Because Gutenberg can do everything that TinyMCE can do and then some, I’m going focus on what’s new in Gutenberg for the rest of this post.

I’ve attended many talks on Gutenberg over the past year but one I attend in Nashville at WordCamp us sticks out. Gutenberg and the WordPress of Tomorrow

By Morten Rand-Hendriksen in where he calls outs our current WYSIWYG solution in WordPress proclaiming “We can do better”. I agree, yes we can. For editors using the current WYSIWYG solution in WordPress powered by TinyMCE, you will have to agree, we are not exactly achieving “What you see is what you get” experience. When updating a post you don’t really know what you are going to get until you preview or publish.

In fact, this is what you see

TinyMCE editor

…And this is what you get

Gutenberg is an attempt to enhance the WYSIWYG experience. How do you ask? Gutenberg allows you to render the HTML and CSS in the post editor screen giving you a more realistic representation of the content. So what would be the difference for content editors if editing a post with Gutenberg block versus TinyMCE?

  1. In-line editing. Which is becoming a popular user-interface concept widely adopted by Medium, Linkedin, and Facebook. The basic idea behind in-line editing is to allows the user to change content directly within its display view. Allowing for a more intuitive interaction rather than being redirected to a separate edit screen, which often is jarring for the user.

https://wordpress.org/gutenberg/

  1. Sidebar with context. Each content type now has optional additional context fields. For example, Headings come with size, color, background color context. In tandem with in-line editing allows you to see how these options are affecting your post style in real-time.

https://wordpress.org/gutenberg/

  1. Gutenberg block selection interface. This is a new and more intuitive interface for finding and adding content blocks. With a search feature and type ahead functionality. Neatly categorized by Most used, Common blocks, Formatting, Widgets, and Embeds.  The current options are listed below;

https://wordpress.org/gutenberg/

Most Used

Paragraph | Image | Heading | Gallery | List | Quote

Common Blocks

Paragraph  | Image | Heading | Gallery | List | Quote | Audio | Cover Image | Subheading | Video

Formatting

Code(Beta) | Classic | Custom HTML | Preformatted  | Pullquote | Table | Verse

Layout Elements

Button | Columns (beta) | More | Page break | Separator | Spacer | Text Columns

Widgets

Shortcode | Categories | Latest Posts

Embeds

Embed | Twitter | YouTube | Facebook | Instagram | WordPress | SoundCloud | Spotify | Flickr | Vimeo| Animoto | Cloudup | CollegeHumor | Dailymotion | Funny or Die | Hulu | Imgur | Issuu | Kickstarter | Meetup.com | Mixcloud | Photobucket | Polldaddy | Reddit |ReverbNation | Screencast | Scribd | Slideshare | SmugMug | Speaker | TED | Tumblr | VideoPress | WordPress.tv

  1. Better experience for adding content. Each block wraps its content in a div for each individual block instance. Allowing users to add or remove an entire block before or after one another. This ability prevents unexpected behavior in your post content like hanging element tags, wired floating issues, and accidentally content deletion. But wait there’s more, you can also move blocks via drag and drop or up and down controls. You can use the Up or Down arrow when hovering over a block to move that block  each direction Or, you can take advantage of the new drag and drop functionality by hovering over a block and dragging it:

https://wordpress.org/gutenberg/

https://wordpress.org/gutenberg/

  1. Column-based layouts(beta). Giving users more control over post content layout. Gutenberg includes columns based layouts, meaning I can nest block in columns. This feature allows you quickly create multiple columns layouts. The best part of this feature is that it usages CSS grid to achieve this functionality. Just add the Columns (beta) block. Which allow you to select full-screen columns. Then, you can nest block inside of each column:

 

https://wordpress.org/gutenberg/

  1. More information about the state of your post. Click the information icon in the upper left-hand corner and an interface pops up. This interface currently offers;
  • Word count
  • Number of Blocks
  • Number or Headings
  • Number or Paragraphs
  • Table of contents

https://wordpress.org/gutenberg/

 

  1. Reusable Gutenberg Blocks. This may be the most powerful feature of Gutenberg. A reusable block is any content block created with Gutenberg editor and purposely saved with the intention of using that same block in a different part of your WordPress site. To create a Reusable block;

https://wordpress.org/gutenberg/

  1. Add a block and then format or add styles to it as per your preference.
  2. Once you’re done with the formatting of the block, click on the three vertical dots to the right of the block.
  3. Click on Convert to reusable block.
  4. Click on Save to finish.

Once the block is saved you can access it from the blocks menu at any time. If you ever need to make changes to the block and then save it as a different block, simply detach the block, make your edits, then convert it a reusable block again and name it differently.  That completes our tutorial on saving reusable blocks in the Gutenberg editor.

In my opinion, moving away from TinyMCE is a huge upgrade for WordPress. Gutenberg is adding flexibility, customization, and a better user experience. Ultimately, you will have to decide if Gutenberg is right for you. The good news is you can switch to back TinyMCE anytime, using the Classic Editor plugin.  

 

  •  
  •  
  •  
  •  

Related Posts


Josh Giowaya

I'm Passionate about creating well-crafted, visually engaging and highly usable digital experiences. I have 10+ Years in web design & development at advertising and digital agencies, plus a number of years running my own consultancy. I also bring an extensive background in design that has proven invaluable when contributing to the design process and communicating with creative teams. Currently, I'm a WordPress consultant extremely active in the WordPress community. leveraging WordPress, Gutenberg and React to empower your Marketing Team. Atomic design & Modular development specialist. Speaker, Developer & Designer.

Free Marketing Audiobook

Leave a Reply

1 Comment on "TinyMCE vs. Gutenberg – What’s Changed"

Notify of
avatar
Sort by:   newest | oldest | most voted
Andrew Roberts
Guest

Not sure you have accurately captured the fact that it is the Classic Editor that is getting replaced, not TinyMCE per se. We wrote up an FAQ that might help you get the facts:
https://go.tiny.cloud/blog/gutenberg-tinymce-faq/

Ready to Get Started?

Get a free consultation now
Dan Corrigan
Dan Corrigan
18:43 19 Jun 19
I am a small business owner who was referred to Hook Agency to develop my website, promoting and advertising my business. The first time I spoke with Tim I knew his company would be a good fit for my business. The entire Hook Agency team was very responsive, acommodating, patient, and easy to work with. They made the whole process productive and stress-free. I recommend their services to anyone starting a business or for those who simply would like the best agency supporting their business.read more
Jen Wright
Jen Wright
19:48 06 Jun 19
Truly honest and caring people - I reached out to Hook Agency to schedule a consult with them, and I received a call from Tracy Kelly the same day. He was personable, kind, and took the time to explain what I was looking for wasn't a fit for their agency, but went completely above and beyond to talk to 2 other businesses to see if they would be interested in working on the project I have in mind, and then sent me a follow up email with their contact information. I am so impressed with the Tracy and his honesty and integrity. If you're worried that someone is going to sell you on services you don't need - you can expect a breathe of fresh air with Tracy and Hook Agency.read more
David Keinert
David Keinert
13:17 04 Jun 19
I was looking for agencies because we wanted to create a new website and blog. Hook was one of our top choices, but admittedly, I was nervous based on the fact they had not done work in my industry before. Fast forward to a year later, and I couldn't be happier. The team at Hook is responsive, resourceful, creative, and fun to work with. We have great content on our blog, and website continues to grow each month. I'm "Hook"ed!read more
Ryan Hanson
Ryan Hanson
03:10 24 May 19
We have nothing but great things to say about the Hook Agency. Their website work, and subsequent SEO, blog writing, and social media expertise have done wonders for our lead pipeline. We would recommend them to anyone looking for a competent and professional digital marketing team. We already have them contracted to do another project!read more
Jesse Hoekstra
Jesse Hoekstra
20:17 15 May 19
Great company to do some SEO work with and also a great help on the website building. They have quick response to questions, updates, and last minute changes.
Greg Toler
Greg Toler
17:07 15 May 19
Tim and the entire Hook Agency team has been the exact partner my company needed for all things web design, SEO, and even digital marketing strategy. Was hesitant at first with the complexity of my industry, but they have far exceeded expectations with research and content development. Our SEO position and inbound leads were almost nonexistent. Within three months our website authority and position had drastically increased, and we were consistently receiving organic leads. Now we have closed our first inbound lead as an organization and are transitioning to let Hook manage our PPC. As a small business, Tim has been helped us get the best bang for our buck while getting to know our company and process to help achieve our goals. We have used several large and small SEO companies in the past, but Hook Agency's management has provided the first measurable difference and growth. Would highly recommend!read more
Josie Franske
Josie Franske
16:11 22 Apr 19
We considered several web-design firms before selecting Hook Agency to redesign a large portion of our company site, and we're incredibly happy with the results. Not only was the team able to create exactly what we wanted, they've come up with some great compromises between keeping our brand voice and SEO writing, providing solutions that I'm confident no other firm would be able to dream up. It's been a very collaborative process and we're seeing great outcomes. They've also provided technical support on some small web issues, which takes major headaches off our plates as a small business without a full-time IT department. We absolutely recommend them!read more
Karine Woodman
Karine Woodman
02:50 21 Apr 19
We absolutely love our website. Hook Agency was very professional and provided us with a website that exceeded our expectations. We've also continued with their SEO services.
Jamie Rykyto
Jamie Rykyto
23:18 21 Jan 19
Very impressed! Long story short, our company website that was hosted elsewhere somehow lost data and went down. When the hosting company failed to do anything about it Hook Agency didn’t hesitate to help. They went above and beyond to get us back up and running. They made us feel confident and comfortable with what they were doing and explained everything each step of the way. I would definitely recommend them!read more
Maygen Lacey
Maygen Lacey
16:16 09 Jan 19
Super impressed with Tim. I had no idea how to find a web developer in my budget. Even though he was well out of my price range, he still very kindly took the time to suggest a few options and and walked me through how pro web developers operate. Class act! Thank you!!
Gibbous Wolf
Gibbous Wolf
19:53 31 Oct 18
Hook Agency came up with highly creative SEO solutions to my growing website. Their process was very insightful and they explained everything in an intelligent way without making me feel talked down to. I would recommend Hook Agency for anyone's SEO needs in Minneapolis.
Casey Palmer
Casey Palmer
18:49 16 Oct 18
Such a good website creator! So creative, responsive and helpful. Great team!!!
Robbin Julien
Robbin Julien
00:29 18 Sep 18
HOOK made the complex topic of SEO far less intimidating. They were patient and understanding with our learning curve. They worked "with" us, educating us as to where the opportunities were. They identified what "they" could do for us and even more valuable, what "we" could and should be doing for ourselves. HOOK and their style of full transparency, had us feeling comfortable immediately and ultimately feeling like we had a trusted partner working for our best interests. We look forward to our future collaboration and success!read more
Andrew Alshouse
Andrew Alshouse
17:24 10 Aug 18
Hook Agency has been a great resource for our small business. From creating our initial site to making updates as we grow, Hook has always been easy to work with. And they are quick with bug fixes which I really appreciate!
Reed Leidle
Reed Leidle
17:07 27 Jul 18
Amazing! Seriously, first class customer service and good people!!! Talk about going above & beyond... couldn't ask for a better experience.
Mark Graham
Mark Graham
18:45 16 Jul 18
Finding a website design company that is highly creative, technically competent , fundamentally sound, well organized, willing to listen and committed to service is unique indeed. We found exactly that at Hook Agency.
Eric Pfeffer
Eric Pfeffer
21:10 05 Jul 18
Without even paying a dime, Tim looked at my google analytics account and my google console account and gave invaluable free advice. Although his services were not a good fit for my needs at this point, I would highly recommend his services for SEO and high raking on google searches. Hook Agency is the way to go!read more
Craig Pladson
Craig Pladson
13:40 25 Jun 18
Tim and his team were collaborative, responsive, fast and delivered quality work on a tight timeline. The Wordpress pages they built are easy to update, mobile friendly and we plan on using the template they built for landing pages down the road. Tim also provided insightful guidance on SEO and lead generation best practices along the way.read more
Anna Overly
Anna Overly
17:28 17 May 18
When I began searching for an SEO agency last year, I received a lot of generic proposals from SEO agencies who wanted our money but didn't show any dedication to learning our niche industry. Tim, on the other hand, came to the table armed with a list of keywords to go after, goals to reach, a knowledge of what our competitors were doing, and an eagerness to understand our industry. Since then, Tim has shown a deep commitment to our success and has gone above and beyond to make sure we reach the goals we set. In the last year, our company has experienced a 30.8% increase in conversions from organic search (3mos/3mos) and a 135.06% increase in page views from organic search (3mos/3mos). The conversation has shifted from "let's get more leads" to "we need to hire more employees to handle all this new business." Tim has been incredible to work with, and I'd recommend him highly to anyone looking to hire an SEO specialist.read more
Sarah Lietz
Sarah Lietz
15:19 21 Feb 18
Tim has always been super responsive, creative in design, and helping us long after he should! Highly recommend!
Patrick Lorence
Patrick Lorence
15:52 20 Sep 17
“My company launched our completely revamped website and couldn't be happier with the way the site turned out, and our experience with Tim B Design. They took our old website with outdated graphics, poor sales results and transformed it into a modern, incredibly attractive and sales thriving site. In 6 short months we have seen a 300% increase in sales by online traffic, a greater return than we had ever imagined. Our product keywords are up over 350% and our website can easily be found on top of any major search engine. When we met with them to discuss the project, we were immediately impressed with how easy they were to communicate with—just real, down to earth, believable people that don't talk over your head with tech jargon. They listened and spent ample time understanding our products and message to make sure the site layout was exactly what we wanted.These days, I feel that people get to know your business through your website before they even walk through your door so it better be a good first impression. Our site brings in new clients every single day. The best part is that my website is so easy to use, I am able to edit content whenever I need to. It’s become such a great tool for my business. I am so in love with my branding, I receive compliments everyday. The Tim B Design team is amazing. They are creative, quick and so much fun to work with, I highly recommend them to any business.”Brad LorenceOwner, Banksystems Marketing Incread more
Niles Deneen
Niles Deneen
19:44 03 Aug 17
Awesome - we are seeing great improvement in our traffic and engagement. It's a pleasure working with Tim he is such a gifted guru of seo and digital marketing.
Josh Carlson
Josh Carlson
14:44 11 Jul 17
Tim B Design is exceptional to work with! He and his team have a great attitude, they've shown excitement in helping my business, and they are go getters! When I first contacted Tim on his website he responded to me almost immediately which was great. After our first face to face meeting I knew I wanted to work with him. I agreed to have them design my logo and build my website. In the process of doing that Tim thoroughly educated me on the importance of SEO which I knew very little about. There was absolutely no pressure to purchase anything while he was educating me but I decided to enter in an agreement for that too. Shortly after starting SEO they had availability to take over my social media accounts and I jumped at that opportunity. I put my full trust in them and they are doing great with all of it. Because of their work I've already seen growth in the number of sales leads generated by my website which is terrific! If you need help with any of these areas you need to contact Tim B design. Thank you Tim and Bea!read more
Next Reviews Write a review