The Display Posts Shortcode plugin lets you display a list of posts based on any criteria. By default it displays titles only. The example below makes it display the post’s title and full content.
Every block type in the WordPress editor can have multiple style options. Some block types already have style options like buttons and quotes. I’ll show you how to add and remove style options from blocks. Block styles let writers easily change the look of a block without any code. When editing a block with available styles, click the “Transform” icon in the top left to change styles. Here are the style options available in my theme for the quote block: This is a standard blockquote. This is a large quote. It has a CSS class of “is-style-large” They are technically just CSS classes added to the block. By using the Block Styles UI for previewing and selecting different styles, your clients won’t need to remember specific class names. You can add block styles to any block type in Gutenberg: core blocks and custom blocks from plugins. See my note at the bottom on finding the block name so you can attach your custom styles to it. We’ll need to create a JavaScript file in your theme or plugin and load it in the block editor. You can use the Create an empty I’m working on a website with two styles of headings. In my editor.js file I’m adding “Default” and “Alternate” style options: When a style is selected, a class of The block style selector lets you select which style you want applied, but does not let you unselect one after you’ve picked a style. If you register just one style and then select it for a block, there’s no way to unselect that block style option and return back to the default styling. I register an extra style option called “Default” or “Regular”, but don’t add any specific styles for that style option. When a user selects the “Default” style for an h2, it uses the If you add When styling buttons in the Gutenberg block editor, I usually don’t want the style options that come standard with WordPress: rounded, square, and outline. You can use I’ll often remove the defaults and then load my own button style options: You need to know the full block name in order to attach or remove styles from it. Here’s a list of all the core blocks (excluding all the embed ones): A simple way to find the block name is to insert the block in a page and then print out an escaped version of I’m using The Editor Color Palette allows content editors to style their blocks using the theme’s color scheme. When a custom color palette is registered in your theme, WordPress will use CSS classes for styling elements rather than hardcode the color in the content. There are two aspects to setting up your custom color palette: I’ll also show you how I style the button block to use the color palette. In your theme’s functions.php, add support for the custom color palette by specifying the following for each color option: Here’s an example from my Genesis starter theme: After adding that to your theme, you should see the following in the Color Settings panel: I’m using the actual color as the slug, which I think is the best approach for individual client sites. A few years from now we may build a new theme that looks totally different, but their color scheme for brand colors will remain unchanged. An alternative approach is to use generic terms for the colors like primary, secondary, and tertiary. I think this is the best approach for widely distributed themes, like premium themes by StudioPress. When a user changes themes, the actual colors will change to match that theme’s style guide, allowing a seamless transition between themes. WordPress includes a custom color picker after our theme colors. We can disable color picker and limit them to only our color options with this: Your Color Settings panel should now match the screenshot at the top of this article. If you select the blue color as the Background Color for a block, WordPress adds If you select blue as the Text Color, WordPress sets the classes to Your theme needs to provide styling for these color classes. Example: You can automate this with SASS by defining an array of colors and looping over it. Styling the button block can be difficult given all the styling options available to editors. Hopefully soon we’ll be able to reduce the color options for the button block. My goals with styling buttons are: Here’s the default button styling in WordPress: I want all buttons to be square, and the default background to be blue (the first color in my Here’s a summary of what’s happening since it can be a bit hard to read the SASS: This is just a starting point. You can tweak it as needed to match your style guide. For instance, if the blue button should have a green background color on hover, you could add: The button block includes three “Block Styles” – Rounded, Outline, and Squared. You can switch between by clicking the “Change Block Type” button in the top left corner. On most of the sites we build, we don’t want different button styles like this. The style guide calls for buttons to be square or rounded – not a mix of both. You can unregister these block styles using JavaScript: For more information see Block Styles in Gutenberg. How have you been using the color palette in your theme? Any tips or tricks on styling different blocks? Please share them in the comments below. The new WordPress block editor includes two new alignment options. To take advantage of the new alignment options, your theme must first support them. Include The The This tells the browser to calculate 50% of the its container’s width (ex: 900px) and subtract from it 50% of the viewport width (ex: 1600px). This results in a negative margin that pulls the element to the edges of the screen. You have more flexibility with the This is my default styling option built into my base themes. It copies the full alignment in approach, but instead of stretching the full gap between the browser edge and the content, it only does half. I set a maximum width if there are certain design constraints (like the Recommended Reading floating to the right) or you only want the image to reach a certain size. I’ll make For the negative left/right margin, I subtract the full page width from the content width and divide by two. Ex: ( 768px – 920px ) / 2 You can also put the math directly in the CSS using I use SASS variables to store common units like the margins, content width, and breakpoints (see here). To implement the above using my SASS variables: If we decide we want the wide images a bit wider, we simply edit the medium breakpoint and all the math automatically updates. Likewise, if we change the block margin, the top/bottom margin also updates. If your site uses sidebars, make sure you test your styles on a page with a sidebar. You can either limit the full/wide alignment styles to pages with I prefer disabling the full/wide alignment styles on pages with sidebars. The CSS is cleaner, and you don’t end up with two different versions of “wide” and “full” alignments. The new block editor in WordPress includes many core blocks, and you can add additional blocks through plugins. I’ve built quite a few Gutenberg websites, and these are the tools I recommend using. For simple features like featuring a team member I like to build my own custom blocks. But for more advanced features, especially if my client will need the flexibility to customize it, I try to use high quality plugins. I prefer plugins that focus on a single feature rather than “block library” plugins that include many different blocks. A focused product usually delivers a better solution. You also won’t pollute your block list with many blocks you never plan to use. If you do choose to install a block library, use one of these. Many of the plugins I recommend include a premium / paid option. These have actual businesses behind the plugins, will be supported for a long time, and will continue to improve over time. Here are my recommended plugins for forms, galleries, sliders, and block libraries. I plan to keep updating this article over time, so be sure to check back. WPForms is my favorite plugin for building any type of form. It’s incredibly easy to use, has plenty of addons, and can be extended through hooks and filters. I’ve used it on every site I’ve built for the past two years. The free version is full-featured enough for most use cases, which is why it has over 1 million active installs. The paid versions include additional features and integrations with services like MailChimp, Aweber, Stripe, and Paypal. Use their form builder to create your form (video demo), then embed it in a page using the WPForms block. Jetpack is built by Automattic, the company behind WordPress.com. It includes a ton of features, so make sure you only enable those you actually need. The Jetpack Form block lets you build your form directly in the Gutenberg block editor, which is unique among the form plugins. Block Gallery is a free gallery plugin built specifically for Gutenberg. It’s incredibly easy to use, allowing you to build and customize beautiful galleries directly in the Gutenberg block editor. This plugin includes three different gallery blocks: Carousel, Masonry, and Stacked. Envira Gallery is a premium WordPress gallery plugin. It’s Gutenberg integration is fairly basic currently, but it has the most extensive features and addons to implement almost anything you need. For basic galleries, the free Envira Gallery Lite will work great. I built the demo below using the free version of the plugin. First build your gallery in the Envira Gallery section of your WordPress site (video demo), then embed the gallery in your content using the Envira Gallery block. You can customize the gallery settings in the block panel on the right and see the gallery update live in Gutenberg. Future versions of Envira Gallery will include even deeper Gutenberg integration. Soon you’ll likely be able to build the gallery directly in the Gutenberg editor rather than going to the separate gallery builder. Soliloquy is premium slider plugin, produced by the same team as Envira. The free version, Soliloquy Lite, works great for most use cases. The premium version can be extended with many addons including image protection, slide scheduling, featured content, and more. Go to the Soliloquy section of your backend to create a new slider (video demo). You can add images, then customize the settings for each image (title, alt text, caption, clickthrough URL…). You can also set the slider settings, like the image dimension, transition, and theme. Embed the slider using the Soliloquy block. There is no visual preview of the slider, nor any customization options within Gutenberg. My only complaint is it doesn’t currently support the block alignment options, so you can’t make a full-width slider block without CSS customizations. Here’s the code I used to make the Soliloquy block match my full width block styling, and override the max-width and max-height attributes Soliloquy adds. I expect future updates to include deeper Gutenberg integrations, including full-width blocks and creating sliders from within Gutenberg itself. Atomic Blocks is a free collection of page-building blocks. It was built by Array Themes to compliment their Gutenberg-focused theme and includes blocks for post listings, testimonials, CTAs, and more. Both Array Themes and StudioPress (creators of the Genesis theme framework) were recently acquired by WPEngine, which makes me even more interested in building with Atomic Blocks. I expect to see deeper integrations with Genesis, the theme framework I use on most sites. As mentioned above in the Forms section, Jetpack is Automattic’s tool to share functionality they build for WordPress.com with the rest of the WordPress ecosystem. Automattic was instrumental in getting Gutenberg built and merged into WordPress core, and I expect to see many high quality blocks released by them through Jetpack. Jetpack currently includes blocks for markdown, forms, maps, and payment processing through PayPal. Here’s more information on Jetpack’s blocks. ACF lets you build metaboxes, Gutenberg blocks, and more with their easy-to-use interface. These custom fields are stored in the database and then rendered in the WordPress backend for you – no code required. This can become an issue if you’re using a modern development workflow: building locally, testing on a development/staging environment, then deploying to production. Since you likely aren’t overwriting the production database with the development one, any metaboxes created in development will need to be re-created in production. ACF has a built-in feature to help called Local JSON. If you create a folder in your theme named After pushing the code changes to production, log into the production site, go to Custom Fields in the backend, and click “Sync available” to manually sync the updated metaboxes. I prefer having the metabox changes automatically update on production rather than having to manually sync them. I also prefer using a core functionality plugin for any site-specific functionality that isn’t directly theme related. If the website owner would expect something to keep working after changing themes, it belongs in a functionality plugin. In my core functionality plugin, I have a I wanted a way to tweak the width of post titles to optimize where it breaks to a new line. I created the metabox with Advanced Custom Fields using the Range field type. I set the maximum value and default value to the current max-width of the post title, and the minimum to something reasonable. I then customized my theme to add the max-width CSS if the value is less than 1168px. Since my site is built on Genesis, I leveraged the Markup API by adding this to That works great on the frontend, but I wanted live updating in the Gutenberg editor so I know what size to use before publishing the post. I enqueued the following JavaScript in the Gutenberg editor: You’ll need to change the field key to match whatever your ACF field is named. This code leverages the ACF JavaScript API. You also need to make sure your Gutenberg editor styles match the frontend of your site. See my post on Building a Gutenberg website for details. The Genesis theme framework includes an Archive Settings box for specifying the page title and introductory content for category and author archives. Take a look at my Gutenberg category archive as an example. When registering your own custom post types, you can enable this same functionality by including My Code Snippets post type registration looks like this: What if you’re not the one registering the custom post type? In these situations, you can use Here’s how to add support to an Block templates are one of my favorite new features in Gutenberg. You can specify a list of blocks that automatically appear in the content editor, and you can customize what appears in each block by default. You can also lock the template so no additional blocks can be added. This is a great replacement for metaboxes in many cases. You can control the content structure without sacrificing the visual editing experience. Block templates are currently set for an entire post type, but you will soon have more granular control to define them in page templates and other contexts. I first build the page in the Gutenberg block editor. Then I add the code below to the theme, which prints out an escaped version of I’m using That helped me build the following block template: Which looks like this in the editor: Our client is a publisher who needs at least two ads in each post. There’s a few approaches we’ve used in the past: With Gutenberg, we simply pre-populate the content area with two ad blocks (built with Advanced Custom Fields) and three paragraph blocks. Content editors can then dive right into content creation around the ad units. Here’s how you set the block template for posts: We feature testimonials throughout the website, and we have a Testimonial post type for managing them. In the past we would have disabled the editor and added a custom metabox on this post type to collect just the quote and byline. With Gutenberg, we can limit the editor to just the “Quote” block. This allows the client to use the same UI for managing their blockquotes site-wide. When registering your post type, use the Including We’ll be featuring these quotes using the “Large” quote style in the theme, so I’ve added There’s no need for writers to include a post title for these quotes, but WordPress’ auto-generated titles weren’t very descriptive. I’m using the I don’t like parsing HTML for this data, but it works given the simple content structure. For more advanced layouts I recommend using something like Gutenberg Object Plugin to save the Gutenberg data as an array in the database so you can access it easier. You can create nested block templates using container blocks. For instance, here’s an example from the Templates section of the Gutenberg Handbook. The new block-based editor in WordPress provides a great new content editing experience, and it’s even more powerful with custom blocks. The core blocks are built using React and JavaScript. You can build your own Gutenberg blocks with JavaScript as well. If you plan to distribute your block publicly as a plugin, I recommend building it with JavaScript to keep it lean and decrease dependencies on other libraries. When building a single website with many unique blocks, you’ll likely find it more effective to use a block-building plugin like Advanced Custom Fields. You can build blocks much faster by leveraging a tool you likely already use. This is especially useful if you’re a PHP developer with little JavaScript experience. ACF lets you build everything using PHP. Advanced Custom Fields is a plugin for building additional content editing fields throughout the WordPress interface. You can build custom metaboxes, site options, user profile fields, and term metadata. For a more detailed walkthrough of ACF and how it compares to similar plugins, see my Introduction to Custom Metaboxes. I plan to write more about ACF in the near future, so keep an eye on my Advanced Custom Fields category page. ACF is the first popular metabox plugin to add support for building blocks. Other plugins are working on it as well – see CMB2 and Carbon Fields articles on Gutenberg compatibility – but ACF is leading the way. I walk you through the technical details and code snippets you need as a WordPress developer building a Gutenberg website. There are three key parts to building a Gutenberg block with ACF: I’ll walk you through each step required to build a simple “Team Member” block. I’m storing the block’s markup and styles inside the theme to keep things simple, but you could also place the code in a core functionality plugin. We’ll use the This is your unique name for the block. ACF automatically namespaces it for you, so my This is the title shown in the Gutenberg block editor. The template file used to render the block. The same template file will be used on the frontend and as the “Preview” view in the backend editor. This can either be a relative URL from the current theme, as shown above, or a full path to any file. Alternatively, you can use the render_callback parameter to specify a function name that output’s the block’s HTML. This determines in which section of the “Add Block” window it appears. The options provided by WP core are: common, formatting, layout, widgets, and embed. Specify a dashicons icon to use, or a custom SVG icon. This lets you control how the block is presented the Gutenberg block editor. If set to “Preview” it will render like the frontend and you can edit content in the sidebar. If set to “Edit” it appears like a metabox in the content area. The user can switch the mode by clicking the button in the top right corner, unless you specifically disable it with Up to three additional terms to use when a user is searching for the block. The name is always indexed so you don’t need to repeat it as a keyword here. Once the block has been registered, you can now go to Custom Fields in the admin and create your block editor. It works just like a standard metabox built in ACF. Under the location rules, select “Block” is equal to “Team Member”. The final step is to write the markup for the block. I created a template partial in Use the In my article on Developing a Gutenberg Website I mentioned the Table of Contents block I built for a few clients. It dynamically lists all h2’s within the current article and links to each one. I started by forking the WP Anchor Header plugin. My changes include: The block doesn’t have any editable fields so I added a Message field describing how it works: Here is the full code for the table of contents block. I have built many websites using WordPress’ new block-based editor, code-named Gutenberg. I’ll walk you through the technical details you need as a WordPress developer building a Gutenberg website. I’ll then share how we approach these projects and provide some real-world examples. For the most part, a Gutenberg-optimized theme is just like any other WordPress theme. Your current WordPress theme will likely work great with Gutenberg. This adds “wide” and “full” options to the left, right, and center alignment options. This will be used primarily for images, but other blocks also support these alignment options. You’ll need to add CSS to your theme for these alignment options to actually work, in the same way you have to style See my guide to wide and full image alignment in Gutenberg for CSS examples. When editing paragraph text, a user can select different sizes in the settings panel on the right. This lets you define what sizes should be available. You’ll also have to add CSS to your theme for this to work. Rather than hardcoding the font size on the paragraphs, Gutenberg adds a CSS class like Gutenberg includes a color picker in certain blocks like paragraph and button. Rather than letting clients pick any color they want, we disable the color picker and define a few brand colors. Like all the other theme options, these require additional CSS to function properly. When a block has the “Background Color” set to one of your theme colors, it adds a class of See my Guide to Color Palettes and Button Styling for more information and code samples. Each block type can have multiple style options. For instance, the Quote block comes with “Regular” and “Large” styles, while the Button block comes with “Round”, “Square”, and “Outline” styles. You can add your own block styles using See Block Styles in Gutenberg for code samples and a list of all block names. I can’t imagine building a Gutenberg theme without SASS. You need to generate a frontend stylesheet and editor stylesheet, both with differing amounts of CSS. For the Theme Colors feature described above, we use SASS loops to build the styles (see here). If your theme has defined editor styles, these will not be loaded into Gutenberg by default. The idea is that your original editor-styles.css file was written for the classic editor. You can use it to define styles that only apply to the classic editor, and load a different stylesheet for the block editor using the Do not load your entire frontend stylesheet in Gutenberg. You should only load relevant styles, and prepend them all with the Alternatively, you can tell WordPress to load your editor styles into Gutenberg with WordPress will automatically prefix your styles for you so you don’t have to worry about targeting the correct elements inside of the editor. You’ll have a single editor stylesheet used for both the block editor and classic editor. Gutenberg already has some base styling applied to blocks, but their max-width doesn’t match the max-width we are using on the site. We use the following in a These styles should match your frontend styles. I’ve also added styles for customizing the post title. You can simplify the writing experience by pre-populating the editor with a set of default blocks. You can even customize what appears in each block by default. We used this on an attorney’s website so all case summaries had the same overall structure. You can decide how strict you want to make the template. You can lock it completely (no new blocks, can’t remove/reorder existing blocks), lock insertions (no new blocks, but current blocks can be re-ordered), or have no locks and used the template as a starting guide. Read my article on Using Block Templates with Gutenberg for code examples. The biggest question most theme developers will have is “Should I build my custom blocks from scratch in JavaScript, or use a plugin like Advanced Custom Fields?” I think metaboxes make a great analogy. When I’m building a custom plugin that will be distributed and used by many, like Genesis Title Toggle, I build my metabox from scratch. This removes a plugin dependency (ACF) or a bundled library (CMB2) and keeps the plugin lean. When I’m building a bunch of metaboxes for a specific client’s site, it’s better to leverage an existing tool like Advanced Custom Fields, Carbon Fields, or CMB2. I’m able to provide a higher quality result much faster than if I were to build everything from scratch. I use the same approach to Gutenberg blocks. For client sites, I’m building my custom blocks with Advanced Custom Fields. When I release a public plugin that includes a block, it will be built from scratch. See these articles for more information: There are really two types of Gutenberg websites: simple and custom. Gutenberg is a huge step forward for simple content sites. Clients can easily build beautiful and engaging pages of content with the core blocks. The theme development process for these sites is mostly CSS. We ensure the core blocks look great, match the client’s brand, and can address all their content requirements. This is perfect for non-profits who need a low-cost, high-impact website. We used this approach for CARAS and College Discount Cards. We start by designing a style guide featuring all the core blocks. Our designer then works with the client to mock up the key pages using these blocks. Once the designs are approved, I style the blocks and build the pages like legos. These sites follow our traditional web development process. Rather than letting the technology constrain our design and functionality, we first examine the client’s specific needs and document the desired features and user experience. We then design the user interface, mockup all the blocks (both core and custom), and mockup the page layouts necessary to build the site. In addition to styling the core blocks, we build custom blocks to implement features not currently in core. The above example of Free Together includes a “Table of Contents” block that dynamically lists and links to each heading in the article. On RCP (soon to launch) we built many custom blocks including a Feature Box, Icon Links, and Downloads. You have to consider the value proposition for each project. We use the block editor on all projects unless there’s a compelling reason not to. When we disable Gutenberg, it’s typically on a single template. The benefits of Gutenberg include: Here’s the “Feature Box” block we built on RCP. This is a great example of how Gutenberg can make content creation easier. Something like this would be difficult and complicated to insert in TinyMCE. See my article on Building Gutenberg blocks with ACF for more examples. Gutenberg is a block-based content editor, not a page builder. It’s hard to describe, but it will become more clear as you use it in the real world. While the columns block does allow you to nest blocks inside of blocks, it’s fairly primitive and difficult to set up. The editing experience can be painful and you’ll need custom CSS to make it mobile responsive. It works for simple sites, but is not a replacement for true page builders like Beaver Builder or flexible content areas. We use Gutenberg for most content pages on the site; it replaces a lot of custom page templates we would have developed previously. But for visually complex pages like the homepage and landing pages, we’ll often disable Gutenberg for those templates and build a true page builder with Carbon Fields or Advanced Custom Fields. It’s not that Gutenberg can’t be used for complex pages, it just might not be the easiest interface to use in those instances. As Gutenberg becomes more powerful, this will become less of an issue. My website – including the homepage – is built completely with Gutenberg. It can be done.
Adding a script to the editor
enqueue_block_editor_assets
hook to load assets into the block editor. It works the same as using wp_enqueue_scripts
to load assets into the frontend of the site.editor.js
file in the directory /your-theme/assets/js/
. Then add the following to your theme’s functions.php file:/**
* Gutenberg scripts and styles
* @see https://www.billerickson.net/block-styles-in-gutenberg/
*/
function be_gutenberg_scripts() {
wp_enqueue_script(
'be-editor',
get_stylesheet_directory_uri() . '/assets/js/editor.js',
array( 'wp-blocks', 'wp-dom' ),
filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );
Adding Block Styles
wp.domReady( () => {
wp.blocks.registerBlockStyle( 'core/heading', {
name: 'default',
label: 'Default',
isDefault: true,
} );
wp.blocks.registerBlockStyle( 'core/heading', {
name: 'alt',
label: 'Alternate',
} );
} );
.is-style-{name}
is applied to the block. So in my stylesheet, the h2 { }
has my default styling and h2.is-style-alt { }
has my alternate style.Why register a default style?
h2 {}
styling rather than a more specific h2.is-style-default{ }
.isDefault: true
then this style will be marked active on blocks that don’t already have a style specified.Removing block styles
unregisterBlockStyle
to remove existing block styles from a block. Add the following to the editor.js file described above:wp.domReady( () => {
wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
} );
wp.domReady( () => {
wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
wp.blocks.registerBlockStyle( 'core/button', {
name: 'default',
label: 'Default',
isDefault: true,
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'full-width',
label: 'Full Width',
} );
} );
List of block names
core/paragraph
core/image
core/heading
core/gallery
core/list
core/quote
core/audio
core/cover
core/file
core/video
core/preformatted
core/code
core/freeform
core/html
core/pullquote
core/table
core/verse
core/button
core/columns
core/media-text
core/more
core/nextpage
core/separator
core/spacer
core/shortcode
core/archives
core/categories
core/latest-comments
core/latest-posts
Finding a block’s name
post_content
to see what’s stored.ea_pp()
below (code here) but you could also use print_r()
./**
* Display Post Blocks
*
*/
function ea_display_post_blocks() {
global $post;
ea_pp( esc_html( $post->post_content ) );
}
add_action( 'wp_footer', 'ea_display_post_blocks' );
Registering your colors
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Blue', 'ea_genesis_child' ),
'slug' => 'blue',
'color' => '#59BACC',
),
array(
'name' => __( 'Green', 'ea_genesis_child' ),
'slug' => 'green',
'color' => '#58AD69',
),
array(
'name' => __( 'Orange', 'ea_genesis_child' ),
'slug' => 'orange',
'color' => '#FFBC49',
),
array(
'name' => __( 'Red', 'ea_genesis_child' ),
'slug' => 'red',
'color' => '#E2574C',
),
) );
Naming your color options
Remove custom color picker
// -- Disable Custom Colors
add_theme_support( 'disable-custom-colors' );
CSS for your color palette
.has-background
and .has-blue-background-color
to the block..has-text-color
and .has-blue-color
..has-blue-color {
color: #59BACC;
}
.has-blue-background-color {
background-color: #59BACC;
}
.has-green-color {
color: #58AD69;
}
...
Using SASS
// Gutenberg color options
// -- see editor-color-palette in functions.php
$colors: (
'blue' : #59BACC,
'green' : #58AD69,
'orange' : #FFBC49,
'red' : #E2574C,
);
@each $name, $color in $colors {
.has-#{$name}-color {
color: $color;
}
.has-#{$name}-background-color {
background-color: $color;
}
}
Button Styling
$colors
array). On hover, the background should get darker and no underline should appear on the text./* Button block
--------------------------------------------- */
.wp-block-button__link {
border-radius: 0;
&:hover {
text-decoration: none;
}
&:not(.has-text-color) {
color: white;
&:hover {
color: white;
}
}
&:not(.has-background) {
$default: nth( nth( $colors, 1 ), 2 ); // first color in $colors array
background-color: $default;
&:hover,
&:focus {
background-color: darken( $default, 20% );
}
}
@each $name, $color in $colors {
&.has-#{$name}-color:hover,
&.has-#{$name}-color:focus {
color: $color;
}
&.has-#{$name}-background-color:hover,
&.has-#{$name}-background-color:focus {
background-color: darken( $color, 20% );
}
}
}
$colors
array shown above, and set the hover background to be 20% darker..wp-block-button__link:not(.has-background):hover,
.wp-block-button__link.has-blue-background-color:hover {
background-color: $green;
}
Remove Button Block Styles
Share your tips
add_theme_support( 'align-wide' )
in your functions.php file. Full Alignment
.alignfull
option should span the full width of the screen. I typically do this using the following CSS:.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
margin
property can accept up to 4 values. In this case I provided 2 properties so the first ( 32px
) is applied to the top and bottom, and the second (calc( 50% - 50vw)
) is applied to the left and right.Wide Alignment
.alignwide
option. It should be wider than the main content area, but not as wide as the full alignment. There are two approaches I usually take:Percentage Width
.alignwide {
margin: 32px calc(25% - 25vw);
max-width: 100vw;
width: 100vw;
}
Max width
.alignwide
and .alignfull
use the same CSS at first, but at a certain break point I’ll change .alignwide
to a fixed max width and margins. .alignwide,
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@media (max-width: 920px) {
.alignwide {
margin: 32px -76px;
max-width: 920px;
width: 920px;
}
}
calc()
.alignwide,
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@media (max-width: 920px) {
.alignwide {
margin: 32px calc( ( 767px - 920px ) / 2 );
max-width: 920px;
width: 920px;
}
}
With SASS
&.alignwide,
&.alignfull {
margin: calc( 2 * #{$block-margin} ) calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
@include media(">=medium") {
&.alignwide {
margin: calc( 2 * #{$block-margin} ) calc( ( #{$content-width} - #{map-get( $breakpoints, 'medium' ) } ) / 2 );
max-width: map-get( $breakpoints, 'medium' );
width: map-get( $breakpoints, 'medium' );
}
}
Consider Sidebars
.full-width-content
body class, or use the max-width approach shown above, ensuring the max-width stops before overlapping the sidebar. Forms
WPForms
Jetpack Form
Galleries
Block Gallery
Envira Gallery
Sliders
Soliloquy
Block Libraries
Atomic Blocks
Jetpack
acf-json/
, ACF will automatically add/update a JSON file for every group of fields. These JSON files can then be version controlled with the rest of your theme.Alternative Approach
acf.php
file with the following features:acf-json/
folder.CORE_FUNCTIONALITY_VERSION
constant has changed.WP_LOCAL_DEV === true
. I have this constant defined in wp-config.php locally. This prevents clients from accidentally editing or deleting their metaboxes.single.php
:Your Custom Post Types
'genesis-cpt-archives-settings'
in the supports
array. For more information, see my article on creating custom post types.Adding to Plugin CPTs
add_post_type_support()
.event
post type registered by another plugin. Place the code in your Core Functionality plugin or your theme’s functions.php file.Quick tip on implementation
post_content
. This shows me the blocks and parameters I need to build the block template.ea_pp()
below (code here) but you could also use print_r()
./**
* Display Post Blocks
*
*/
function ea_display_post_blocks() {
global $post;
ea_pp( esc_html( $post->post_content ) );
}
add_action( 'wp_footer', 'ea_display_post_blocks' );
'template' => array(
array( 'core/heading', array( 'level' => '5', 'content' => 'Role' ) ),
array( 'core/paragraph' ),
array( 'core/heading', array( 'level' => '5', 'content' => 'Responsibilities' ) ),
array( 'core/paragraph' ),
array( 'core/heading', array( 'level' => '5', 'content' => 'Qualifications' ) ),
array( 'core/list' ),
array( 'core/heading', array( 'level' => '5', 'content' => 'Highlights' ) ),
array( 'core/paragraph' ),
)
Post template with ads
Testimonial block template
template
parameter to specify an array of which blocks should appear. 'template_lock' => 'all'
will prevent any changes to the layout. If you set 'template_lock' => 'insert'
it will prevent new blocks from being inserted but still allow the writer re-arrange the existing blocks.is-style-large
to the block attributes.wp_insert_post_data
filter to modify the post title to match the value in <cite>
. If there is no byline, it sets the title to “Testimonial {ID}”Nested Templates
What is Advanced Custom Fields
Developer's Guide to Gutenberg
Creating a block
Register the block
acf_register_block()
to register our custom block. I’ve provided a summary of the parameters below, and for more information see the ACF documentation.Name
team-member
name becomes acf/team-member
in the database.Title
Render Template
Category
Icon
Mode
'supports' => array( 'mode' => false ).
Keywords
Build the block editor
Build the block markup
/partials/block-team-member.php
, matching the render_template
parameter I specified when registering the block. My template partial looks like:get_field()
function to access the fields set in the block settings. You can then build the markup for your block based on your specific design requirements.
Building a Table of Contents block
ea_table_of_contents()
function accepts a $count
parameter. We use this to list the first few headings in the article on the homepageQuick Links
Building a Gutenberg theme
Wide/Full Alignment
add_theme_support( 'align-wide' );
.alignleft
for left-aligned images to work.Editor Font Sizes
// -- Disable custom font sizes
add_theme_support( 'disable-custom-font-sizes' );
// -- Editor Font Sizes
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'small', 'ea_genesis_child' ),
'shortName' => __( 'S', 'ea_genesis_child' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'ea_genesis_child' ),
'shortName' => __( 'M', 'ea_genesis_child' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'ea_genesis_child' ),
'shortName' => __( 'L', 'ea_genesis_child' ),
'size' => 20,
'slug' => 'large'
),
) );
.has-small-font-size
. This helps keep the content separate from the styling and will simplify redesigns in the future.Theme Colors
// -- Disable Custom Colors
add_theme_support( 'disable-custom-colors' );
// -- Editor Color Palette
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Blue', 'ea_genesis_child' ),
'slug' => 'blue',
'color' => '#59BACC',
),
array(
'name' => __( 'Green', 'ea_genesis_child' ),
'slug' => 'green',
'color' => '#58AD69',
),
) );
.has-{color}-background-color
. Likewise, when the “Text Color” is set, it adds a class of .has-{color}-color
.Block Style Options
registerBlockStyle
, and you can remove existing style options using unregisterBlockStyle
.Use SASS
Editor Styles
enqueue_block_editor_assets
hook:/**
* Gutenbergstyles
*
*/
function ea_gutenberg_styles() {
wp_enqueue_style( 'ea-gutenberg', get_stylesheet_directory_uri() . '/assets/css/gutenberg.css' );
}
add_action( 'enqueue_block_editor_assets', 'ea_gutenberg_scripts' );
.editor-block-list__block
class to ensure it only applies to the editor (not the WP backend menu, metaboxes…).A simpler approach to editor styles
add_theme_support( 'editor-styles' );
Set block width in Gutenberg
_gutenberg.scss
partial to update the size of normal, wide, and full width blocks in the Gutenberg editor. $content-width
is a SASS variable we have defined in _base.scss
./* Post title width */
.editor-post-title__block.wp-block {
max-width: $content-width;
/* Post title styling */
.editor-post-title__input {
}
}
/* Main column width */
.wp-block {
max-width: $content-width;
/* Wide column width */
&[data-align="wide"] {
max-width: none;
@include media(">=medium") {
max-width: none;
margin-left: calc(25vw - 25%);
margin-right: calc(25vw - 25%);
}
}
/* Full column width */
&[data-align="full"] {
max-width: none;
}
}
Creating block templates
Building Custom Blocks
Types of Gutenberg websites
Simple Gutenberg Websites
Custom Gutenberg Websites
Is Gutenberg the right choice?
Gutenberg is not a page builder