Creating a custom lottery number generator block

tdrayson

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
  • Sub heading
    • id: lottery-generator__sub-heading
    • type: text
  • Number of balls
    • id: lottery-generator__numballs
    • type: number
  • Range minimum
    • id: lottery-generator__range-min
    • type: number
  • Range maximum
    • id: lottery-generator__range-max
    • type: number
  • Link
    • id: lottery-generator__link
    • type: link
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.

Members content only

Become a SnippetClub member to gain instant access to this tutorial plus tons more premium content.

Already a member? Log in below.

Login Form

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

Newsletter

🔒I won't send you spam, I promise