So, if I want to add any custom styles or scripts in a block’s CSS or JS file, I usually add them in the PHP file associated with the block (the render property in block.json).
Add the following code to the PHP file at the end –
$beautiful_option = get_option('beautiful');
wp_add_inline_script('some-script', 'const BEAUTIFUL_OPTION=' .$beautiful_option, 'before');
Just make sure to add any appropriate checks and validations for the code.
Seems a bit hacky but has worked so far for me.
Related Posts:
- Custom action button in Gutenberg editor (post_submitbox_misc_actions – equivalent)
- Adding pre-publish checks with Gutenberg
- How to make repeated component/block in Gutenberg
- Using Primary Color in Plugin Block
- How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?
- Create Element From Dynamic HTML String [closed]
- Plugin Sidebar is not Saving Meta Attribute to Post/Page after “Update”
- What’s the Right Way to get and save remote data for a Gutenberg block?
- WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
- Looking for callback function after Gutenberg is rendered?
- How to Parse an Array of Elements in Gutenberg Block
- Error : “Updating failed: The response is not a valid JSON response” with custom shortcode
- Is there a better way to implement responsive images than what WordPress uses by default?
- Gutenberg registerFormatType with Multiple Classes
- Gutenberg: useDispatch is not a function – @wordpress/data included
- Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list
- Make a list with header and subtext in Gutenberg blocks
- Gutenberg – What is the best way to save/update post meta?
- How do you render_callback for register_block_type to a method in another class?
- How to create multiple Gutenberg blocks in one plugin
- How to get color name in PanelColorSettings in custom Gutenberg block?
- How insert negative values in Gutenberg box-control
- Are block templates incompatible with serialize_blocks?
- ServerSideRender and Media Object: attributes passing image data object to php renderer even though it’s not set
- WordPress Block Development – trouble importing from @wordpress/icons
- Is there an additional block.json property to set to get an InnerBlocks child to respect the “supports” property?
- How to setAttributes in Gutenberg block?
- How to access noticeOperations from withNotices
- How to prevent UNDO on guternberg block editor
- How to insert text at the current cursor position in Gutenberg?
- How to override gutenberg paragraph block edit property
- Do I have to worry about useState causing a re-render?
- What’s the right way to instantiate new blocks and/or the plugin itself in toto when using wppb architecture?
- Creating a custom Gutenberg block with columns
- How to get boolean value from register_meta properly?
- JSX in WordPress Plugin Development
- How can I get the selected string when using a toolbar button in Gutenberg?
- jQuery selectors for editor elements safe to use?
- There is a problem in the gutenberg block I developed. Problem is with withInstanceId
- Gutenberg table block with Bootstrap .table class
- How to control an elements classes from multiple Gutenberg sidebar controls?
- How to add a gradient component to a custom block
- How to only load css for used blocks on frontend
- Additional classes `undefined` after saving post in Gutenberg
- How do you submit a Gutenberg plugin?
- Invalid hook call on save, not edit when using swiper slider
- Proper way to use useSelect
- How to add template colors to custom block options in WordPress Gutenberg editor sidebar?
- How to properly package a block plugin
- Developing the save function in Gutenberg blocks
- WordPress Gutenberg InnerBlocks renderAppender not showing with template
- Modify custom block plugin without losing content
- Console errors in 6.0-RC1 Widget screen
- How to override supports of innerBlocks?
- When setting styles to an extended block that was saved as a pattern, it doesn’t remove the style that was there
- Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
- extraprops override existing props
- Trigger function on Remove block or add new block in Gutenberg JavaScript
- WPGut – Updating failed and shortcode?
- Gutenberg – Call google map render function in save after DOM has been rendered
- Gutenberg block breaks when showing new data
- HTMLCollection not counting right in editor? / for loop not working on elements in DOM
- Is “document loaded” different on admin side than public side?
- How to re-render inspector controls?
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Where to save Gutenberg plugin data?
- Gutenberg component in a plugin admin
- How to integrate plugins into block editor
- Add custom html classes to gutenberg wrapper
- How to create save function for custom Gutenberg style block?
- Gutenberg and custom blocks messed up pagespeed score. What did I wrong?
- Gutenberg text field validation
- Undo operation not working in Rich text [Gutenberg]
- How can i add insertion point between inner blocks in my custom block like core blocks
- Render raw html in Gutenberg block
- Build a dynamic block using the default attributes
- Add custom data-attribute to core Gutenberg block within an template
- How to replace content of a block in and re-render on change?
- extending a core block doesn’t work inside the editor
- REST API error in block editor for custom templates
- Reinitiate Gutenburg’s blocks using javascript
- Remove Gutenberg Buttons Block
- Set srcset on a block image
- Insert text programmatically in WordPress Gutenberg Editor
- Javascript function defined in view.js not reachable from save.js
- WordPress 6.6.1 – Trying to make a block but receive error, “! Cannot read property ‘then’ of undefined”
- Event when Modal is opened/visible
- Template locked block does not show appender
- Multiple php files in dynamic gutenberg block
- Access DOM Element in Gutenberg Block on WP Admin Post Edit Screen
- Custom Gutenberg Block ‘Stylized List’ – Incorrect Rendering and Looping of List Items
- How to detect when the user clicks the publish/update button in Gutenberg Editor
- Gutenberg Static blocks: viewScript doesn’t import css for frontend?
- Custom Gutenberg block with nested InnerBlocks renderAppender not displaying add button
- Is It Possible to Use the Block Editor’s Notification Feature to Send Another Notification After the Post Is Saved?
- Output HTML Tags In Gutenberg Block
- Can we write custom DOM manipulation inside edit.js file while developing custom Gutenberg block?
- User set default settings for a Block in Site Editor
- how to include an image in the build of a multi block plugin
- Insert Button in to the Block Editor (Header) Toolbar