HTML block gutenberg templates

Question

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>'
    ) ),

Answer 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