Creating the first block

IIn this series of short tutorials we will convert the Pinegrow Bootstrap 5 template “Agency” to a multi-page WordPress theme using Gutenberg blocks and the built-in WordPress theme controls. Let’s get started!

Prefer to read? Scroll past the video.

This tutorial is available in video and textual form. Watch the video, or continue reading. Of course, you can also do both!

Creating editable theme blocks

Note: After finishing the shooting of this video I realized we can use the ‘Select’ control for our final block attribute. This will allow us to present a list of potential classes to the end user. Scroll down to read about this now, or wait for me to cover it briefly at the beginning of video 3.

In this second tutorial, we are going to accomplish a few tasks. You should already have the Agency template set-up for export as a WordPress theme and have divided the main page into header, main body, and footer sections.

Task List

1. We will duplicate our index.html page and use the new page to construct our blocks.
2. We will edit our main template page to remove the existing template content and add WordPress actions to display our post and page content.
3. We will turn the top hero content of the template into our first block and look at how we add styling to our editor.

Let’s get started!

Creating a block page and cleaning up the template

1. Right-click the index.html file in the Project panel to bring up the context menu and then click duplicate. Name the new file ‘blocks.html’.

2. From the modal that appears click on “Use the original master page”.

3.  In the Page Settings section of the WordPress panel click on “Don’t export this page”.
4. In the original index.html file, remove all the HTML nested in the ‘main’ section that has the ‘Site content’ action

If you save and export the theme at this point you will end up with a template page that has only the header and the footer, without any editable content displayed.

Adding editable areas to our template

1. From the Library panel, drag a section element into the ‘main’ area of the Page View or Tree panel. Then add a second section nested inside of the first.
2. Select the outer section and from the WordPress Actions panel, open the ‘Post Smart Actions’ section and add the ‘Show Posts’ action. This will add the main loop to this section. No options need to be altered at this time.
3. Select the inner section and add the ‘Post Content’ WordPress action.

Now when we export our theme, any blocks that we add in the editor will show up in between our header and footer on the front-end.

Block Creation

1. Switch to the blocks.html file and select the first section within the ‘main’ area. This contains all of the HTML for the top hero section.
2. In the WordPress actions panel open the ‘Blocks Smart Actions’ section and select the ‘Block’ action. 

3. Give the block a unique id, title, and icon. 3a) There are three different icon sets. The first is the WordPress dashicon set. To add one of these icons just enter the icon name without the dashicon- prefix. For the Bootstrap or Remix icons copy and paste the SVG into the input.
4. Select a category of ‘Custom’ to add our blocks to our own theme section.
5. Add a category id and name. At the moment the icon can only be a dashicon. Finally, check the ‘Register category’ box. This only needs to be done once for each custom category.

After saving and exporting our theme will result in our new category and block being displayed in the Blocks panel for addition to our page.

Styling our blocks in the editor

All of the CSS styling for the front-end is being added by the header element. However, if you look at the block in the editor you will see that it is unstyled. We need to tell WordPress to bring our stylesheets into the backend. For a single block, this is done through adding the stylesheet to the ‘Editor style’ input under ‘More Options’ of the block action. For multiple blocks (like we are putting together), it is done through the WordPress -> Theme/Plugin settings menu item.

1. Open the WordPress menu and select the ‘Theme/Plugins settings’ item.
2. Scroll to the bottom of the modal and add the bootstrap.min.css file from your original Pinegrow project.
3. Add any additional block-specific styling from the original project to additional stylesheet inputs.

Now when we save and export our theme the blocks will be properly styled on the back-end.

Making block elements editable

Right now, we can add the block to our page, but none of the inside elements are editable. Converting this to be editable is straight-forward. For each element we want to be editable we add the ‘Block Attributes’ action give an id, title, and identify what we want to add.

Making the title text editable

1. Select the ‘h1’ element in the hero block either in the Page view or the Tree panel, then select the ‘Block Attributes’ action.
2. Give an Attribute id – this id must be unique within the block, but does not need to be unique in the project.
3. Give a descriptive Title that will be visible in the Block properties area of the editor.
4. Select a ‘Use as’. This will determine what aspect of the element will be altered by the user input.
5. The attribute options are optional and allow for using the default if the element is left empty, changing the input type in the editor, using some conditional logic, and adding a help string.

Making the lead text editable

The steps for making the lead text ‘p’ element are essentially the same as for the title text. The only difference here is that we are changing the ‘Control type’ to ‘Rich Text’. This will allow us to add formatting, like italics and bold styling, to our lead text.

Making the buttons editable

The buttons require two ‘Block Attributes’ actions. The first will be used to alter the anchor link and the second the text of the button. After filling out the input fields of the first action, simple add another by clicking on the ‘+ Add attribute’ button at the bottom.

Making the picture editable

Again, this is as simple as adding a block attributes action.

1. Select the image and add a ‘Block Attributes’ action.
2. Add a unique id and title.
3. For ‘Use as’ select ‘Image’. 

4. For ‘Image size’ you can use the built-in WordPress sizes or define a custom size in the WordPress -> Theme/Plugins settings. Note, if you choose to do this, any media already in the library will need to be resized.

Making the background color editable

The background color for the block is set using a Bootstrap class on the main section. So in this case, we need to change the class to another of the appropriate color. We can use a ‘Control type’ of ‘Select’ to present our user with the colors available in our theme.

1. Select the main section of the block – this is the same one we added the ‘Block’ action on. Add a ‘Block Attributes’ action.
2. Add an id and title.
3. Select ‘Class’ for the ‘Use as’.
4. For ‘Replace classes’ add ‘bg-primary’.
5. In the ‘Attribute Options’ choose ‘Select’ for ‘Control Type’.
6. In the ‘Values’ either enter each of the possible Bootstrap classes, one per line, or you can make the presentation a little prettier by adding a displayed name and the actual class separated by an equals sign, e.g. ‘success = bg-success’.

Wrap-up

You can see from this tutorial that making Gutenburg blocks is quite simple with the Pinegrow Web Editor. In the next tutorials we will explore making more complex nested blocks and prepare additional template pages for our theme.

Until then, have fun designing with Pinegrow!

Discuss this tutorial

Have questions or comments about this tutorial? Let’s talk about it on our forum.

Get in touch

Would you like to see your favorite theme or blocks library featured in the next tutorial? Let us know in the forum or by email!