0

How, if it's even possible can I do something like this in my theme? I don't want the h3 to be editable, but content would be.

    array( 'core/html', array( 
            'before'    =>  '<h3 style="font-size:1.34em;">',
            'content'   =>  '',
            'after'     =>  '</h3>'
    ) ),
5
  • Can you ellaborate/explain further? Do you mean you want to add a h3 as a default block that can be edited but can't be removed? Or that users can add headings but not remove them? Or HTML blocks? It's unclear/ambiguous what you mean, please use the edit link under the question to add clarifications. Focus on what the problem you're trying to solve is, rather than any methods of solving it or broken/incomplete solutions
    – Tom J Nowell
    Jan 31, 2020 at 18:41
  • Honestly, I would just use the heading block if I could add the styling attribute font-size, but wordpress only allows for classes. I don't want the user to be able to change the <h3 style ... but what is in between the h3 can be.
    – bckelley
    Jan 31, 2020 at 18:47
  • If making a heading bigger is the problem, why not ask about that? There are other ways to make headers bigger without adding inline CSS styles ( which are bad practice ). E.g. CSS rules that target the first h3 tag, CSS classes, custom blocks, etc. Keep in mind that post content is theme agnostic, you shouldn't be bundling CSS into blocks like that
    – Tom J Nowell
    Jan 31, 2020 at 19:14
  • I don't really care! This happens to be how I want it donw.
    – bckelley
    Jan 31, 2020 at 19:21
  • It may not be possible to do it this way, more context about what you're trying to do and how will help people devise solutions, and eliminate ones that won't work
    – Tom J Nowell
    Jan 31, 2020 at 19:24

1 Answer 1

1

Adding it the way you've suggested is not possible, and adding inline style attributes would be bad practice.

However, what you want is possible by adding CSS classes, e.g.

    array( 'core/heading', array( 
            'level'       =>  3,
            'className'   =>  'biggerh3',
            'placeholder' =>  'Bigger Heading Placeholder'
    ) ),

Then this CSS:

.biggerh3 { font-size: 1.34em; }

Or by adding a custom block that's naturally bigger.

Other solutions include:

CSS selectors! You could use a rule to target the first h3, e.g.

h3:first-of-type {
  font-size: 1.34em;
}

Or the 3rd h3:

h3:nth-child(3) {
  font-size: 1.34em;
}

The most gutenberg method would be to use block styles, which would even let you reuse this on other blocks, or change your mind at a later date about how it should be styled without having to go back and change all your posts

Your Answer

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

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