In this tutorial, we will be creating a custom lottery number generator block using Blockstudio.
The code for this tutorial can very easily be converted to work with ACF or Metabox blocks method, and even a shortcode.
Demo
Not sure how to create a custom block? Check out my tutorial Creating custom blocks with Blockstudio.
1. Block.json settings
We will be using the new native blocks from Blockstudio which use block.json schema.
Fields we are creating:
- Heading
- id:
lottery-generator__heading - type:
text
- id:
- Sub heading
- id:
lottery-generator__sub-heading - type:
text
- id:
- Number of balls
- id:
lottery-generator__numballs - type:
number
- id:
- Range minimum
- id:
lottery-generator__range-min - type:
number
- id:
- Range maximum
- id:
lottery-generator__range-max - type:
number
- id:
- Link
- id:
lottery-generator__link - type:
link
- id:
JSON
// block.json { "$schema": "https://app.blockstudio.dev/schema", "apiVersion": 2, "name": "the-creative-tinker/lottery-generator", "title": "Lottery Generator", "category": "blockstudio", "icon": "star-filled", "description": "Display a lottery ball generator", "keywords": [ "number" ], "supports": { "align": false }, "blockstudio": { "attributes": [ { "id": "lottery-generator__heading", "type": "text", "label": "Heading", "default": "Lottery number generator" }, { "id": "lottery-generator__sub-heading", "type": "text", "label": "Sub heading" }, { "id": "lottery-generator__numballs", "type": "number", "label": "Number of balls", "default": "5", "min": 1 }, { "id": "lottery-generator__range-min", "type": "number", "label": "Range minimum", "default": "1", "min": 1 }, { "id": "lottery-generator__range-max", "type": "number", "label": "Range maximum", "default": "50", "min": 1 }, { "id": "lottery-generator__link", "type": "link", "label": "Link to external site", "hasRichPreviews": false, "opensInNewTab": true, "textButton" : "Edit external link", "noDirectEntry": true } ] } }Copy
2. Adding our block markup
Next we need to add our block markup to index.php file.