Skip to content
pinegrow.com
Docs menuWordPress
WordPress

Custom block examples and tutorials

Updated

Become an expert block creator with the help of our step by step tutorials and examples.

On this page

Create Your First Block

Start with a piece of static HTML and turn it into a powerful block with editable attributes, inner blocks and sub-blocks. Then, create a dynamic block that displays the up-to-date content from the WordPress database.

Frontend page titled I Love Surfing Huge Waves with a surf photo and stat tiles showing 12m, 3, 8, 21 and 75m.

Simple Full Site Editing with Minimal Theme and Blocks

Use a minimal page template and custom blocks to implement a simple full site editing theme.

WordPress block editor list view with the Projects block selected, showing the Achievements heading and project images.

Flex - A block based theme with Tailwind CSS and Interactions

A fun tutorial on converting a Tailwind CSS project into a WordPress theme based on Gutenberg blocks. As a bonus, we will use Pinegrow Interactions to create a slider block and a pricing toggle.

Promo frame with TAILWIND CSS, WORDPRESS and INTERACTIONS labels over the Pinegrow editor showing a pricing section.

In this section