How to use PanelColorSettings in custom Gutenberg block?

First you need to import the component – 

const {
    PanelColorSettings,
} = wp.editor;

then inside the InspectorControls you call the component

<PanelColorSettings
                    title={ __( 'Color Settings' ) }
                    colorSettings={ [
                        {
                            value: color,
                            onChange: ( colorValue ) => setAttributes( { color: colorValue } ),
                            label: __( 'Background Color' ),
                        },
                        {
                            value: textColor,
                            onChange: ( colorValue ) => setAttributes( { textColor: colorValue } ),
                            label: __( 'Text Color' ),
                        },
                    ] }
                >

</PanelColorSettings>

Related Posts:

  1. Using Primary Color in Plugin Block
  2. ServerSideRender and Media Object: attributes passing image data object to php renderer even though it’s not set
  3. Where to save Gutenberg plugin data?
  4. Custom plugin not appearing
  5. In Which Contexts are Plugins Responsible for Data Validation/Sanitization?
  6. Best way to abort plugin in case of insufficient PHP version?
  7. What do you think about custom designed plugin/theme options UIs?
  8. Adding pre-publish checks with Gutenberg
  9. Allowing for multiple template views on the Gallery Settings page when using the Visual Editor
  10. How to make repeated component/block in Gutenberg
  11. How to get data from WordPress $wpdb into React Gutenberg Blocks Frontend?
  12. When is it appropriate to put functions on page template vs. functions.php?
  13. Plugin Sidebar is not Saving Meta Attribute to Post/Page after “Update”
  14. What’s the Right Way to get and save remote data for a Gutenberg block?
  15. WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
  16. Looking for callback function after Gutenberg is rendered?
  17. Error : “Updating failed: The response is not a valid JSON response” with custom shortcode
  18. Delete a specific item menu when I deactivate my plugin
  19. Is there a better way to implement responsive images than what WordPress uses by default?
  20. Are we allowed to use the Allman (BSD) indent style when coding WordPress plugins and themes?
  21. Gutenberg: useDispatch is not a function – @wordpress/data included
  22. Gutenberg Block add element in the Editor inside InnerBlocks after div – editor-block-list
  23. Make a list with header and subtext in Gutenberg blocks
  24. How do you render_callback for register_block_type to a method in another class?
  25. Get the password key when using the wp_new_user_notification_email filter
  26. Order properties should not be accessed directly
  27. How to deal with equal & similar arguments for a function?
  28. How insert negative values in Gutenberg box-control
  29. Executing a function upon webhook calling wordpress
  30. Customizer: widget-synced triggers twice
  31. how to use hook deleted_user into custom function to delete user from custom table
  32. Where to store the name of a custom table?
  33. WordPress is automatically linking plain text email addresses
  34. Is Using WordPress Supplied WYSIWYG Advisable?
  35. Are block templates incompatible with serialize_blocks?
  36. How do I dynamically render an InnerBlock inside a dynamic block?
  37. WordPress Block Development – trouble importing from @wordpress/icons
  38. Clearing caches on plugin uninstall
  39. How to use a hook to override an update_post_meta call in a plugin?
  40. How to access noticeOperations from withNotices
  41. How to insert text at the current cursor position in Gutenberg?
  42. Do I have to worry about useState causing a re-render?
  43. How to get boolean value from register_meta properly?
  44. JSX in WordPress Plugin Development
  45. ResizableBox with RangeControl not working
  46. jQuery selectors for editor elements safe to use?
  47. There is a problem in the gutenberg block I developed. Problem is with withInstanceId
  48. How to modify files inside wp-includes directory in wordpress
  49. How to set a cookie for logged in users to md5($user->ID . “my_secret”)?
  50. Create Widget or Enable Shortcodes in Sidebar
  51. Catching Gutenberg sidebar switch event
  52. Proper way to use useSelect
  53. Use npm and wp-env to make production bundle
  54. How to save post meta as an array in Gutenberg?
  55. WordPress Gutenberg InnerBlocks renderAppender not showing with template
  56. Gutenberg – is it ok to load dependencies multiple times?
  57. Preventing double loading JS scripts (like React) when developing for Gutenberg
  58. how to save wp_editor html content in options table
  59. How to use a WP_Customize_Control outside of the Customizer?
  60. How to determine which capability to use?
  61. Console errors in 6.0-RC1 Widget screen
  62. Custom Block Not Shown in Block Inserter
  63. How to use attributes in competent of Gutenberg
  64. var(–text-color) in style.scss works once but not twitch
  65. Custom Endpoint – Does it possible to use PUT method with WP API Rest?
  66. Why won’t this submenu page show? – My First WordPress Plugin
  67. wordpress full site editing problem when extending core blocks
  68. Pass custom props to
  69. Rerender core Templates with with ToggleControl but it doesnt recognize block type
  70. What happens/fires when you select a block in the editor?
  71. How to use setAttributes outside of the edit function return
  72. Where do I hook to have the server do something in PHP on block attribute change?
  73. Reading plugin settings in esnext wordpress block
  74. Rate limiting ajax requests in WordPress
  75. Does hooking into a plugin action / filter override the plugin’s function for that hook?
  76. How to get access the ID of all posts of custom post type in Gutenberg editor
  77. Determine if the current page, is being edited
  78. WordPress delete mysql rows with string
  79. Making adding info to an overlay bio easy for average user?
  80. Associating special meaning with user id 0
  81. Theming Custom Plugin Page
  82. Best practice: What belongs in theme and what in plugin for large eCommerce website
  83. Link to a admin submenu item using a custom link
  84. Adding class to the parent of current-post-ancestor / current-menu-parent / current-post-parent
  85. Dynamic banner for use on external sites
  86. How do I store a custom dataset in WordPress to best take advantage of API?
  87. Developing Themes on WordPress, Looking for Excellent Tutorials [closed]
  88. How to Implement SAM Broadcaster with WordPress? [closed]
  89. Gutenberg’s Popover component position relative to the focused element
  90. Gutenberg: – Call a function after Server Side Component is rendered
  91. Accept only PDF file for upload
  92. Help interpreting @wordpress/create-block-tutorial-template usage error
  93. How can I add a custom button to the post editor?
  94. How to get custom user meta by id in custom Gutenberg block
  95. Block Development: hamburger module throwing error in save function
  96. Adding a navigation with wp_nav_menu() to a custom block in the site editor
  97. Why isn’t custom sidebar panel not showing up in the Gutenberg Editor?
  98. REST API error in block editor for custom templates
  99. How can I include React useState in a custom gutenberg block plugin?
  100. Set srcset on a block image

Leave a Comment

tech