Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BlockTuneAPI] why block.holder becomes undefined in the costractor❓

See original GitHub issue

Issue Description


block.holder becomes undefined in the costractor

constructor({ api, data, settings, block}) {
        this.api = api; = data;
        this.block = block;
        this.settings = settings || {};
        let copyLists = list => ({...list}))


in browser console

holder: undefined
isEmpty: [Exception: TypeError: Cannot read property 'querySelector' of undefined at t.get ( at t.get ( at o.get isEmpty [as isEmpty] ( at o (<anonymous>:1:83)]
name: "paragraph"
selected: [Exception: TypeError: Cannot read property 'classList' of undefined at t.get ( at o.get selected [as selected] ( at o (<anonymous>:1:83)]
stretched: [Exception: TypeError: Cannot read prop

i want holder elements


I’m using the block tune API to create an alignment tool.

    "time" : 1617635673974,
    "blocks" : [
            "type" : "paragraph",
            "data" : {
                "text" : "hello center text"
            "tunes" : {
                "aligmentTune" : {
                    "alignment" : "center"

In the data on the editor, it has an alignment. I want to use the "alignment" : "center" to add a css class to the holder in constructor. ex. block.holder.classList.add("text-aligment--center") but holder block’s undefined,

Is there any way to do that?

I could have used “wrap” method instead. @n0str @gohabereg

that my code

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

kaaaaaaaaaaaicommented, Apr 5, 2021

Thank you for your kindness. I’m going to wrap the block in its own wrapper element.

gohaberegcommented, Apr 5, 2021


  1. Constructor

We need Tune instance to be created before block.holder is created, because to create holder we need to call tune.wrap method. That’s why inside the Tune constructor block.holder is undefined

  1. wrap

tune.wrap is called in process of block.holder creation (because holder should contain wrapper elements), so inside wrap method block.holder is undefined as well.

  1. blockContent vs block.holder

Block holder is the element created by Editor core (with .ce-block class name), blockContent is an element provided by Tool directly

To safely use tunes it is recommended to wrap block content with you own wrapper and use it to apply styles because you can guarantee that wrapper accessibility.

However, we should definitely add some notices to console in case of incorrect block.holder access

Read more comments on GitHub >

github_iconTop Results From Across the Web

global javascript variable becomes undefined inside part of ...
The reason it becomes 'undefined' is because you set the imgWidth variable from within an event handler function which only executes at some...
Read more >
How to Avoid the Infamous "Cannot read properties of ... - Bitovi
When undefined becomes a problem. The function translatePowerLevel below takes a number as argument and returns strings one , two , many ...
Read more > - JavaScript - MDN Web Docs
target returns a reference to the constructor or function that new was called upon. In normal function calls, is undefined . Try...
Read more >
Undefined Variable in Jelly Block - ServiceNow Community
Negating the value results in 'true', leading me to believe that jvar_gr has somehow become undefined within the Jelly 'if' block.
Read more >
Cannot Read Property of Undefined in JavaScript - Rollbar
Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found