Learn WORDPRESS-GUTENBERG with Real Code Examples

# wordpress_gutenberg/demo/CounterBlock
1. Register a custom block with registerBlockType('myplugin/counter').
2. In the edit function, define a useState variable 'counter' initialized to 0.
3. Add a Button element and a Text element to display 'counter'.
4. On Button click, increment 'counter' and update Text.
5. Use save function to render the block content.
6. Add block to a post/page and preview to see the live counter increment.

A basic Gutenberg block that increments a counter when a button is clicked and updates a display in real time using JavaScript/React within a custom block.

# wordpress_gutenberg/demo/ProductListBlock
1. Register block 'myplugin/product-list'.
2. In edit function, fetch products using wp.apiFetch or props attributes.
3. Loop through products and render title and price.
4. Style list using block's CSS.
5. Save function returns static markup of products.
6. Insert block in page to display product list.

A Gutenberg block to display a list of products dynamically using React inside the block.

# wordpress_gutenberg/demo/FaqBlock
1. Register block 'myplugin/faq'.
2. In edit function, define FAQs as array of objects with question and answer.
3. Render each FAQ with toggle functionality using useState.
4. Save function outputs static HTML for frontend.
5. Insert block on page to see collapsible FAQ list.

A Gutenberg block that displays FAQs with collapsible answers using state.

# wordpress_gutenberg/demo/TestimonialBlock
1. Register block 'myplugin/testimonials'.
2. In edit, define testimonials array.
3. Loop through testimonials and render author + text.
4. Add styling via CSS.
5. Save outputs static HTML.
6. Add block to page/post.

A Gutenberg block displaying a list of testimonials with author and text.

# wordpress_gutenberg/demo/ImageGalleryBlock
1. Register block 'myplugin/image-gallery'.
2. Use MediaUpload component to select multiple images.
3. Display images in grid layout.
4. Save outputs static image markup.
5. Insert block to preview gallery.

A Gutenberg block that displays an image gallery with selectable images.

# wordpress_gutenberg/demo/VideoEmbedBlock
1. Register block 'myplugin/video-embed'.
2. In edit, add URL input field.
3. Render video iframe preview.
4. Save returns iframe markup.
5. Insert block on page/post to display video.

A Gutenberg block that allows embedding a video via URL or upload.

# wordpress_gutenberg/demo/CountdownBlock
1. Register block 'myplugin/countdown'.
2. In edit, define input for target date.
3. Render live countdown using useEffect and useState.
4. Save returns static placeholder or date.
5. Add block to page to see countdown in action.

A Gutenberg block that shows a countdown timer to a specified date.

# wordpress_gutenberg/demo/TabsBlock
1. Register block 'myplugin/tabs'.
2. In edit, define tabs as array of objects.
3. Render tab headings and content with active tab state.
4. Save returns HTML for tabs.
5. Insert block to display tabs on frontend.

A Gutenberg block that displays content in tabs with selectable headings.

# wordpress_gutenberg/demo/AlertBoxBlock
1. Register block 'myplugin/alert-box'.
2. In edit, add text input for message.
3. Render alert box with dismiss button.
4. Save returns static alert markup.
5. Insert block on page/post to see alert.

A Gutenberg block that displays a dismissible alert box with custom message.

# wordpress_gutenberg/demo/PricingTableBlock
1. Register block 'myplugin/pricing-table'.
2. In edit, define plans array with title, price, features.
3. Render table/grid of plans.
4. Save outputs static HTML markup.
5. Insert block on page/post to display pricing table.

A Gutenberg block that displays a pricing table with multiple plans.