Block not creating markup on frontend

[aj-fick]

I've created a block that seems to be working in the editor as expected, however it does not display on the front end of the website at all. Instead of seeing the markup I've created, I see the following comment:

<!-- wp:acf/hero {
    "id": "block_60623e597a1be",
    "name": "acf\/hero",
    "data": {
        "image": 54,
        "_image": "field_606221216eeaf",
        "kicker": "Test Kicker",
        "_kicker": "field_606221386eeb0",
        "heading": "Test Heading",
        "_heading": "field_6062214e6eeb1",
        "blurb": "Test Blurb",
        "_blurb": "field_606221616eeb2",
        "call_to_action": "",
        "_call_to_action": "field_606221736eeb3"
    },
    "align": "full",
    "mode": "auto"
} /-->

All of the details within that comment are correct, but there's no HTML. Below is the code in my block:

{{--
  Title: Hero
  Description: A Hero with a large image, title, kicker, blurb, and CTA button.
  Icon: embed-photo
  Category: media
  Align: full
  Mode: auto
  SupportsAlign: full
  SupportsMode: true
  SupportsMultiple: true
--}}

<div data-{{ $block['id'] }} class="tsm component mt-0 hero {{ $block['classes'] }}">
  <div class="jumbotron jumbotron-fluid" style="min-height: 750px; height: 75vh; background-image: url({{ App\asset_path('images/stock/desks.jpg') }}); background-size: cover;">
    <div class="container h-100">
      <div class="row mt-5 h-100 align-items-center">
        <div class="col-12 col-md-8">
          <div class="kicker kicker-dash">
            <p class="font-weight-bolder text-primary">
              Test Kicker
            </p>
          </div>
          <h1 class="display-3 font-weight-bolder">
            Something something header
          </h1>
          <div class="tagline">
            <p>
              This is a test blurb that will be used to tell the user about something.
            </p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <a href="" class="btn btn-primary btn-lg">
            Test Button
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

This markup is visible in the editor and is styled appropriately.

[robmeijerink]

Did you use the_content filter on your output? @php apply_filters('the_content', $post->post_content); @endphp for example?

[aj-fick]

This is the markup for the page I'm attempting to output on:

@extends('layouts.hero')

@section('content')
  <main class="container">
    {!! get_the_content() !!}
  </main>
@endsection

So, unless I'm misunderstanding, I'm outputting the content via the get_the_content() function. And I should note, that other blocks on that page, standard built-in WP blocks, are working.

[robmeijerink]

I see, as noted in these docs https://developer.wordpress.org/reference/functions/get_the_content/, get_the_content() does not use the the_content filter. I think that is the reason your block does not render. I'm not sure why the other built-in blocks are working, I have not looked into that yet.

[aj-fick]

@robmeijerink 🤦🏼 Thank you, That was precisely my issue.