How to create custom Gutenberg blocks in WordPress

How to create custom Gutenberg blocks in WordPress

Will Morris's Layout avatar

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 ( 196 )

  1. Scottdroca

    May 15, 2025

    tadalafil tablets 20 mg side effects: Tadal Access - best reviewed tadalafil site

  2. FrankieLar

    May 15, 2025

    https://tadalaccess.com/# cialis experience forum

  3. JosephTes

    May 15, 2025

    cialis generico [url=https://tadalaccess.com/#]canadian cialis no prescription[/url] tadalafil long term usage

  4. FrankieLar

    May 15, 2025

    https://tadalaccess.com/# snorting cialis

  5. Scottdroca

    May 15, 2025

    tadalafil dapoxetine tablets india: TadalAccess - cialis by mail

  6. Lorenhag

    May 15, 2025

    cialis professional vs cialis super active: TadalAccess - purchase cialis

  7. FrankieLar

    May 14, 2025

    https://tadalaccess.com/# canada cialis

  8. JosephTes

    May 14, 2025

    maxim peptide tadalafil citrate [url=https://tadalaccess.com/#]TadalAccess[/url] cialis daily dose

  9. Scottdroca

    May 14, 2025

    cialis 5mg price walmart: TadalAccess - cialis price cvs

  10. Lorenhag

    May 14, 2025

    cialis prescription cost: TadalAccess - sildenafil vs cialis

  11. FrankieLar

    May 14, 2025

    https://tadalaccess.com/# how much does cialis cost at walgreens

  12. Scottdroca

    May 14, 2025

    mint pharmaceuticals tadalafil: buy cialis online reddit - generic tadalafil 40 mg

  13. JosephTes

    May 14, 2025

    cialis las vegas [url=https://tadalaccess.com/#]how long before sex should i take cialis[/url] best price for cialis

  14. Lorenhag

    May 14, 2025

    cialis free samples: tadalafil best price 20 mg - cheap cialis pills uk

  15. FrankieLar

    May 14, 2025

    https://tadalaccess.com/# cialis 20 mg how long does it take to work

  16. Scottdroca

    May 14, 2025

    buy cialis 20mg: cialis active ingredient - canadian pharmacy online cialis

  17. JosephTes

    May 14, 2025

    order cialis from canada [url=https://tadalaccess.com/#]TadalAccess[/url] tadalafil 20mg

  18. Lorenhag

    May 14, 2025

    tadalafil (megalis-macleods) reviews: cialis how does it work - walgreens cialis prices

  19. FrankieLar

    May 14, 2025

    https://tadalaccess.com/# how much does cialis cost per pill

  20. Scottdroca

    May 14, 2025

    cialis online without prescription: what cialis - cialis 20mg for sale

  21. Lorenhag

    May 14, 2025

    where can i buy cialis: TadalAccess - cialis wikipedia

  22. JosephTes

    May 14, 2025

    india pharmacy cialis [url=https://tadalaccess.com/#]Tadal Access[/url] cialis not working

  23. FrankieLar

    May 14, 2025

    https://tadalaccess.com/# were can i buy cialis

  24. RogerCouct

    May 13, 2025

    http://clomhealth.com/# can i get generic clomid online

  25. MatthewTom

    May 13, 2025

    order cheap clomid no prescription [url=https://clomhealth.com/#]Clom Health[/url] get clomid tablets

  26. Oscargef

    May 13, 2025

    how can i get generic clomid price: can you buy generic clomid online - how can i get clomid without a prescription

  27. Russellfeeve

    May 13, 2025

    buy clomid: cost generic clomid no prescription - cost of cheap clomid tablets

  28. RogerCouct

    May 13, 2025

    https://amohealthcare.store/# Amo Health Care

  29. MatthewTom

    May 13, 2025

    prednisone capsules [url=https://prednihealth.shop/#]PredniHealth[/url] PredniHealth

  30. Oscargef

    May 13, 2025

    Amo Health Care: amoxicillin discount - generic amoxicillin over the counter

  31. Russellfeeve

    May 13, 2025

    prednisone 2 mg daily: PredniHealth - 60 mg prednisone daily

  32. RogerCouct

    May 13, 2025

    http://prednihealth.com/# 10 mg prednisone

  33. MatthewTom

    May 13, 2025

    can i order generic clomid online [url=https://clomhealth.com/#]where can i buy cheap clomid pill[/url] clomid buy

  34. Russellfeeve

    May 13, 2025

    Amo Health Care: Amo Health Care - how to get amoxicillin over the counter

  35. Oscargef

    May 13, 2025

    PredniHealth: PredniHealth - where can i get prednisone over the counter

  36. RogerCouct

    May 13, 2025

    https://prednihealth.com/# PredniHealth

  37. JudsonZoown

    May 13, 2025

    how to buy clomid without prescription: order generic clomid no prescription - can you get clomid for sale

  38. Russellfeeve

    May 13, 2025

    can you get cheap clomid price: Clom Health - where can i buy cheap clomid without rx

  39. Oscargef

    May 12, 2025

    prednisone pak: buy prednisone 20mg - PredniHealth

  40. RogerCouct

    May 12, 2025

    https://clomhealth.shop/# cheap clomid price

  41. JudsonZoown

    May 12, 2025

    prednisone cream: prednisone brand name - PredniHealth

  42. Russellfeeve

    May 12, 2025

    where can you buy amoxicillin over the counter: Amo Health Care - buying amoxicillin online

  43. MatthewTom

    May 12, 2025

    PredniHealth [url=http://prednihealth.com/#]PredniHealth[/url] PredniHealth

  44. Oscargef

    May 12, 2025

    can i buy amoxicillin over the counter: buy amoxicillin from canada - Amo Health Care

  45. RogerCouct

    May 12, 2025

    https://amohealthcare.store/# Amo Health Care

  46. JudsonZoown

    May 12, 2025

    cost of clomid without a prescription: Clom Health - how can i get cheap clomid price

  47. Russellfeeve

    May 12, 2025

    Amo Health Care: amoxicillin brand name - amoxicillin 500mg price canada

  48. Oscargef

    May 12, 2025

    can i buy cheap clomid without dr prescription: Clom Health - can i get cheap clomid prices

  49. MatthewTom

    May 12, 2025

    Amo Health Care [url=https://amohealthcare.store/#]amoxicillin 500mg no prescription[/url] amoxicillin for sale online

  50. RogerCouct

    May 12, 2025

    http://clomhealth.com/# order clomid without a prescription

  51. JudsonZoown

    May 12, 2025

    PredniHealth: PredniHealth - prednisone 10 mg over the counter

  52. Oscargef

    May 12, 2025

    can you buy prednisone over the counter in canada: prednisone pharmacy prices - PredniHealth

  53. RogerCouct

    May 12, 2025

    http://prednihealth.com/# PredniHealth

  54. MatthewTom

    May 12, 2025

    PredniHealth [url=https://prednihealth.shop/#]online prednisone 5mg[/url] PredniHealth

  55. JudsonZoown

    May 12, 2025

    where to buy cheap clomid without rx: Clom Health - clomid pill

  56. Russellfeeve

    May 12, 2025

    can i order cheap clomid tablets: Clom Health - how to get generic clomid online

  57. LorenzoBlize

    May 11, 2025

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

  58. Jeremyfax

    May 11, 2025

    best price Cialis tablets: generic tadalafil - Cialis without prescription

  59. Albertoseino

    May 11, 2025

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

  60. LorenzoBlize

    May 11, 2025

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

  61. RonaldFOEFS

    May 11, 2025

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

  62. Albertoseino

    May 10, 2025

    doctor-reviewed advice: modafinil 2025 - modafinil legality

  63. RobertKet

    May 10, 2025

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

  64. Albertoseino

    May 10, 2025

    FDA approved generic Cialis: generic tadalafil - online Cialis pharmacy

  65. Albertoseino

    May 10, 2025

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

  66. RonaldFOEFS

    May 10, 2025

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

  67. Albertoseino

    May 10, 2025

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

  68. Jeremyfax

    May 10, 2025

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

  69. RonaldFOEFS

    May 9, 2025

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

  70. Albertoseino

    May 9, 2025

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

  71. LorenzoBlize

    May 9, 2025

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

  72. RonaldFOEFS

    May 9, 2025

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

  73. Albertoseino

    May 9, 2025

    purchase Modafinil without prescription: modafinil legality - modafinil 2025

  74. LorenzoBlize

    May 9, 2025

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

  75. Jeremyfax

    May 9, 2025

    modafinil 2025: doctor-reviewed advice - safe modafinil purchase

  76. RobertKet

    May 9, 2025

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

  77. RonaldFOEFS

    May 9, 2025

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

  78. Albertoseino

    May 9, 2025

    doctor-reviewed advice: modafinil 2025 - verified Modafinil vendors

  79. RobertKet

    May 9, 2025

    safe modafinil purchase: purchase Modafinil without prescription - modafinil pharmacy

  80. Jeremyfax

    May 9, 2025

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

  81. LorenzoBlize

    May 9, 2025

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

  82. RonaldFOEFS

    May 9, 2025

    https://modafinilmd.store/# modafinil legality

  83. ZackaryCaush

    May 8, 2025

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

  84. ZackaryCaush

    May 6, 2025

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

  85. Richardmat

    May 6, 2025

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

  86. Richardmat

    May 6, 2025

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

  87. Richardmat

    May 5, 2025

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

  88. ZackaryCaush

    May 4, 2025

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

  89. Richardmat

    May 3, 2025

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

  90. ZackaryCaush

    May 2, 2025

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

  91. ZackaryCaush

    May 2, 2025

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

  92. Richardmat

    May 1, 2025

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

  93. ZackaryCaush

    May 1, 2025

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

  94. Kennethsheby

    April 30, 2025

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

  95. Richardmat

    April 30, 2025

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

  96. ZackaryCaush

    April 30, 2025

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

  97. ElmerSip

    April 30, 2025

    pin up casino: pin up az - pin-up

  98. Kennethsheby

    April 30, 2025

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

  99. Richardmat

    April 30, 2025

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

  100. ZackaryCaush

    April 30, 2025

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

  101. Kennethsheby

    April 30, 2025

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

  102. Richardmat

    April 30, 2025

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

  103. ZackaryCaush

    April 30, 2025

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

  104. Kennethsheby

    April 30, 2025

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

  105. Richardmat

    April 30, 2025

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

  106. ZackaryCaush

    April 30, 2025

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

  107. ElmerSip

    April 30, 2025

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

  108. Kennethsheby

    April 30, 2025

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

  109. Richardmat

    April 30, 2025

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

  110. MichaelFaulp

    April 30, 2025

    Medicine From India: indian pharmacy - Medicine From India

  111. Michaeljouch

    April 29, 2025

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

  112. Dannysit

    April 29, 2025

    pharmacy rx world canada: ExpressRxCanada - canadian medications

  113. Stevendrype

    April 29, 2025

    canadian drugstore online: ExpressRxCanada - drugs from canada

  114. Dannysit

    April 29, 2025

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

  115. Stevendrype

    April 29, 2025

    MedicineFromIndia: indian pharmacy online - Medicine From India

  116. Michaeljouch

    April 29, 2025

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

  117. Dannysit

    April 29, 2025

    canadapharmacyonline: Canadian pharmacy shipping to USA - my canadian pharmacy

  118. Stevendrype

    April 29, 2025

    mexican online pharmacy: mexican rx online - mexican online pharmacy

  119. Michaeljouch

    April 29, 2025

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

  120. MichaelFaulp

    April 29, 2025

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

  121. Walterhap

    April 29, 2025

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

  122. Dannysit

    April 29, 2025

    pharmacy website india: MedicineFromIndia - indian pharmacy online

  123. Stevendrype

    April 29, 2025

    canadian pharmacies: Generic drugs from Canada - canadian world pharmacy

  124. Michaeljouch

    April 29, 2025

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

  125. MichaelFaulp

    April 29, 2025

    RxExpressMexico: mexico pharmacies prescription drugs - mexico drug stores pharmacies

  126. Walterhap

    April 29, 2025

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

  127. Dannysit

    April 29, 2025

    indian pharmacy: indian pharmacy online - indian pharmacy online

  128. Stevendrype

    April 29, 2025

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

  129. Michaeljouch

    April 28, 2025

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

  130. MichaelFaulp

    April 28, 2025

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

  131. Walterhap

    April 28, 2025

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

  132. Stevendrype

    April 28, 2025

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

  133. Dannysit

    April 28, 2025

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

  134. MichaelFaulp

    April 28, 2025

    indian pharmacy: indian pharmacy online - MedicineFromIndia

  135. Michaeljouch

    April 28, 2025

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

  136. Dannysit

    April 28, 2025

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

  137. Stevendrype

    April 28, 2025

    best canadian online pharmacy reviews: ExpressRxCanada - adderall canadian pharmacy

  138. Walterhap

    April 28, 2025

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

  139. MichaelFaulp

    April 28, 2025

    RxExpressMexico: mexican online pharmacy - mexico pharmacy order online

  140. Dannysit

    April 28, 2025

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

  141. Walterhap

    April 28, 2025

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

  142. Stevendrype

    April 28, 2025

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

  143. Michaeljouch

    April 28, 2025

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

  144. Bradleyfup

    April 28, 2025

    Acheter Kamagra site fiable: kamagra oral jelly - kamagra gel

  145. PeterUnomb

    April 28, 2025

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

  146. BernardVeida

    April 28, 2025

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

  147. BilliesniCt

    April 28, 2025

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

  148. Robertmut

    April 27, 2025

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

  149. Robertmut

    April 27, 2025

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

  150. PeterUnomb

    April 27, 2025

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

  151. Bradleyfup

    April 27, 2025

    Kamagra pharmacie en ligne: kamagra gel - kamagra en ligne

  152. PeterUnomb

    April 26, 2025

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

  153. BilliesniCt

    April 26, 2025

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

  154. Bradleyfup

    April 26, 2025

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

  155. BernardVeida

    April 26, 2025

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

  156. Robertmut

    April 26, 2025

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

  157. BilliesniCt

    April 26, 2025

    cialis prix: cialis prix - cialis generique tadalmed.shop

  158. Bradleyfup

    April 26, 2025

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

  159. PeterUnomb

    April 26, 2025

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

  160. Robertmut

    April 26, 2025

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

  161. BernardVeida

    April 26, 2025

    Kamagra Oral Jelly pas cher: kamagra gel - achat kamagra

  162. BilliesniCt

    April 26, 2025

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

  163. BernardVeida

    April 25, 2025

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

  164. 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

  165. BernardVeida

    April 25, 2025

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

  166. Robertmut

    April 25, 2025

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

  167. BilliesniCt

    April 25, 2025

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

  168. 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

  169. Robertmut

    April 25, 2025

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

  170. Bradleyfup

    April 25, 2025

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

  171. BilliesniCt

    April 25, 2025

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

  172. 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

  173. BernardVeida

    April 25, 2025

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

  174. BernardVeida

    April 25, 2025

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

  175. DavidSaisp

    April 24, 2025

    achat kamagra: kamagra en ligne - kamagra gel

  176. Drift Boss unblocked 66

    April 18, 2025

    drift boss new game site. thanks for article

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

  177. unblocked

    March 21, 2025

    It was amasing post. Lets try to plau unblocked games

    https://unblocked.symbaloo.com/

  178. unblocked games

    March 18, 2025

    thanks for details. Must visit unblocked web site

    https://gogithub.xyz/

  179. cookie clicker

    March 17, 2025

    thanks for all. Unblocked always good.

    https://diepio.app/

  180. unblocked games 76

    March 17, 2025

    thanks for all. Unblocked always good.

    https://diepio.app/

  181. 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

  182. create a binance account

    March 4, 2025

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

  183. livro antiotario

    March 2, 2025

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

    https://livroantiotario.com.br

  184. unblocked 76

    March 1, 2025

    good post for unblocked games. thanks

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

  185. paper io 2 unblocked

    February 26, 2025

    paper.io unblocked games. thanks for your post

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

  186. Alex

    August 21, 2020

    Sad that is not working

  187. 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’,

  188. 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.

  189. Rushax

    October 9, 2019

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

  190. 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?

  191. 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?

  192. 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!

    • 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.

  193. 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.

  194. 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.

  195. 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.

  196. شرکت حسابداری

    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

Join the discussion