Before the Block Editor was implemented, the <figure> tag used to have an inline width styling, matching the value of the image inside, example:

<figure style="width:300px;">
    <img src=".jpg" width="300" height="100">
    <figcaption> text </figcaption>
</figure>

But since the Block Editor, this inline styling is removed:

<figure>
    ...
</figure>

How can we add this inline width styling back to the <figure> tag (avoiding a jQuery approach)?

Before the Block Editor was implemented, the <figure> tag used to have an inline width styling, matching the value of the image inside, example:

<figure style="width:300px;">
    <img src="https://example/image.jpg" width="300" height="100">
    <figcaption> text </figcaption>
</figure>

But since the Block Editor, this inline styling is removed:

<figure>
    ...
</figure>

How can we add this inline width styling back to the <figure> tag (avoiding a jQuery approach)?

• images
• block-editor

• Why? Or: what is it you are trying to achieve with this? Setting it to display: inline-block; might already solve many problems – kero Commented Apr 12, 2019 at 14:00
• I was just about to ask and suggest the exact same thing. I don't know if there is an easy way to do this without recreating the block, although there may be. – RiddleMeThis Commented Apr 12, 2019 at 14:04
• @kero @RiddleMeThis This is one of the cases where a simply display: inline-block; won't resolve it unfortunately. – Christine Cooper ♦ Commented Apr 12, 2019 at 14:07
• Could you do it similar to this solution? I've been trying with a pure JS method but cannot get the store working (blocks.getSaveElement filter gets URL and ID as third argument, but I've been unable to query given that ID to get the size) – kero Commented Apr 12, 2019 at 14:36

1 Answer 1

I am assuming you want this value on the front-end as opposed to needing it in the block editor due to the <figure> somehow not displaying correctly when viewed in the block editor.

If that is the case then you can use something similar to DOMDocument as per the following example:

Assume HTML of:

<div>
    <figure>
        <img src="https://example/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure>
        <img src="https://example/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure>
        <img src="https://example/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
</div>

Processing logic:

$html = '<!-- YOUR HTML -->';

libxml_clear_errors();
$libxml = libxml_use_internal_errors(true);

$dom = new DOMDocument;
$dom->loadHTML($html);

$elements = $dom->getElementsByTagName('figure');

foreach ($elements as $element) {
    foreach ($element->getElementsByTagName('img') as $img) {
        if ( $img->hasAttribute('width') ) {
            $width = $img->getAttribute('width');
            $element->setAttribute('style', "width:{$width}px;");
        }
    }
}

libxml_clear_errors();
libxml_use_internal_errors($libxml);

// for debugging purposes print out the modified HTML
echo $dom->saveHTML();

Feel free to add more conditional guards/checks for existing style attributes so you can append/parse accordingly as my example shows a basic use-case only to get you started assuming this method is suitable for you.

Resulting output $dom->saveHTML():

<div>
    <figure style="width:300px;">
        <img src="https://example/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure style="width:300px;">
        <img src="https://example/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
    <figure style="width:300px;">
        <img src="https://example/image.jpg" width="300" height="100">
        <figcaption> text </figcaption>
    </figure>
</div>

Notes:

• you could filter the content and/or resulting template prior to rendering on client via the_content and or similar
• you could optionally filter the content prior to save via save_post

LibXML/DOMDocument:

Due to issues with processing HTML5, DOMDocument will generate warnings as a result of errors raised within libxml. Word on the street is that these are fine to suppress however I was only able to suppress them via using:

• libxml_clear_errors();
• libxml_use_internal_errors();
• libxml_clear_errors();
• libxml_use_internal_errors();

Alternatively you could use @ suppresion on:

• @$dom->loadHTML($html);

...which is a little cleaner than the verbosity of four extra function calls.

Apparently this should work (since it was fixed):

$doc->loadHTML($html, LIBXML_NOWARNING);

...however I was unable to get this constant to work (could be version issues etc), see this and this.