How to work with caching and conditional rendering in a template? I've added a custom module function to allow the is_front conditional to work inside of a block template. The purpose is to display the site slogan on the homepage, but not across the rest of the site. The rule works correctly, but the site's cache is causing it to render incorrectly. If I clear the cache from the front page, the slogan displays sitewide. If I clear the cache from another site page, then the slogan doesn't display on the front page.

I'm presuming it is because the block's display is being cached in some way. Is there a simple way around this other than adding a second instance of the block?
Here are some solutions I can think of:

Solution 1: Use CSS (easiest)

Make sure the slogan has some classname you can refer to. Example: site-slogan. Use body classes to change slogan visibility. Here's some rough CSS to get you started.

/* Hide slogan for all pages */
#block-site-branding .site-slogan {
  display: none;
}
/* Show slogan for front page */
body.path-frontpage #block-site-branding .site-slogan {
  display: block;
}


Solution 2: Use 2 block instances (not recommended)


Setup one block instance, say block-site-branding-front for the home page and configure it to show the slogan. Make this block visible only for &lt;front&gt; page.
Setup another block instance, say block-site-branding-inner for the inner pages and configure it to hide the slogan. Make this block visible for all but &lt;front&gt; page.


You can also define a custom block in a custom module, but that would be an overkill. I think the first solution should do the trick.