# Block Editor (Gutenberg) Styles - Link: https://seasonedpro.blog/block-editor-styling/ - Published: 2018-12-11T17:28:34-04:00 - Author: Feast [↓ Jump to Recipe](https://seasonedpro.blog/block-editor-styling/#recipe) [Print Recipe](https://seasonedpro.blog/wprm_print/recipe-for-a-successful-blog) This is a demo post exploring the different styles in the block editor (codenamed" Gutenberg"). This is just a development post - we haven't yet released this publicly. Jump to: * [This is an H2](https://seasonedpro.blog/block-editor-styling/#this-is-an-h2) * [Simple Image Block](https://seasonedpro.blog/block-editor-styling/#simple-image-block) * [New Gallery Block](https://seasonedpro.blog/block-editor-styling/#new-gallery-block) * [Recipe for a successful blog](https://seasonedpro.blog/block-editor-styling/#recipe-for-a-successful-blog) * [Ingredients](https://seasonedpro.blog/block-editor-styling/#ingredients) * [Instructions](https://seasonedpro.blog/block-editor-styling/#instructions) * [Fractions](https://seasonedpro.blog/block-editor-styling/#fractions) * [Acronyms](https://seasonedpro.blog/block-editor-styling/#acronyms) * [Group block](https://seasonedpro.blog/block-editor-styling/#group-block) * [Yoast FAQ](https://seasonedpro.blog/block-editor-styling/#yoast-faq) * [Quotes](https://seasonedpro.blog/block-editor-styling/#quotes) * [Overlay Block](https://seasonedpro.blog/block-editor-styling/#overlay-block) * [ Branding](https://seasonedpro.blog/block-editor-styling/#branding) * [Comments](https://seasonedpro.blog/block-editor-styling/#comments) ## This is an H2 Most of your content should be contained in H2 subheadings. In version 4.0.0 and later, body font-sizes have been standardized across all themes at 16px. Headings have been standardized using "em", meaning a multiple of the 16px body-font size. For more details, [see this blog post](https://feastdesignco.com/how-to/font-size-for-food-blogs/). ### This is an H3 H3 can be used to sub-categorize your content under H2 headings. You typically won't need to use these when making recipes posts. #### This is an H4 H4 is relatively uncommon, except in technical documentation. As a food blogger, anything you consider using for H4 should be either bumped up to H3, or simple paragraph text. ##### This is an H5 No real application for this outside of technical and legal documents. ###### This is an H6 Why even bother at this point? ## Simple Image Block ![](https://seasonedpro.blog/wp-content/uploads/2018/12/wide-post-content-1024x621. jpg) This is a caption for an image block ## New Gallery Block ![Seasoned Pro WordPress Theme for Lifestyle Bloggers](https://seasonedpro.blog/ wp-content/uploads/2017/01/SeasonedProforLifestyleBloggers-683x1024.jpg) Left Gallery Image ![Seasoned Pro WordPress Theme for Food Bloggers](https://seasonedpro.blog/wp-content/ uploads/2016/01/SeasonedProforFoodBloggers-683x1024.jpg) Middle Gallery Image ![Seasoned Pro WordPress DIY Blog Theme for Food & Lifestyle Bloggers](https://seasonedpro. blog/wp-content/uploads/2012/10/SeasonedProDIYBlogTheme_2017-683x1024.jpg) Right Gallery Image Galleries are new to the block editor, removing the need for plugins. The captions are relatively simple to create. Testing will be needed to see what sizes are loaded for various devices (desktop, tablet, mobile). Mobile is the most important, making up approximately 75% of pageviews for most food blogs in 2018 and on. Too many images can slow down your page. ![](https://seasonedpro.blog/wp-content/uploads/2018/12/wide-post-content-150x150. jpg) [ Print](https://seasonedpro.blog/wprm_print/recipe-for-a-successful-blog) ## Recipe for a successful blog Follow these steps to take your blog to infinity, and beyond. Course Breakfast Cuisine American Prep Time 10 minutes Cook Time 10 minutes Servings 4 people Author Feast ### Ingredients * 1 teaspoon determination * 1 cup talen * 1 quart determination ### Instructions 1. Combine all ingredients into self and stir vigorously 2. Get to it! ### Recipe Notes Not a real recipe. ## Ingredients Unordered lists are a great way to display information that doesn't have a sequence, like ingredients. * This is an unordered list block * This is the second item in the list * Use unordered lists to create lists in which the sequence isn't important The Feast Plugin now also has custom styling for button links, using your brand: [Sign up for the newsletter!](https://seasonedpro.blog/newsletter) ## Instructions Use ordered lists to display lists that have a specific sequence to follow, like instructions. 1. This is an ordered list block 2. It's good to itemize sequential steps or items in an ordered list 3. Using lists to break up your content and make it easier to parse is a good user- experience practice ## Fractions The Feast Plugin contains an enhancement to [convert text-based characters to fractions](https://feastdesignco.com/convert-text-to-fractions/), so that you get ½ instead of 1 / 2 and ¼ instead of 1 / 4. ## Acronyms The Feast Plugin contains an enhancement to [convert recipe acronyms](https://feastdesignco.com/convert-recipe-acronyms/) to improve screen reader accessibility, so that it reads the word **teaspoon** instead of "tee ess pee" and **tablespoon** instead of "tee bee ess pee". ## Group block You can group blocks together into a group block! ## Yoast FAQ Use the Yoast FAQ block to add FAQ schema to your posts, which helps generate "People also asked" snippets in search engines. **Question 1** Answer 1 **Question 2** Answer 2 ## Quotes > Blockquotes are a great way to emphasize an important piece of your content. > You can also turn the blockquote into a citation by providing a "citation". This > is a great way to reference content on another site. > Edgar Allan Poe ## Overlay Block ![](https://seasonedpro.blog/wp-content/uploads/2012/10/SeasonedProDIYBlogTheme_2017. jpg) This is a "cover" block - an image block with text overlay ##  Branding You can use the **feast-box-primary** class to style your paragraphs using primary brand colors Or if you'd like... You can use the **feast-box-secondary** class to style paragraphs using the secondary brand colors