6

I am trying to set the default textColor of an Innerblocks => paragraph in my Gutenberg block plugin.

The problem seems to be that placeholder is an attribute but textColor is passed as a prop https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/paragraph/edit.js

Wondering if anyone has figured out how to set this. Or if it is not possible.

The documentation does not seem to cover this https://developer.wordpress.org/block-editor/developers/block-api/block-templates/

<InnerBlocks
  template={[
    ["core/paragraph", { placeholder: "Enter side content...", textColor: '#EF4A23' }]
  ]}
/>
3
  • Try customTextColor instead, I think it should work.
    – Alvaro
    Sep 10, 2019 at 22:54
  • I'm late to the party but have you figured it out? Nov 30, 2020 at 19:43
  • Did you figure this out? Same problem here. Mar 25, 2021 at 18:48

1 Answer 1

5

As of the end 2020, I have found that the best way to find attributes related to a core block is to inspect it with the react developer tools.

Under the components tab, search for [BLOCK_NAME]Edit to find the editing component, where [BLOCK_NAME] is something like "Paragraph", "Heading" or "Button".

Then on the right side in the inspector you can see the related attributes.

To answer the original question, at the current moment, the attribute is textColor.

const TEMPLATE = [
    [
        'core/paragraph',
        {
            textColor: '[YOUR-COLOR-SLUG]',
        },
    ]
]

In my case entering an hexadecimal value doesn't seem to work. But this might be because I have disabled the custom color selector globally.

1
  • Super helpful! I wasn't having any luck passing HEX values but the slug of a custom color added to the editor-color-palette did work. Great tip!
    – RCNeil
    Aug 16, 2022 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.