Support

Account

Home Forums Gutenberg ACF Block preview html is sanitized in Gutenberg?

Solved

ACF Block preview html is sanitized in Gutenberg?

  • Hi there,

    I have build a custom video header Gutenberg block using the acf_register_block_type syntax and it’s working nicely!

    One of the fields in this block is a video_file upload and I’m using this field to display an (inline & autoplay) video in my blade view:

    @if ($video_file->url)
    	<figure class="{{ $block->classes }}__video">
    		<video class="{{ $block->classes }}__source" width="{!! $video_file->width !!}" height="{!! $video_file->height !!}" playsinline autoplay muted loop>
    			<source src="{!! $video_file->url !!}" type="video/mp4">
    			<p>{!! __('Your browser does not support this video', 'textdomain') !!}</p>
    		</video>
    		<x-video-controls progress/>
    	</figure>
    @endif

    On my frontend this is working great! However, in the Gutenberg editor, in the Acf preview mode, I see that these video attributes are stripped out: playsinline autoplay muted loop. If I manually add these in the DOM, the video works.

    How can I avoid these tags from being stripped out?

    Thanks!

  • Hey @twansparant!

    This was a fun one to look into!

    Turns out, React’s behaviour for tags like that will be false, so because you’re using JSX parsing for the block, it’s reading it as “false” and not showing it at all.

    If you set them all to “playsinline=’true'” they will work correctly, apart from “muted”, which never appears in the DOM – but this appears to be a known issue with React, and the while the video will actually be muted, it won’t appear in the DOM: https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react

    Hope this helps!

  • Thanks @lgladdy!
    I will try this asap, sounds logical 🙂

  • Yep, that did the trick!
    Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.