Advertisement
Guest User

Untitled

a guest
Oct 13th, 2019
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.37 KB | None | 0 0
  1. File structure:
  2. ```
  3. |-- radicati
  4. |-- dist
  5. |-- lib
  6. |-- acf_gutenberg_blocks
  7. | |-- simple-button
  8. | | |-- simple-button.css
  9. | | |-- simple-button.js
  10. | | |-- simple-button.php
  11. | | |-- simple-button.scss
  12. | | |-- simple-button.svg
  13. | |-- block_custom-styles.js
  14. | |-- block_custom-styles.php
  15. | |-- block_registration.php
  16. |-- filters
  17. |-- gutenberg_blacklist.js
  18. |-- gutenberg_blacklist.php
  19. |-- update_button_href.php
  20. ```
  21.  
  22. For each block that you create in the `block_registration.php` file, you can enqueue styles and scripts that only load when the block is shown (front or backend). A gulp watch task compiles the scss files individually to css.
  23.  
  24. You can also set up a custom icon for your block. You can either use a dashicons string, or an svg stored as a string. For my Button block, I'm storing the contents of the svg file as a string in the 'icon' property using `file_get_contents()`. (I found it easier to edit the svg when I could view the file in the browser, and then I decided to keep that functionality by importing the file contents.)
  25.  
  26. Blocks can have alternate styles (added and removed in block-custom-styles.js) that are applied as classes around the block. Stylesheets then use those classes to display alternate styles.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement