Simple Gutenberg Counter Block Example - Wordpress-gutenberg Typing CST Test
Loading…
Simple Gutenberg Counter Block Example — Wordpress-gutenberg Code
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/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.Wordpress-gutenberg Language Guide
WordPress with Gutenberg is a content management system (CMS) and website building platform that allows users to create websites using a block-based editor for visual design, while also supporting themes, plugins, and custom code. Gutenberg focuses on modern, modular content creation.
Primary Use Cases
- ▸Blogs and publishing sites
- ▸Corporate websites and portfolios
- ▸Landing pages and marketing campaigns
- ▸E-commerce stores with WooCommerce
- ▸Membership and community sites
Notable Features
- ▸Block-based visual editor (Gutenberg)
- ▸Theme and plugin ecosystem
- ▸Custom post types and taxonomies
- ▸Media management and rich content support
- ▸Multisite and multilingual capabilities
Origin & Creator
WordPress was created in 2003 by Matt Mullenweg and Mike Little. Gutenberg, the block editor, was introduced in 2018 to modernize the content editing experience.
Industrial Note
WordPress with Gutenberg is widely used by bloggers, businesses, agencies, and developers to build dynamic websites, marketing pages, e-commerce stores, and membership sites with flexible content management.