How to create custom Gutenberg blocks in WordPress

Development, WordPress

How to create custom Gutenberg blocks in WordPress

Will Morris's Layout avatar
Will Morris — March 27, 2019

WordPress 5.0 is out, and with it comes the new block-based editor, Gutenberg. Out of the box, it packs in a decent selection of blocks you can use across your pages and posts. However, since this is WordPress, there’s always room for more custom functionality.

In other words, it’s possible to build your own custom blocks. To do so, you’ll need to know at least a bit about coding, but the process itself is relatively straightforward. Plus, creating custom blocks for functionality you want to reuse can save you a lot of time down the road!

Note: When testing the Gutenberg editor or creating custom blocks, be sure to make changes in a staging or local environment, like Local. Click here to learn more about testing WordPress 5.0!

For this article, I’ll talk a bit more about the current state of the Block Editor. Then, I’ll go over how to create new blocks manually, and introduce you to a couple of plugins that can simplify the process. Let’s get to it!

Why you might need to create custom blocks for the new WordPress editor

Of course, blocks are central to the functionality of the new editor. The idea is that you can add blocks anywhere you want and arrange them usings rows and columns. Here’s what the editor looks like without any makeup:

Here’s what you’ll see when you add a new block to one of your posts or pages:

While the functionality of each block is different, adding and editing them usually works much the same. The problem is, at the moment, the Block Editor is still relatively new – so the selection of blocks at your disposal isn’t too impressive right now.

Of course, the collection of blocks available to you will surely increase over time. WordPress’ core will add new elements, and plugin developers will fill in the blanks (as they usually do). In fact, there are already a handful of plugins that add new blocks to the Block Editor, including Atomic Blocks and Stackable.

However, if there’s a particular block you’d like to utilize but can’t find, there’s only one option at your disposal – creating a custom block you can use with the Gutenberg Editor.

How to manually create custom blocks (in 2 steps)

The Gutenberg Editor’s Block API is the tool you’re going to need. In this section, I’ll help you set up a new plugin to add a block to your editor. To do so, all you’ll need are two files (and some code).

Step 1: Create a plugin to call up your block files

The cleanest way to create a custom Gutenberg Editor block is by setting up a plugin that ‘enqueues’ or calls up your block scripts, and adds them to the editor.

To get started, access your website via SFTP using a client such as FileZilla. Once you’re in, navigate to your WordPress root folder and into the wp-content/plugins directory. Inside, you’ll find folders for all the plugins on your website:

Now, right-click anywhere you want within the directory and create a new folder. I’ll call mine test-block, but yours can be relevant to you:

Open the folder, create a new plugin.php file (which can be given a more relevant name), then open the empty file, and add the following code:

<?php
/**
 * Plugin Name: Test Plugin
 * Author: John Doe
 * Version: 1.0.0
 */
 
function loadMyBlock() {
  wp_enqueue_script(
    'my-new-block',
    plugin_dir_url(__FILE__) . 'test-block.js',
    array('wp-blocks','wp-editor'),
    true
  );
}
  
add_action('enqueue_block_editor_assets', 'loadMyBlock');

This creates a function to enqueue your block script – test-block.js, in this case. Of course, this file doesn’t exist yet (but will soon).

In addition, the function also includes two script dependencies – wp-blocks and wp-editor. The former handles block registration among other functionality, whereas wp-editor includes several basic components you might need, such as Rich Text.

Step 2: Register your block and configure its attributes

With the PHP file ready, it’s time to set up the test-block.js JavaScript file. Go ahead and create this file within the same plugin directory as plugin.php:

When the file is ready, open it using a text editor, and prepare to code! This example is a very simple block to let you add a text box with a border to your pages:

/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */
 
wp.blocks.registerBlockType('brad/border-box', {
  title: 'Simple Box',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {type: 'string'},
    color: {type: 'string'}
  },
 
/* This configures how the content and color fields will work, and sets up the necessary elements */
 
  edit: function(props) {
    function updateContent(event) {
      props.setAttributes({content: event.target.value})
    }
    function updateColor(value) {
      props.setAttributes({color: value.hex})
    }
    return React.createElement(
      "div",
      null,
      React.createElement(
        "h3",
        null,
        "Simple Box"
      ),
      React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
      React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
    );
  },
  save: function(props) {
    return wp.element.createElement(
      "h3",
      { style: { border: "3px solid " + props.attributes.color } },
      props.attributes.content
    );
  }
})

As you can see, this uses JavaScript with React to set everything up. I also added a couple of comments to the code, but to summarize, it registers and configures the basic block attributes. After the initial section, I configured the way the fields would work. This example included a text field and a color picker for the border.

After saving the test-block.js file, activate the plugin from within WordPress:

Next, open the Block Editor and add a new block in order to check how it displays:

Here’s what the block’s interface looks like:

This simple block comprises of the most important fundamentals to take forward into your own projects. Of course, you can make your blocks as simple or complex as you want, but broadly speaking, this is all you need to publish a block.

However, getting to the publishing stage will require you to develop your coding skills. For example, you’ll want to brush up on your JavaScript, since the Block Editor uses the language extensively. It’s a bit of a change from working mostly with PHP, but you can do some equally great stuff, and maybe more!

2 plugins you can use to create custom blocks

Learning how to manually create custom blocks is great if you want to understand how the Block API works. However, there are WordPress plugins you can use to help you create blocks more quickly. Here are two top contenders!

1. Block Lab

Simply put, Block Lab enables you to create custom blocks directly from your WordPress dashboard. The plugin lets you set up as many blocks as you like, and you can set a name, category, icon, description, and indicate what fields you want to include for each of them.

However, be aware that you still need to do some light coding to set up each block’s template. Even so, you do get to skip most of the legwork of registering each block and enqueueing its script.

2. Lazy Blocks

If you’d rather not deal with any code at all, Lazy Blocks might be up your alley. This plugin enables you to create custom blocks using a list of pre-built elements, including text, password, and image fields, as well as color and date pickers, among others.

The selection of useable elements is broad enough that you can put together some cool blocks, but if you want to create something highly specific, you’ll likely be better served with a more advanced solution.

Conclusion

If you’ve been using WordPress for a while, chances are you’ve tried to expand the now Classic Editor’s functionality with plugins. Creating custom Block Editor elements is a similar situation, only there are new tools and languages to leverage. In any case, extending what the editor can do has a lot of potential to make your work easier, so it’s worth exploring your options.

You can boil down the process of creating a custom Block Editor block to two steps:

  1. Create a plugin that calls up your block’s JavaScript.
  2. Use a JavaScript file to register your new block and set its attributes.

And remember, always use a test environment like Local to safely experiment away from your live site!

A screenshot of Local by Flywheel

What’s next?

Create and test your custom Gutenberg blocks with Local for free!

Learn more about Local here!

Do you have any questions about how to set up custom Block Editor blocks? Ask away in the comments section below!

Comments ( 140 )
  1. LorenzoBlize

    May 11, 2025

    reliable online pharmacy Cialis [url=https://zipgenericmd.com/#]FDA approved generic Cialis[/url] best price Cialis tablets

    Reply
  2. Jeremyfax

    May 11, 2025

    best price Cialis tablets: generic tadalafil - Cialis without prescription

    Reply
  3. Albertoseino

    May 11, 2025

    secure checkout Viagra: order Viagra discreetly - buy generic Viagra online

    Reply
  4. LorenzoBlize

    May 11, 2025

    best price Cialis tablets [url=https://zipgenericmd.com/#]buy generic Cialis online[/url] best price Cialis tablets

    Reply
  5. RonaldFOEFS

    May 11, 2025

    https://maxviagramd.com/# fast Viagra delivery

    Reply
  6. Albertoseino

    May 10, 2025

    doctor-reviewed advice: modafinil 2025 - modafinil legality

    Reply
  7. RobertKet

    May 10, 2025

    reliable online pharmacy Cialis: buy generic Cialis online - affordable ED medication

    Reply
  8. Albertoseino

    May 10, 2025

    FDA approved generic Cialis: generic tadalafil - online Cialis pharmacy

    Reply
  9. Albertoseino

    May 10, 2025

    Cialis without prescription: buy generic Cialis online - Cialis without prescription

    Reply
  10. RonaldFOEFS

    May 10, 2025

    http://zipgenericmd.com/# buy generic Cialis online

    Reply
  11. Albertoseino

    May 10, 2025

    affordable ED medication: best price Cialis tablets - buy generic Cialis online

    Reply
  12. Jeremyfax

    May 10, 2025

    affordable ED medication: discreet shipping ED pills - buy generic Cialis online

    Reply
  13. RonaldFOEFS

    May 9, 2025

    https://zipgenericmd.shop/# buy generic Cialis online

    Reply
  14. Albertoseino

    May 9, 2025

    best price for Viagra: no doctor visit required - legit Viagra online

    Reply
  15. LorenzoBlize

    May 9, 2025

    modafinil 2025 [url=https://modafinilmd.store/#]modafinil 2025[/url] legal Modafinil purchase

    Reply
  16. RonaldFOEFS

    May 9, 2025

    https://zipgenericmd.shop/# affordable ED medication

    Reply
  17. Albertoseino

    May 9, 2025

    purchase Modafinil without prescription: modafinil legality - modafinil 2025

    Reply
  18. LorenzoBlize

    May 9, 2025

    buy generic Viagra online [url=https://maxviagramd.shop/#]generic sildenafil 100mg[/url] fast Viagra delivery

    Reply
  19. Jeremyfax

    May 9, 2025

    modafinil 2025: doctor-reviewed advice - safe modafinil purchase

    Reply
  20. RobertKet

    May 9, 2025

    Viagra without prescription: fast Viagra delivery - buy generic Viagra online

    Reply
  21. RonaldFOEFS

    May 9, 2025

    https://maxviagramd.com/# safe online pharmacy

    Reply
  22. Albertoseino

    May 9, 2025

    doctor-reviewed advice: modafinil 2025 - verified Modafinil vendors

    Reply
  23. RobertKet

    May 9, 2025

    safe modafinil purchase: purchase Modafinil without prescription - modafinil pharmacy

    Reply
  24. Jeremyfax

    May 9, 2025

    same-day Viagra shipping: cheap Viagra online - Viagra without prescription

    Reply
  25. LorenzoBlize

    May 9, 2025

    modafinil pharmacy [url=http://modafinilmd.store/#]safe modafinil purchase[/url] modafinil pharmacy

    Reply
  26. RonaldFOEFS

    May 9, 2025

    https://modafinilmd.store/# modafinil legality

    Reply
  27. ZackaryCaush

    May 8, 2025

    http://pinuprus.pro/# pin up вход

    Reply
  28. ZackaryCaush

    May 6, 2025

    https://vavadavhod.tech/# вавада официальный сайт

    Reply
  29. Richardmat

    May 6, 2025

    pin up az [url=https://pinupaz.top/#]pin up[/url] pin-up

    Reply
  30. Richardmat

    May 6, 2025

    вавада официальный сайт [url=https://vavadavhod.tech/#]вавада[/url] vavada casino

    Reply
  31. Richardmat

    May 5, 2025

    пин ап казино официальный сайт [url=https://pinuprus.pro/#]pin up вход[/url] пин ап казино официальный сайт

    Reply
  32. ZackaryCaush

    May 4, 2025

    http://pinuprus.pro/# пин ап казино

    Reply
  33. Richardmat

    May 3, 2025

    pin up az [url=http://pinupaz.top/#]pinup az[/url] pin-up

    Reply
  34. ZackaryCaush

    May 2, 2025

    http://vavadavhod.tech/# вавада

    Reply
  35. ZackaryCaush

    May 2, 2025

    https://pinuprus.pro/# pin up вход

    Reply
  36. Richardmat

    May 1, 2025

    pin up casino [url=http://pinupaz.top/#]pin up az[/url] pin-up casino giris

    Reply
  37. ZackaryCaush

    May 1, 2025

    http://pinuprus.pro/# pin up вход

    Reply
  38. Kennethsheby

    April 30, 2025

    вавада зеркало: вавада официальный сайт - vavada

    Reply
  39. Richardmat

    April 30, 2025

    вавада официальный сайт [url=https://vavadavhod.tech/#]вавада официальный сайт[/url] вавада казино

    Reply
  40. ZackaryCaush

    April 30, 2025

    http://pinuprus.pro/# пин ап вход

    Reply
  41. ElmerSip

    April 30, 2025

    pin up casino: pin up az - pin-up

    Reply
  42. Kennethsheby

    April 30, 2025

    вавада: вавада зеркало - vavada casino

    Reply
  43. Richardmat

    April 30, 2025

    пинап казино [url=https://pinuprus.pro/#]пин ап казино[/url] пинап казино

    Reply
  44. ZackaryCaush

    April 30, 2025

    http://vavadavhod.tech/# вавада

    Reply
  45. Kennethsheby

    April 30, 2025

    вавада: vavada - вавада казино

    Reply
  46. Richardmat

    April 30, 2025

    pinup az [url=https://pinupaz.top/#]pin-up casino giris[/url] pin up azerbaycan

    Reply
  47. ZackaryCaush

    April 30, 2025

    http://pinuprus.pro/# пин ап вход

    Reply
  48. Kennethsheby

    April 30, 2025

    вавада: вавада зеркало - вавада официальный сайт

    Reply
  49. Richardmat

    April 30, 2025

    pin up вход [url=http://pinuprus.pro/#]пин ап зеркало[/url] пин ап казино официальный сайт

    Reply
  50. ZackaryCaush

    April 30, 2025

    http://vavadavhod.tech/# вавада казино

    Reply
  51. ElmerSip

    April 30, 2025

    пин ап вход: пин ап вход - пин ап вход

    Reply
  52. Kennethsheby

    April 30, 2025

    пин ап казино официальный сайт: pin up вход - пин ап казино официальный сайт

    Reply
  53. Richardmat

    April 30, 2025

    пин ап казино официальный сайт [url=http://pinuprus.pro/#]пин ап вход[/url] пин ап вход

    Reply
  54. MichaelFaulp

    April 30, 2025

    Medicine From India: indian pharmacy - Medicine From India

    Reply
  55. Michaeljouch

    April 29, 2025

    Medicine From India [url=https://medicinefromindia.shop/#]indian pharmacy online[/url] indian pharmacy online

    Reply
  56. Dannysit

    April 29, 2025

    pharmacy rx world canada: ExpressRxCanada - canadian medications

    Reply
  57. Stevendrype

    April 29, 2025

    canadian drugstore online: ExpressRxCanada - drugs from canada

    Reply
  58. Dannysit

    April 29, 2025

    canada drugs online: ExpressRxCanada - best canadian pharmacy to order from

    Reply
  59. Stevendrype

    April 29, 2025

    MedicineFromIndia: indian pharmacy online - Medicine From India

    Reply
  60. Michaeljouch

    April 29, 2025

    mexican rx online [url=http://rxexpressmexico.com/#]mexico drug stores pharmacies[/url] Rx Express Mexico

    Reply
  61. Dannysit

    April 29, 2025

    canadapharmacyonline: Canadian pharmacy shipping to USA - my canadian pharmacy

    Reply
  62. Stevendrype

    April 29, 2025

    mexican online pharmacy: mexican rx online - mexican online pharmacy

    Reply
  63. Michaeljouch

    April 29, 2025

    Medicine From India [url=https://medicinefromindia.shop/#]indian pharmacy online[/url] Medicine From India

    Reply
  64. MichaelFaulp

    April 29, 2025

    canadian pharmacy online: Buy medicine from Canada - cheap canadian pharmacy online

    Reply
  65. Walterhap

    April 29, 2025

    http://expressrxcanada.com/# canadian pharmacy 24h com

    Reply
  66. Dannysit

    April 29, 2025

    pharmacy website india: MedicineFromIndia - indian pharmacy online

    Reply
  67. Stevendrype

    April 29, 2025

    canadian pharmacies: Generic drugs from Canada - canadian world pharmacy

    Reply
  68. Michaeljouch

    April 29, 2025

    medication from mexico pharmacy [url=http://rxexpressmexico.com/#]mexico pharmacies prescription drugs[/url] mexico drug stores pharmacies

    Reply
  69. MichaelFaulp

    April 29, 2025

    RxExpressMexico: mexico pharmacies prescription drugs - mexico drug stores pharmacies

    Reply
  70. Walterhap

    April 29, 2025

    http://expressrxcanada.com/# canadian pharmacy checker

    Reply
  71. Dannysit

    April 29, 2025

    indian pharmacy: indian pharmacy online - indian pharmacy online

    Reply
  72. Stevendrype

    April 29, 2025

    canadian pharmacy world reviews: Buy medicine from Canada - legit canadian online pharmacy

    Reply
  73. Michaeljouch

    April 28, 2025

    Rx Express Mexico [url=http://rxexpressmexico.com/#]mexican online pharmacy[/url] Rx Express Mexico

    Reply
  74. MichaelFaulp

    April 28, 2025

    canadian pharmacy near me: Canadian pharmacy shipping to USA - canada pharmacy 24h

    Reply
  75. Walterhap

    April 28, 2025

    https://rxexpressmexico.com/# medication from mexico pharmacy

    Reply
  76. Stevendrype

    April 28, 2025

    indian pharmacy online: medicine courier from India to USA - indian pharmacy online

    Reply
  77. Dannysit

    April 28, 2025

    canada drugs online reviews: Canadian pharmacy shipping to USA - best canadian pharmacy

    Reply
  78. MichaelFaulp

    April 28, 2025

    indian pharmacy: indian pharmacy online - MedicineFromIndia

    Reply
  79. Michaeljouch

    April 28, 2025

    canadian pharmacy 365 [url=https://expressrxcanada.com/#]Express Rx Canada[/url] buy canadian drugs

    Reply
  80. Dannysit

    April 28, 2025

    canada pharmacy 24h: Canadian pharmacy shipping to USA - canadian 24 hour pharmacy

    Reply
  81. Stevendrype

    April 28, 2025

    best canadian online pharmacy reviews: ExpressRxCanada - adderall canadian pharmacy

    Reply
  82. Walterhap

    April 28, 2025

    http://expressrxcanada.com/# prescription drugs canada buy online

    Reply
  83. MichaelFaulp

    April 28, 2025

    RxExpressMexico: mexican online pharmacy - mexico pharmacy order online

    Reply
  84. Dannysit

    April 28, 2025

    Rx Express Mexico: mexico pharmacies prescription drugs - Rx Express Mexico

    Reply
  85. Walterhap

    April 28, 2025

    https://medicinefromindia.com/# top online pharmacy india

    Reply
  86. Stevendrype

    April 28, 2025

    canadian pharmacy oxycodone: Canadian pharmacy shipping to USA - onlinecanadianpharmacy 24

    Reply
  87. Michaeljouch

    April 28, 2025

    Medicine From India [url=https://medicinefromindia.shop/#]MedicineFromIndia[/url] indian pharmacy

    Reply
  88. Bradleyfup

    April 28, 2025

    Acheter Kamagra site fiable: kamagra oral jelly - kamagra gel

    Reply
  89. PeterUnomb

    April 28, 2025

    pharmacie en ligne pas cher [url=http://pharmafst.com/#]Livraison rapide[/url] Achat mГ©dicament en ligne fiable pharmafst.shop

    Reply
  90. BernardVeida

    April 28, 2025

    Tadalafil 20 mg prix sans ordonnance: Acheter Viagra Cialis sans ordonnance - Cialis sans ordonnance pas cher tadalmed.shop

    Reply
  91. BilliesniCt

    April 28, 2025

    kamagra livraison 24h: kamagra pas cher - kamagra oral jelly

    Reply
  92. Robertmut

    April 27, 2025

    http://kamagraprix.com/# acheter kamagra site fiable

    Reply
  93. Robertmut

    April 27, 2025

    https://kamagraprix.com/# kamagra livraison 24h

    Reply
  94. PeterUnomb

    April 27, 2025

    kamagra 100mg prix [url=https://kamagraprix.com/#]Kamagra Commander maintenant[/url] Achetez vos kamagra medicaments

    Reply
  95. Bradleyfup

    April 27, 2025

    Kamagra pharmacie en ligne: kamagra gel - kamagra en ligne

    Reply
  96. PeterUnomb

    April 26, 2025

    kamagra livraison 24h [url=https://kamagraprix.shop/#]kamagra en ligne[/url] kamagra livraison 24h

    Reply
  97. BilliesniCt

    April 26, 2025

    vente de mГ©dicament en ligne: Meilleure pharmacie en ligne - acheter mГ©dicament en ligne sans ordonnance pharmafst.com

    Reply
  98. Bradleyfup

    April 26, 2025

    Kamagra Oral Jelly pas cher: kamagra pas cher - kamagra en ligne

    Reply
  99. BernardVeida

    April 26, 2025

    pharmacie en ligne france livraison internationale: pharmacie en ligne pas cher - pharmacie en ligne avec ordonnance pharmafst.com

    Reply
  100. Robertmut

    April 26, 2025

    https://kamagraprix.com/# Kamagra Oral Jelly pas cher

    Reply
  101. BilliesniCt

    April 26, 2025

    cialis prix: cialis prix - cialis generique tadalmed.shop

    Reply
  102. Bradleyfup

    April 26, 2025

    Pharmacie Internationale en ligne: pharmacie en ligne pas cher - pharmacie en ligne livraison europe pharmafst.com

    Reply
  103. PeterUnomb

    April 26, 2025

    cialis sans ordonnance [url=http://tadalmed.com/#]Tadalafil 20 mg prix sans ordonnance[/url] Cialis sans ordonnance 24h tadalmed.com

    Reply
  104. Robertmut

    April 26, 2025

    http://pharmafst.com/# vente de mГ©dicament en ligne

    Reply
  105. BernardVeida

    April 26, 2025

    Kamagra Oral Jelly pas cher: kamagra gel - achat kamagra

    Reply
  106. BilliesniCt

    April 26, 2025

    Pharmacie en ligne livraison Europe: pharmacie en ligne - pharmacie en ligne fiable pharmafst.com

    Reply
  107. BernardVeida

    April 25, 2025

    Pharmacie en ligne Cialis sans ordonnance: Achat Cialis en ligne fiable - Tadalafil achat en ligne tadalmed.shop

    Reply
  108. PeterUnomb

    April 25, 2025

    pharmacie en ligne livraison europe [url=https://pharmafst.shop/#]Pharmacie en ligne France[/url] pharmacie en ligne france livraison belgique pharmafst.shop

    Reply
  109. BernardVeida

    April 25, 2025

    pharmacie en ligne livraison europe: pharmacie en ligne sans ordonnance - pharmacie en ligne pas cher pharmafst.com

    Reply
  110. Robertmut

    April 25, 2025

    https://tadalmed.com/# Cialis sans ordonnance 24h

    Reply
  111. BilliesniCt

    April 25, 2025

    acheter kamagra site fiable: kamagra livraison 24h - kamagra en ligne

    Reply
  112. PeterUnomb

    April 25, 2025

    acheter mГ©dicament en ligne sans ordonnance [url=https://pharmafst.shop/#]Pharmacie en ligne France[/url] Pharmacie en ligne livraison Europe pharmafst.shop

    Reply
  113. Robertmut

    April 25, 2025

    https://pharmafst.com/# Pharmacie en ligne livraison Europe

    Reply
  114. Bradleyfup

    April 25, 2025

    Tadalafil 20 mg prix en pharmacie: Cialis sans ordonnance 24h - Tadalafil achat en ligne tadalmed.shop

    Reply
  115. BilliesniCt

    April 25, 2025

    pharmacie en ligne pas cher: Pharmacie en ligne France - Pharmacie Internationale en ligne pharmafst.com

    Reply
  116. PeterUnomb

    April 25, 2025

    pharmacie en ligne fiable [url=https://pharmafst.com/#]pharmacie en ligne pas cher[/url] acheter mГ©dicament en ligne sans ordonnance pharmafst.shop

    Reply
  117. BernardVeida

    April 25, 2025

    pharmacie en ligne france livraison belgique: Meilleure pharmacie en ligne - pharmacie en ligne pas cher pharmafst.com

    Reply
  118. BernardVeida

    April 25, 2025

    pharmacie en ligne pas cher: Pharmacie en ligne France - pharmacie en ligne france livraison belgique pharmafst.com

    Reply
  119. DavidSaisp

    April 24, 2025

    achat kamagra: kamagra en ligne - kamagra gel

    Reply
  120. Drift Boss unblocked 66

    April 18, 2025

    drift boss new game site. thanks for article

    https://drift-boss-76.github.io/

    Reply
  121. unblocked

    March 21, 2025

    It was amasing post. Lets try to plau unblocked games

    https://unblocked.symbaloo.com/

    Reply
  122. unblocked games

    March 18, 2025

    thanks for details. Must visit unblocked web site

    https://gogithub.xyz/

    Reply
  123. cookie clicker

    March 17, 2025

    thanks for all. Unblocked always good.

    https://diepio.app/

    Reply
  124. unblocked games 76

    March 17, 2025

    thanks for all. Unblocked always good.

    https://diepio.app/

    Reply
  125. livros de dark romances

    March 11, 2025

    You have a great site and content, I'm glad you liked it here. 71858114

    https://livrodetodos.com.br

    Reply
  126. create a binance account

    March 4, 2025

    Your article helped me a lot, is there any more related content? Thanks!

    Reply
  127. livro antiotario

    March 2, 2025

    You have a great site and content, I'm glad you liked it here. 25502590

    https://livroantiotario.com.br

    Reply
  128. unblocked 76

    March 1, 2025

    good post for unblocked games. thanks

    https://unblocked-games-76.symbaloo.com

    Reply
  129. paper io 2 unblocked

    February 26, 2025

    paper.io unblocked games. thanks for your post

    https://www.symbaloo.com/mix/paper-io-unblocked-here

    Reply
  130. Alex

    August 21, 2020

    Sad that is not working

    Reply
  131. james

    October 23, 2019

    Thanks for sharing this tutorial. Can you also please guide me how can I create a block template? I am doing the same using this resource https://wpitech.com/create-wordpress-gutenberg-block-templates/ but it’s giving an error and I am having some programming lines in front end. This is the code
    add_action( ‘init’, function() {
    $args = array(
    ‘public’ => true,
    ‘label’ => ‘News’,
    ‘show_in_rest’ => true,
    ‘template_lock’ => ‘all’,
    ‘template’ => array(
    array( ‘core/paragraph’, array(
    ‘placeholder’ => ‘Breaking News’,

    Reply
  132. Rob

    October 21, 2019

    Hey, thanks for the Block Lab shout out. :)
    We've been busy making the plugin even better, so if anyone has any questions, we'd love to help out.

    Reply
  133. Rushax

    October 9, 2019

    ACF now gives you the functionality to create custom Gutenberg blocks too.

    Reply
  134. Phuc Le

    June 30, 2019

    Nice tutorial, I am developing my custom gutenberg block but having problems to create a dropdown list with styles. I want to add the class to the container, depending on the chosen style.
    Do you have any experience, how to create a dropdown list in the inspector in es5?

    Reply
  135. Alvina

    June 25, 2019

    Can you please guide me how can I create a block template as I have seen a tutorial https://www.cloudways.com/blog/create-wordpress-gutenberg-block-templates/ and trying to implement the same but I am having error in registering code

    add_action( ‘init’, function() {
    $args = array(
    ‘public’ => true,
    ‘label’ => ‘News’,
    ‘show_in_rest’ => true,
    ‘template_lock’ => ‘all’,
    ‘template’ => array(
    array( ‘core/paragraph’, array(
    ‘placeholder’ => ‘Breaking News’,
    ) ),
    array( ‘core/image’, array(
    ‘align’ => ‘right’,
    ) ),
    ),
    );

    } );

    Can you please help me?

    Reply
  136. Valerie Way

    June 5, 2019

    Hello Will! Thanks for the to-the-point guide. Hopefully, my knowledge of WordPress will eventually evolve to let me build custom Gutenberg blocks (and your guide truly contributes to this a lot!)

    But yes, as you stated above, the market of ready-made Gutenberg blocks plugin is expanding constantly so that no-novice-already-but still-not-savvy-enough users like me can still get some additional blocks. P.S. one that I currently use myself, except the ones mentioned, is Getwid plugin, 24 blocks as of now - https://wordpress.org/plugins/getwid/ (hopefully, this can be of use for someone too).

    But surely, the ability to create one's own blocks truly gives you free rein, so thank you for bringing the knowledge to us!

    Reply
    • Wayne

      August 2, 2019

      Yeah, it is really cool. This is my first time exploring blocks. But luckily I know React JS. So this makes life so sweet.

      Reply
  137. Karoliene

    March 24, 2019

    My first contact with Gutenberg wasn't promising, however after following this guide I find the new editor quite useful. It gives many additional features in comparison to the old one. It only requires some patience.

    Reply
  138. ghdsports

    March 15, 2019

    More of the people don't know how to create Gutenberg blocks in WordPress site. You made some nice points there and It’s an awesome piece of writing in favor of all the web people.

    Reply
  139. Rachel L. Green

    March 14, 2019

    Thanks for this awesome guide.
    This guide helps me a lot in creating Gutenberg blocks on my website.

    Again thanks a lot.

    Reply
  140. شرکت حسابداری

    March 7, 2019

    i realy happy to see wordpress grown fast soon . in drupal and joomla hav a free page builder and huge config it's too wordpress and grow fast with gutenberg

    Reply

Join the discussion

Similar articles