Building WPDecoupled: Kitchen Sink 🏡

Are you aware of what a “Kitchen Sink” example is? It’s a piece of content that contains all the editor’s possible content types and styles. In my case, all possible styling and blocks from the Gutenberg editor in WordPress. Here’s a sentence with bold and italic content. A developer can use this post to confirm CSS styles, HTML elements, and JS interactivity all work correctly!

An h2 Heading

Now I’m going to insert a photo to see how that works…

Look that’s the description rendering and now this is a new paragraph

An h3 heading

That’s special. What if I want the photo smaller and left-aligned?

Now we can put some text alongside the photo in a paragraph.

• Or even bullet points about our favorite things in Glacier National Park
• Beauty
• Nature
• Animals
• Trails
• Swim Holes
  

But here’s the thing, at the time of publication this isn’t working…you’ll just see a small image alright but its in the center of the page. So the kitchen sink has done its job, it has shown us that our styling in the front end of the site doesn’t match what Gutenberg expects. While this is not my top priority at the moment, cause this is the only post using photos. Some day soon this will surely get fixed!

---

Conclusion

This post will get updated with various Gutenberg blocks that I use and will be used as a reference to confirm all other posts should be rendering correctly. Theoretically, I could run a test against this page and if it passed, all other pages should render correctly..