Skip to content

JS doesn't render and breaks Elementor, editor screen just shows white or logo #1

@codewizard13

Description

@codewizard13

This is a great tutorial -- even being 4 years old -- until (19:28) the part about JavaScript. The instructions you provided don't seem to work anymore right there.

https://youtu.be/Ko9i153o_iU?si=jYroVBecoB1frCcz&t=1168

screen-elsm-s--LAR_DEV-540d--18--pg-demo--custom-ele-widget--tutwrk--render-backend

These are some things I noticed according to the official Elementor Developer docs:

advertisment.php:

  • _content_tempate(): has been renamed to remove the underscore prefix so now it is content_template()
  • This bit starting at line 99 breaks the backend editor -- it tries to load but gets stuck:
<#
  view.addInlineEditingAttributes( 'label_heading', 'basic' );
  view.addRenderAttribute(
     'label_heading',
     {
         'class': [ 'advertisement__label-heading' ],
     }
   );
#>
  • Replacing the preceding code with <h3>{{{ settings.label_heading }}}</h3> sort of works:
  protected function _content_template() {
  
  ?>
  
  <h3>{{{ settings.label_heading }}}</h3>

  <?php

  }
  • Even weirder, even with only label_heading being called in content_template(), the back end shows the same as the front end (render()):
  // Front end
  protected function render() {

    $settings = $this->get_settings_for_display();
    $this->add_inline_editing_attributes('label_heading', 'basic');
    $this->add_render_attribute(
      'label_heading',
      [
        'class' => ['advertisement__label-heading'],
      ]
    );

    ?>

    <div class="advertisement">
      <div <?php echo $this->get_render_attribute_string('label_heading') ?> >
        <?php echo $settings['label_heading']; ?>
      </div>

      <div class="advertisement__content">
        <div class="advertisement__content__heading">
          <?php echo $settings['content_heading']; ?>
        </div>
        <div class="advertisement__content__copy">
          <?php echo $settings['content']; ?>
        </div>
      </div>
    </div>


    <?php

  }

  // Back end
  protected function content_template() {
  
  ?>
  
  <h3>{{{ settings.label_heading }}}</h3>

  <?php

  }
  • I cleared cache - no change
  • Regenerated Elementor files and data - no change
  • Tried adding the underscore back to content_template() - no change

Why doesn't the JS render any different than the PHP when they should be showing different things (at this point, during testing the tutorial)?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions