In blocks some `"` are converted to `″`

[mrkaluzny]

In blocks some " are converted to ″

I'm working with Alpine 3.13.5 and Sage 10. Within blocks x-if= expressions are changed:

x-if="condition" turns into x-if="condition″ which breaks Alpine components and markup completely.

Example -> works perfectly outside of blocks, breaks within the block. Any ideas on how to fix this one?

<script>
window.product_cross = @json($products)
</script>

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4" x-data>
  <template x-for="product in window.product_cross">
    <article class="@container" {{ $attributes->except("loading") }}>
    <div
      class="@3xl:flex-row @3xl:shadow-md flex w-full flex-col overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm">
      <template x-if="product?.images?.length > 0">
        <a class="relative flex flex-shrink-0 items-center" :href="`/products/${product.slug}`">
          <div x-show="product.on_sale">
            Sale
          </div>
          <img :src="product.images[0].src" :srcset="product.images[0].srcset" :sizes="product.images[0].sizes"
            :alt="product.images[0].alt || product.name" class="@3xl:h-80 @3xl:w-80 max-h-[320px] w-full object-cover"
            loading="lazy">
        </a>
      </template>
      <div class="flex flex-col">
        <div class="@3xl:py-8 @3xl:px-8 @3xl:flex-row flex flex-1 flex-col px-4 pt-4">
          <a class="mb-auto block" :href="`/products/${product.slug}`">
            <h2 x-html="product.name" class="@3xl:text-2xl text-lg font-semibold"></h2>
            <div x-html="product.short_description" class="@3xl:line-clamp-3 line-clamp-2 text-sm text-gray-600"></div>
          </a>
          <template x-if="product.is_purchasable">
            <div class="@3xl:my-0 my-2">
              <div x-money="product.prices.price"
                class="@3xl:text-gray-950 @3xl:text-2xl @3xl:text-right text-xl font-semibold text-red-500"
                x-show="product.prices.price > 0"></div>
              <div class="@3xl:block hidden text-right text-sm text-gray-500">ex. GST</div>
            </div>
          </template>
        </div>
        <div class="@3xl:p-8 flex items-end justify-between">
          <div class="@3xl:block mr-auto hidden">
            <template x-if="product.is_in_stock">
              <span class="text-md font-semibold text-green-500">
                In stock
              </span>
            </template>
          </div>
          <div class="@3xl:w-auto @3xl:px-0 @3xl:my-0 @3xl:justify-end my-2 flex w-full items-center gap-2 px-4"
            :class="{
                'justify-end': product.extensions.details.badges.length <= 2,
                'justify-center': product.extensions.details.badges.length > 2
            }"
            x-show="product.extensions.details.badges.length > 0">
            <template x-for="badge in product.extensions.details.badges">
              <img :src="badge.image" :alt="badge.name" loading="lazy"
                class="@3xl:h-14 @3xl:w-auto h-12 w-auto" width="48" height="48"
                :title="badge.description || badge.name">
            </template>
          </div>
        </div>
      </div>
      <div class="@3xl:hidden px-4 pb-4">
        <template x-if="!product.has_options">
          <x-button class="w-full" size="sm" variant="secondary"
            @click="$store.cart.addToCart({
          id: product.id,
          quantity: 1,
        })">
            Add to cart
          </x-button>
        </template>
        <template x-if="product.has_options">
          <x-button as="a" class="block w-full text-center" size="sm" variant="secondary"
            x-bind:href="`/products/${product.slug}`">
            Customize
          </x-button>
        </template>
      </div>
  </article>
  </template>
</div>

[Log1x]

I'm not sure if I've seen this exact issue but I assume it's related to Block parsing. https://github.com/Log1x/acf-composer/issues/160 has more info/links.

Edit: Ah, I remembered 160 but didn't realize it is in-fact this issue. Unfortunately there isn't anything I can do in ACF Composer to fix it.

[mrkaluzny]

@Log1x Thanks, yeah I just figured out it's a filter applied for the_content() function as seen in #453 on ACF repository

The issue is resolved when wptexturize filter is disabled:

remove_filter('the_content', 'wptexturize');