Add Slide Background to Post Pattern

[mrjarbenne]

I'm trying to create some post patterns to extend the look on some sites. When I attempt to include the slide html in the pattern creation tool, I get this error:

I recognize that the slide post type contains the slide HTML automatically, so including it in a pattern may result in a slide within a slide, but in cases where I'm trying to set some default attributes on the slide block, how could we tackle that.

The test case is on this site: https://396.commons.hwdsb.on.ca/ where they are hoping that every slide contains a background image:

<!-- wp:slide/slide {"backgroundColor":"#0d52ad","backgroundUrl":"https://hwdsbcommons.s3.amazonaws.com/wp-content/uploads/sites/10319/2024/09/Blank.png","backgroundSize":"contain"} -->
<section data-background-color="#0d52ad" data-background-image="https://hwdsbcommons.s3.amazonaws.com/wp-content/uploads/sites/10319/2024/09/Blank.png" data-background-size="contain" class="wp-block-slide-slide"><!-- wp:heading -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:slide/slide -->

[r-a-y]

Using a block pattern to set the default slide background image might not be possible due to how block patterns are inserted within the slide contents as you mentioned above. In the meantime, perhaps you can set the background image manually for the slide:

Then save the slide as a draft and when a user wants to use the custom background slide, perhaps use the draft with a post duplicator plugin like Yoast Duplicate Post to save new slides with the background?

[mrjarbenne]

That's been our workflow (I was copying from the code editor and creating a pile of draft posts) but I wondered if there might be a more elegant solution.

I'll look at the Yoast plugin. That seems like a good strategy.

[r-a-y]

I have an idea of how we could do default background images. First, I need to know how you are creating and saving your block patterns.

I'm thinking we would need to add a button next to the existing "Add New Slide" button like "Add New Slide From Template" or something like that. When you click on that button, we'll pull the block pattern and that would override the default slide content that we set from here: https://github.com/hwdsb/reveal-presentations/blob/main/templates/default-content.html

[mrjarbenne]

I had thought I could go into Appearance / Patterns and then add a new pattern there, but when I attempted to copy the code with the <!-- wp:slide/slide code snippet (from above: #7 (comment)) I get that slide block error. That's the only way I know to create a pattern (I think because the slide block isn't supported in patterns currently, I'm unable to save a pattern directly in the post editor.)

Switching it to something like what you are suggesting will also probably help solve the issue that happens all the time, where users backspace too far, end up deleting the slide block, and then their content appears on top of every slide. At least if there was a background image it would be immediately apparent that the silde is broken.

I feel like maybe a check to see if the slide block exists prior to publishing might be useful, then people couldn't publish broken slides.

[r-a-y]

I'm about to push some updates to allow the creation of a slide block pattern and to use a block pattern as the slide template. However, I'm running into issues with repo access. Can you check to see if I have permissions to push updates to this repo?

[r-a-y]

For now, I've put the changes on production.

The 396.commons.hwdsb.on.ca site should have a new "Add New Slide From Template" button on the "Presentations" main admin screen. The template was added as a block pattern titled "Slide Background". Let me know what you think.

[mrjarbenne]

That looks very slick. What's the process for creating the template on other sites?

You should now have admin access to this repo.

[r-a-y]

That looks very slick. What's the process for creating the template on other sites?

You should be able to create a slide block pattern at "Appearance > Patterns" now. I copied your block pattern content from the first post for the 396 site. You will probably still see an error message when you paste that block pattern content, but this can be ignored as it still works and saves.

In the future, we could have multiple slide templates and a fancier interface to select a template, but right now, it only pulls the most recent slide template for the "Add a New Slide From Template" button.

[mrjarbenne]

In the previous version, I had created a button the submit page that linked to /wp-admin/post-new.php?post_type=slides which would automatically take the author to a new slide.

Can I replicate that with the URL that the "Add Slide from Template" button presents? In this case:

https://396.commons.hwdsb.on.ca/wp-admin/post-new.php?post_type=slides&slide-template=1211&_wpnonce=65ce843fbc

I see where it's pulling the Template ID, but I'm not sure if that wpnonce will ever change. Thoughts?

[r-a-y]

I've removed the nonce protection to make it easier for you to use the URL like in your example. You no longer need to add _wpnonce to your URL.