Getting RGBA colour from gutenberg colourpicker

If you mean wp.components.ColorPicker which is based on react-color, then the tint object also contains a rgb property with an object of the RGBA value like {r: 51, g: 51, b: 51, a: 1}.

So in your code, you can use:

style={{ backgroundColor: `rgba(${tint.rgb.r}, ${tint.rgb.g}, ${tint.rgb.b}, ${tint.rgb.a})` }}

And an easy trick to know all the available properties in the color object is by running console.log( tint ).. 🙂

Related Posts:

  1. Gutenberg disallow certain custom blocks but keep all core blocks?
  2. Validation error: Extending Gutenberg gallery block
  3. Gutenberg: Error loading block: Invalid parameter(s): attributes but it can be used in the code
  4. How to disable Gutenberg editor?
  5. How to create gutenberg block using REST API independently or as headless way?
  6. Show missing Sidebar from Gutenberg admin area
  7. Gutenberg: How to use output of php render_callback function in the block editors backend?
  8. Gutenberg: How to use block attributes with ServerSideRenderer?
  9. Gutenberg: Difference between “import” and “const” for dependencies
  10. Gutenberg Block: Objects are not valid as a React child (found: [object HTMLDivElement])
  11. How to add custom style to Gutenberg?
  12. How to find out what blocks are added by a plugin
  13. Passing select control value to block
  14. Passing RichText attributes to function onChange
  15. How do I store information in a dynamic block in WordPress?
  16. Gutenberg List Extension Block
  17. How to create custom embed block in gutenberg wordpress
  18. How to get variables from fucntion.php to my plugin files
  19. Gutenberg: How to refresh ServerSideRender with useSelect and AsyncModeProvider true?
  20. Global variables during plugin activation , deactivation and uninstall operarations
  21. Plugin echos text from shortcode function in gutenberg page editor
  22. How do I prevent the link from using url of the image in Block Editor?
  23. Plugin. Html code in Template
  24. How to add Internationalization in WordPress using Javascript/React?
  25. how to disable blockrenderAppender inside all Innerblocks?
  26. Cannot find a list of data selectors for Gutenberg editor
  27. Set and access global variable
  28. Add button gutenberg help
  29. className not populating in custom block
  30. Gutenberg block can’t save richtext
  31. Use gutenberg block editor on plugin page (outside of a post)
  32. Using SVN to upload plugin created with gutenberg blocks
  33. I am not receiving className in a ServerSideRender component
  34. Will Gutenberg Have a Negative Impact on Page Speed?
  35. Woocommerce Create custom product type with variations
  36. Add comments for template variables
  37. Can’t get Gutenberg InspectorControls to work
  38. Gutenberg Block Style CSS Class Is Not Applying on Backend
  39. How to find out whether a plugin is used in pages or posts?
  40. “uagb/section and uagb/columns block”
  41. Add text to variable
  42. React error #231with Custom Blocks after upgrade to WP 5.5
  43. serverSideRender does not render “preview” html inside Gutenberg block
  44. How to have a gallery in which each image’s caption is a whole “post”?
  45. Set Multiple Meta Values as an Array Using dispatch( ‘core/editor’ ).editPost() Call in Gutenberg/JS
  46. Passing PHP Variables to AJAX Loaded Pages
  47. Shortcode and variable
  48. What’s the best way to echo out a filter variable?
  49. Defining the value of a variable before a function?
  50. Elementor Combined all Sections into 1 Text Editor
  51. Use a custom block in another block
  52. Set Button in PluginDocumentSettingPanel Content (WordPress Gutenberg)
  53. How can I disable an attribute from a Gutenberg block included in a template via InnerBlocks?
  54. WP REST API GET Method Works But Not The POST Method
  55. WordPress Gutenberg custom block
  56. WordPress latest core update conflicting with newspack-newsletter plugin
  57. Gutenberg: Prevent links from being clickable in the block. Error: “Cannot destructure property ‘frameElement’ of ‘r’ as it is null.”
  58. How to display emails as a post?
  59. Javascript console errors and WSOD on edit post pages
  60. @wordpress/scripts advanced usage
  61. Has blocks gutenberg block multiples registers type in my Plugin
  62. Fixed: Console.log twice in the edit function
  63. Possible way of having multiple Gutenberg instances for a page?
  64. How to resolve warning for `unstableOnSplit` prop on a DOM element in block editor
  65. Gutenberg Block: How to reload a ServerSideRender?
  66. How to change the width of certain paragraph or header blocks?
  67. Defining constant in a plugin to use in another plugin
  68. Block content rendering on the top just below body tag
  69. Looking for Image Slider that is based on default WP Media Library
  70. Gutenberg editor in WordPress 5.0.3 /wp-json/wp/v2/pages/4713/autosaves?_locale=user 500 (Internal Server Error)
  71. How to display variables from plugin?
  72. fix undefined variable in native wp files
  73. Passing variable from template file to the plugin file
  74. Editing Global Variables from Inside Functions
  75. Gutenberg: Dynamic Block – Show saved data in the editor
  76. Global Handle to Class unavailable in Plugin?
  77. Create plugin with multiple blocks
  78. How to change post status to draft in Gutenberg?
  79. Custom gutenberg block image preview not working
  80. How can I utilize the same “show more” functionality that I see in superuser on my own WordPress site?
  81. Gutenberg Block to Select Category Term
  82. How do I set register_meta for a specific CPT?
  83. Block Missing from Inserter When Following Block Tutorial
  84. How do I save meta key value in the save function?
  85. Update Content for a Custom Block Toolbar Button
  86. How can I display an attribute from each post inside foreach($latest_posts1 as $post )
  87. Wrong block appender button showing
  88. How to get attributes from block.js into php
  89. How to get custom setting from get_option and pass it in getEntityRecords in gutenberg block?
  90. Accessible ‘List Carousel’ block/pattern?
  91. Vanilla javascript in custom gutenberg block not working
  92. How can we extent core/group or cover block?
  93. How to register a template in [NEW] WordPress site editor through a plugin
  94. How to display title, description etc in block images?
  95. Why is my drop down empty
  96. PHP Fatal error: Cannot redeclare distance() when making a new block
  97. WordPress Gutenberg Custom Block the viewScript does not get loaded on the frontend when my block is inserted
  98. I have to select text from gutenberg editor. Purpose is to store and replace text
  99. How do I apply different block supports to different parts of my custom block?
  100. Custom Gutenberg blocks not showing in WP editor