In this tutorial video, we create a plugin with native WordPress blocks to display custom and dynamic data from blocks and custom post types inside a biography grid using the Pinegrow Web Editor. All with no code!
We create three versions of this block. 1) With no options to edit the content in the Block Editor. 2) With the ability to edit all fields, and conditionally show or hide items, using the Block Editor. 3) To dynamically create a custom post type, taxonomy, and fields using Pinegrow and Meta Box, then display that data using a custom query loop.
This is part 2 of 2 in this series. In Part 1, we built the card using plain HTML and CSS.
❗ See below for resources and timestamps.
📖 Video Transcript and Blog Post:
🧰 Resources:
• Part 1: Creating an Accessible HTML and CSS Biography Card –
• Completed project source files on Github –
🌐 My Website:
✅ Connect With Me:
• Facebook:
• LinkedIn:
• YouTube:
• Twitter:
• Instagram:
⚙️Tools I Use:
• WordPress.org:
• Pinegrow Website Editor:
⌚ Timestamps:
00:00 – Intro
00:26 – What we are building
00:55 – Re-introducing the biography card design
01:11 – Activating the Pinegrow WordPress Module
02:02 – Setting up the LocalWP Environment
02:42 – Creating the Plugin Folder
03:30 – Exporting the plugin
04:50 – Block Type 1 – Dumb Block
07:14 – Adding additional files to the exported block
08:27 – Adding the block CSS stylesheet
09:09 – Modifying the WP Twenty Twenty-Two theme content width
10:17 – Modifying plugin and theme header properties
11:09 – Block Type 2 – Smart Block
12:42 – Block structure – Inner and outer
13:20 – Creating the inner content smart action
13:58 – Creating the inner block
15:39 – Adding block actions to make content editable
18:04 – Limitations of inner content blocks
20:36 – Adding conditions to the social media icons
22:15 – Using expressions and variables
24:02 – Smart block summary
24:49 – Block Type 3 – Dynamic Block
26:22 – Registering the custom post type
29:01 – Registering the custom taxonomy
29:52 – Adding custom fields using Meta Box
33:17 – Adding all our employee records
34:21 – Adding our loop query
36:39 – Demonstrating a query the wrong way
37:26 – Fixing the looped items
37:52 – Pulling dynamic data into our blocks
39:18 – Getting data from Meta Box custom fields
40:47 – Generating hover and accessibility test dynamically
42:54 – Adding more employees dynamically
43:30 – Changing the order of the cards
44:04 – Making social icons conditional
44:42 – Exporting the plugin
45:54 – Outro
source