Custom JS and CSS for Gutenberg


  • Easily upload your code anyplace to your WordPress web page.

    • Javascript

        >Between <head> and </head> tags.
    • Before remaining </frame> tag.
    • Right to where of the block.
  • CSS

    • Between <head> and </head> tags.
    • Before remaining </frame> tag.
    • Right to where of the block.
  • Meta

    • Between <head> and </head> tags.
  • Multiple Javascript & CSS on one web page.

  • No output, instead of your code.

  • Optimized and speedy server aspect implementation.

  • Add The Block With Gutenberg

    • Create a brand new put up/web page or cross to the put up/web page you wish to upload the block.
    • Find Custom JS/CSS block at the Gutenberg blocks and upload it to the web page.

    Javascript

    • Easily upload your customized Javascript code to the web page.
    • Minify the output.
    • Write in Modern Javascript (Babel) and it’s going to be transformed to ES2015 at the fly.
    • Easily upload customized Javascript recordsdata to the web page, together with specified dependencies.

    Inline Javascript Code

    The specified Javascript code is positioned the place the block is on the output.

    • Click at the block.
    • Expand Javascript panel.
    • Write your code within the Javascript (Inline) textual content field.
    • Click on Min button to minify the output.
    • Select JS or Babel choices.
      • When JS is chosen, the script will probably be revealed as is.
      • When Babel is chosen, the script will probably be transformed to ES2015.

    Head Javascript

    The specified Javascript code is positioned between <head> and </head> tags.

    • Click at the block.
    • Expand Javascript panel.
    • Enable Enable Head Javascript possibility.
    • Click on Javascript Options (Head) button to look the choices. There will probably be a modal window.
    • Enter your Javascript code in case you. The specified Javascript code will probably be positioned between <head> and </head> tags. Leave empty if no code is needed.
      • When JS is chosen, the script will probably be revealed as is.
      • When Babel is chosen, the script will probably be transformed to ES2015.
    • Enter your Javascript document URL. The specified URL will probably be positioned between <head> and </head> tags. Leave empty if no document is needed.
    • Enter your Javascript document dependencies (comma seperated). The Javascript document URL will probably be enqueued in line with the required dependencies. Leave empty if no dependency is needed.

    The specified Javascript code is positioned proper sooner than remaining </frame> tag.

    • Click at the block.
    • Expand Javascript panel.
    • Enable Enable Footer Javascript possibility.
    • Click on Javascript Options (Footer) button to look the choices. There will probably be a modal window.
    • Enter your Javascript code in case you. The specified Javascript code will probably be positioned sooner than remaining </frame> tag. Leave empty if no code is needed.
      • When JS is chosen, the script will probably be revealed as is.
      • When Babel is chosen, the script will probably be transformed to ES2015.
    • Enter your Javascript document URL. The specified URL will probably be positioned sooner than remaining </frame> tag. Leave empty if no document is needed.
    • Enter your Javascript document dependencies (comma seperated). The Javascript document URL will probably be enqueued in line with the required dependencies. Leave empty if no dependency is needed.

    CSS

    • Easily upload your customized CSS code to the web page.
    • Minify the output.
    • Write in SASS or LESS and it’s going to be transformed to CSS at the fly.
    • Easily upload customized CSS recordsdata to the web page, together with specified dependencies.

    Inline CSS Code

    The specified CSS code is positioned the place the block is on the output.

    • Click at the block.
    • Expand CSS panel.
    • Write your code within the CSS (Inline) textual content field.
    • Click on Min button to minify the output.
    • Select CSS / SASS / LESS choices.
      • When CSS is chosen, the code will probably be revealed as is.
      • When SASS is chosen, the SASS code will probably be transformed to CSS.
      • When LESS is chosen, the LESS code will probably be transformed to CSS.

    Head CSS

    The specified CSS code is positioned between <head> and </head> tags.

    • Click at the block.
    • Expand CSS panel.
    • Enable Enable Head CSS possibility.
    • Click on CSS Options (Head) button to look the choices. There will probably be a modal window.
    • Enter your CSS code in case you. The specified CSS code will probably be positioned between <head> and </head> tags. Leave empty if no code is needed.
      • When CSS is chosen, the code will probably be revealed as is.
      • When SASS is chosen, the SASS code will probably be transformed to CSS.
      • When LESS is chosen, the LESS code will probably be transformed to CSS.
    • Enter your CSS document URL. The specified URL will probably be positioned between <head> and </head> tags. Leave empty if no document is needed.
    • Enter your CSS document dependencies (comma seperated). The CSS document URL will probably be enqueued in line with the required dependencies. Leave empty if no dependency is needed.

    The specified CSS code is positioned proper sooner than remaining </frame> tag.

    • Click at the block.
    • Expand CSS panel.
    • Enable Enable Footer CSS possibility.
    • Click on CSS Options (Footer) button to look the choices. There will probably be a modal window.
    • Enter your CSS code in case you. The specified CSS code will probably be positioned sooner than remaining </frame> tag. Leave empty if no code is needed.
      • When CSS is chosen, the code will probably be revealed as is.
      • When SASS is chosen, the SASS code will probably be transformed to CSS.
      • When LESS is chosen, the LESS code will probably be transformed to CSS.
    • Enter your CSS document URL. The specified URL will probably be positioned sooner than remaining </frame> tag. Leave empty if no document is needed.
    • Enter your CSS document dependencies (comma seperated). The CSS document URL will probably be enqueued in line with the required dependencies. Leave empty if no dependency is needed.

    Meta

    • Easily upload your meta tags to the web page.

    Meta Tag Content

    The specified meta tag is positioned between <head> and </head> tags.

    • Click at the block.
    • Expand Meta panel.
    • Enable Meta Tag Content possibility.
    • Write your meta tag content material within the Meta Tag Content textual content field.

    Credits

    • Babel
    • Uglify JS
    • SASS
    • LESS
    • Clean CSS
    • Gutenberg

    Changelog

    v1.0.5 (March 12 2020)
    - Packages and libraries are up to date.
    - Gutenberg deprecations are fastened.
    
    v1.0.4 (October 26 2019)
    - Package and library updates.
    
    v1.0.3 (August 31 2019)
    - Package updates.
    
    v1.0.2 (July 14 2019)
    - Package updates.
    
    v1.0.1
    - Package updates.
    - SASS library up to date.
    
    v1.0.0
    - Initial unencumber
    



    Source link

    Leave a Reply