Don't show header if there's nothing useful to show

static/src/js/base.js

@@ -62,6 +62,12 @@ window.addEventListener("load", () => {
 
   document.querySelectorAll(".block-code").forEach((codeBlock) => {
     const clipboardIcon = codeBlock.querySelector(".code-copy");
+
+    // There may not be an icon
+    if (!clipboardIcon) {
+      return;
+    }
+
     clipboardIcon.addEventListener("click", (event) => {
       event.preventDefault();
       navigator.clipboard

website/contrib/code_block/blocks.py

@@ -4,6 +4,7 @@ from django.utils.safestring import mark_safe
 from pygments import highlight
 from pygments.formatters.html import HtmlFormatter
 from pygments.lexers import find_lexer_class, get_all_lexers
+from pygments.lexers.special import TextLexer
 from wagtail.blocks import (
     BooleanBlock,
     CharBlock,
@@ -27,6 +28,15 @@ class CodeStructValue(StructValue):
         )
         return mark_safe(highlight(self["source"], lexer, formatter))
 
+    def header_text(self) -> str:
+        if filename := self["filename"]:
+            return filename
+
+        if language := self["language"] and self["language"] != TextLexer.name:
+            return language
+
+        return ""
+
 
 class CodeBlock(StructBlock):
     filename = CharBlock(max_length=128, required=False)

website/contrib/code_block/templates/contrib/blocks/code.html

@@ -1,7 +1,10 @@
-<div class="code-header {% if value.always_show_header %}always-show{% endif %}">
+{% if value.header_text %}
-  <span title="{{ value.language }}">{% firstof value.filename value.language %}</span>
+  <div class="code-header {% if value.always_show_header %}always-show{% endif %}">
-  <span>
+    <span title="{{ value.language }}">{{ value.header_text }}</span>
-    <i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
+    <span>
-  </span>
+      <i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
-</div>
+    </span>
+  </div>
+{% endif %}
+
 {{ value.code }}