How to dynamically add style tags to Gutenberg editor in react

  • Is there any way to add a dynamic style tag to the editor content area by react. The inner content will change by editing. Is any component or hook can use?

    <div class="edit-post-visual-editor__content-area">
  ...Add style tag...
  <div class="is-desktop-preview">
    <div class="editor-styles-wrapper>
    </div>
  </div>
</div>
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    You may be able to use Gutenberg Blocks built-in functionality to add extra class/classes to a block and style it using that.
    When you add a block you have the Advanced section on the right sidebar and there is an “ADDITIONAL CSS CLASS(ES)” section where you can add one or more and use space if you want multiple
    Please refer to screenshot
    https://ibb.co/QdCWMQ7

    Thread Starter weweloo

    (@weweloo)

    But this method requires a block to be added to the content area. Is there a way to automatically add a piece of css code that can be dynamically modified when the page is created?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to dynamically add style tags to Gutenberg editor in react’ is closed to new replies.