Рет қаралды 156
Pinegrow offers four different block types. This raises the question of when to use which block type. To understand the differences, let's build a testimonial block as a regular, hybrid and ACF block. We use the dynamic block to list testimonials from a custom post type.
00:00 - Introduction - What to expect
03:00 - Preview
03:28 - WordPress Installation Overview
04:17 - Copy the path to automatic.css
04:36 - Setting up the Pinegrow Project
05:56 - Create a section
07:06 - Initializing ACSS Classes
07:50 - Adding the Testimonial HTML Markup
08:54 - Creating the CSS file for the Blocks
09:19 - Defining the first Testimonial Block (Regular Block)
10:02 - First Plugin Export and Plugin activation
10:35 - Adding the Regular Block to the Page
10:44 - HTML Markup check
11:12 - Copy & Paste the Testimonial CSS
11:33 - Adding SVG stars
12:02 - data Attribute "data-rating"
12:32 - Add the CSS file to the block
12:51 - Assigning block actions (Regular Block)
14:26 - Testing the Regular Block
16:12 - Disadvantage of regular blocks
18:15 - Creating the Hybrid Blcok
20:26 - Using the Hybrid Block
21:35 - Structure changes are no problem anymore with Hybrid Blocks
21:53 - Creating the ACF Block
24:34 - The trick for the Avatar image
26:31 - Testing the ACF Block
26:54 - ACF Blocks are PHP Blocks with an input delay
28:33 - How behaves the ACF Block when the structure changes?
29:06 - Preparation for the Dynamic Block
29:43 - Creating the CPT "Testimonial"
30:01 - Reusing existing ACF fields
30:23 - Creating the dynamic Block
31:00 - The Card wrapper
31:44 - Adding the query
32:37 - Testing the dynamic Blok
32:49 - Adding some testimonial posts
33:07 - Beautifying the Testomonial grid
33:38 - Recap
Links
---------
@pinegrow : pinegrow.com/
GitHub Repo: github.com/Jeh...
Pinegrow Blocks Docu: pinegrow.com/d...
ACSS Website: automaticcss.com/
ACF field type "Image": www.advancedcu...
Blog article (german transcription): 56kblog.de/wor...