• How can we make a pattern with a media plus text block using a static image?
    Here is the code I have in our theme to build the Pattern:

    register_block_pattern(
            'wordexpresso/full-width-image-text',
                    array(
                        'title'       => 'Image + Text (White)',
                        'content'     => "<!-- wp:media-text {\"align\":\"full\",\"mediaId\":1,\"mediaLink\":\"https://i.picsum.photos/id/634/1800/530.jpg?hmac=-7fgKw-OPyLPQXvD_n_XgnVlUoO1VgMb4Pka40T3C6o\",\"mediaType\":\"image\",\"mediaSizeSlug\":\"accent\",\"verticalAlignment\":\"center\",\"imageFill\":true} -->\n<div class=\"wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center is-image-fill\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https://i.picsum.photos/id/634/1800/530.jpg?hmac=-7fgKw-OPyLPQXvD_n_XgnVlUoO1VgMb4Pka40T3C6o);background-position:50% 50%\"><img src=\"https://i.picsum.photos/id/634/1800/530.jpg?hmac=-7fgKw-OPyLPQXvD_n_XgnVlUoO1VgMb4Pka40T3C6o\" alt=\"\" class=\"wp-image-113 size-accent\"/></figure><div class=\"wp-block-media-text__content\"><!-- wp:heading -->\n<h2>Heading here</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium aliquet nibh, id dictum elit laoreet in. Suspendisse tempus dictum tristique. Vivamus at lacinia turpis. Proin efficitur rutrum felis a iaculis. Aliquam in convallis tortor. In varius dolor at erat congue rhoncus. Curabitur tristique cursus nisl eu tempus.</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:media-text -->",
                        'categories'  => array( 'sections' ),
                        'keywords'  => array( 'image' ),
            )
    );

    You can see I have a generated placeholder image URL. But this Pattern causes a block validation error if the mediaId attribute is not a valid media ID on the site. I also tried setting the mediaID attribute to null like it is for the core Gallery Pattern that comes with WP. (the Gallery Pattern has this syntax: wp:gallery {“ids”:[null,null] but using null for the Media + Text block does not work)

    This is not conducive to standard web development processes where we have a staging site and a live site where the content may be different. I can’t guarantee a specific image ID will exist on a site where this Pattern is to be used. And what if the media item gets deleted out of the gallery?

    How can I write a functional Media + Text Pattern?

  • The topic ‘Gutenberg Patterns with Media + Text block’ is closed to new replies.