"Reload content for the field"

This link is there since early versions, when ajax update of the changes was introduced. I guess, that you see them now, because your theme styles overwrite some frontend editing styles:

.frontend-editing-update-content {
  overflow: hidden;
  text-indent: -9999rem;
  width: 32px;
  height: 32px;
  visibility: hidden;
  order: 100;
}

Very interesting.

When you pointed to me possibly overriding some Front End Editing (FEE) CSS, I did a thorough check and I am definitely not overriding the frontend-editing-update-content class anywhere at all: neither theme nor pre-process.

In fact the only two occurrences of that class in the entire project codebase:

1. modules/contrib/frontend_editing/frontend_editing.module
2. modules/contrib/frontend_editing/css/frontend_editing.css

I was wondering why I had not raised this earlier, and it turns out that I am only actually seeing this on one particular content type, in my case (machine name) theory-snippet but I do not think that is particularly relevant because I do nothing to target anchor elements (<a>) within that content type.

For all other content types, it is working as designed; I am not seeing the links in the front end and a quick browser inspection shows that the CSS in modules/contrib/frontend_editing/css/frontend_editing.css is kicking in as designed.

It really does appear that for some strange reason, the CSS from modules/contrib/frontend_editing/css/frontend_editing.css is simply not applying to the a.use-ajax.frontend-editing-update-content within the specific content type.

Here is the exact markup:

<div class="frontend-editing-actions" data-entity-type="node">
  <a href="/frontend-editing/update-content/node/7477/field_content/level_2" 
    title="Reload content for this field" 
    class="use-ajax frontend-editing-update-content"
    data-fe-update-content="node--7477--field_content--level_2"
    data-once="ajax">
    Reload content for this field
</a>
</div>

Any ideas where I should look next to debug further?

Very grateful for the maintainer's eye view!

Digging deeper

Also, for complete clarity, here is the entire wrapping markup with Twig debug output...

<article class="contextual-region theory-snippet level-2 clearfix aos-init aos-animate" data-aos="fade-zoom-in"
  data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
  <div data-contextual-id="node:node=7477:changed=1708271481&amp;langcode=en"
    data-contextual-token="3JRhzcmDNK4G1PwcnNFth361O-eOMmOXEPB-S3B3Qdg" data-drupal-ajax-container=""
    data-once="contextual-render" class="contextual"><button class="trigger focusable visually-hidden" type="button"
      aria-pressed="false">Open Logic in history configuration options</button>
    <ul class="contextual-links" hidden="">
      <li><a href="/node/7477/edit?destination=/node/7601">Edit</a></li>
      <li><a href="/node/7477/delete?destination=/node/7601">Delete</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'container' -->
    <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/form/container.html.twig' -->
    <div class="views-element-container contextual-region">
      <!-- THEME DEBUG -->
      <!-- THEME HOOK: 'eva_display_entity_view' -->
      <!-- BEGIN OUTPUT from 'modules/contrib/eva/templates/eva-display-entity-view.html.twig' -->
      <div
        class="canonical-url contextual-region view view-eva view-canonical-url view-id-canonical_url view-display-id-entity_view_1 js-view-dom-id-9ea2afcb393541ef961593a818117ce24d3f98385b69eb299499c3a77b46fb32"
        data-once="ajax-pager">
        <div
          data-contextual-id="entity.view.edit_form:view=canonical_url:location=view&amp;name=canonical_url&amp;display_id=page_1&amp;langcode=en"
          data-contextual-token="ibAdFNb9OR3HLpqEM4exJ1mgVTB_oFcVN_uphVhDuRs" data-drupal-ajax-container=""
          data-once="contextual-render" class="contextual"><button class="trigger visually-hidden focusable"
            type="button" aria-pressed="false">Open configuration options</button>
          <ul class="contextual-links" hidden="">
            <li><a href="/admin/structure/views/view/canonical_url/edit/page_1?destination=/node/7601">Edit view</a>
            </li>
          </ul>
        </div>
        <!-- THEME DEBUG -->
        <!-- THEME HOOK: 'views_view_unformatted' -->
        <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/views/views-view-unformatted.html.twig' -->
        <div>
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_fields' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/views/views-view-fields.html.twig' -->
          <div class="canonical-url d-none  d-xl-block d-xxl-block">
            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'views_view_field' -->
            <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/views/views-view-field.html.twig' -->
            <a href="/node/7477" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
              data-bs-title="Open this <b>Bitesize snippet</b> in a <b>new window</b>." target="_blank"
              data-bs-original-title="Open this Bitesize snippet in a new window&amp;"
              class="link-purpose link-purpose-window">Bitesize<span class="link-purpose-spacer"> </span><span
                class="link-purpose-nobreak">snippet<span class="link-purpose-icon link-purpose-window-icon"
                  aria-hidden="true" title="Link opens in new window"><svg class="linkpurpose-default-svg"
                    xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                    <path fill="Currentcolor"
                      d="M432 48H208c-17.7 0-32 14.3-32 32V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V336h16c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32zM48 448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V256H48V448zM64 128H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64z">
                    </path>
                  </svg></span><span class="link-purpose-text">(Link opens in new window)</span></span></a>
            <!-- END OUTPUT from 'core/themes/stable9/templates/views/views-view-field.html.twig' -->
          </div>
          <!-- END OUTPUT from 'core/themes/stable9/templates/views/views-view-fields.html.twig' -->

        </div>
        <!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/views/views-view-unformatted.html.twig' -->
      </div>
      <!-- END OUTPUT from 'modules/contrib/eva/templates/eva-display-entity-view.html.twig' -->
    </div>
    <!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/form/container.html.twig' -->
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'container' -->
    <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/form/container.html.twig' -->
    <div class="frontend-editing-actions" data-entity-type="node"><a
        href="/frontend-editing/update-content/node/7477/field_content/level_2" title="Reload content for this field"
        class="use-ajax frontend-editing-update-content" data-fe-update-content="node--7477--field_content--level_2"
        data-once="ajax">Reload content for this field</a></div>
    <!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/form/container.html.twig' -->
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'field' -->
    <!-- FILE NAME SUGGESTIONS:
 ▪️ field--node--title--theory-snippet.html.twig
 ✅ field--node--title.html.twig
 ▪️ field--node--theory-snippet.html.twig
 ▪️ field--title.html.twig
 ▪️ field--string.html.twig
 ▪️ field.html.twig
-->
    <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/field--node--title.html.twig' -->
    <div class="field field--name-title field--type-string field--label-hidden field__item">
      <h2>Logic in history</h2>
    </div>
    <!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/field--node--title.html.twig' -->
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'field' -->
    <!-- FILE NAME SUGGESTIONS:
 ▪️ field--node--body--theory-snippet.html.twig
 ▪️ field--node--body.html.twig
 ▪️ field--node--theory-snippet.html.twig
 ▪️ field--body.html.twig
 ✅ field--text-with-summary.html.twig
 ▪️ field.html.twig
-->
    <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/field/field--text-with-summary.html.twig' -->
    <div
      class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
      <div class="tex2jax_process">
        <p>If you looked for a definition of '<strong>logic</strong>', you might find something to the effect of...</p>
        <blockquote>
          <p>"A way of <strong>reaching a conclusion</strong> based on good <strong>reasoning</strong>".</p>
        </blockquote>
        <p>Humans naturally use logic everyday, thinking 'if this, then that...' all day long.</p>
        <p>The Greek philosopher <strong>Aristotle</strong> (384–322&nbsp;BC) decided to study this concept, and came up
          with a <strong>set of rules</strong> based on logical thinking.</p>
        <p>The following are examples of Aristotle logical rules applied to statements about dogs:</p>
        <ol>
          <li>Some dogs are not black, so it must be false that all dogs are black ('<strong>contradictory</strong>'
            proposition).</li>
          <li>All dogs are mammals, so it can't be true that no dogs are mammals ('<strong>contrary</strong>'
            proposition).</li>
          <li>No dogs are cats, so we also know that no cats are dogs (law of '<strong>conversion</strong>').</li>
          <li>Sometimes my dog barks, so we know that sometimes my dog doesn't not bark (law of
            '<strong>obversion</strong>').</li>
          <li>All dogs aged over 2 are adults, so all dogs aged under 2 are not adults (law of
            '<strong>contraposition</strong>').</li>
        </ol>
        <p>These were just fun examples.</p>
        <p>Unless you're particularly interested in digging deeper, you <strong>don't need to worry</strong> about any
          of Aristotle's conclusions.</p>
        <p>But the important point to take away is that <strong>Aristotle's study of logic paved the way for future
            generations</strong> to philosophise further about <strong>logical rules</strong> and their
          <strong>applications</strong>.</p>
      </div>
    </div>
    <!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/field/field--text-with-summary.html.twig' -->
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'container' -->
    <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap5/templates/form/container.html.twig' -->
    <div data-frontend-editing="node--7477--field_content--level_2" class="frontend-editing-field-wrapper">
      <!-- THEME DEBUG -->
      <!-- THEME HOOK: 'field' -->
      <!-- FILE NAME SUGGESTIONS:
 ▪️ field--node--field-content--theory-snippet.html.twig
 ▪️ field--node--field-content.html.twig
 ▪️ field--node--theory-snippet.html.twig
 ▪️ field--field-content.html.twig
 ▪️ field--entity-reference-revisions.html.twig
 ✅ field.html.twig
-->
      <!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/custom/bit_by_bit/templates/field.html.twig' -->
      <div
        class="field field--name-field-content field--type-entity-reference-revisions field--label-hidden field__items">
        <div class="field__item">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'paragraph' -->
          <!-- FILE NAME SUGGESTIONS:
 ▪️ paragraph--iframe--level-2.html.twig
 ▪️ paragraph--iframe.html.twig
 ▪️ paragraph--level-2.html.twig
 ✅ paragraph.html.twig
-->
          <!-- BEGIN OUTPUT from 'modules/contrib/paragraphs/templates/paragraph.html.twig' -->
          <div class="contextual-region paragraph paragraph--type--iframe paragraph--view-mode--level-2">
            <div
              data-contextual-id="paragraph:root_parent_type=node&amp;root_parent=7477&amp;paragraph=4761:changed=1708271481&amp;langcode=en"
              data-contextual-token="OzzBSE3-glwVOTXhygMirGZDyYeUGNb1c9j1MsfYSPQ" data-drupal-ajax-container=""
              data-once="contextual-render" class="contextual"><button class="trigger visually-hidden focusable"
                type="button" aria-pressed="false">Open configuration options</button>
              <ul class="contextual-links" hidden="">
                <li><a href="/paragraphs_edit/node/7477/paragraphs/4761/edit?destination=/node/7601">Edit</a></li>
                <li><a href="/paragraphs_edit/node/7477/paragraphs/4761/clone?destination=/node/7601">Clone</a></li>
                <li><a href="/paragraphs_edit/node/7477/paragraphs/4761/delete?destination=/node/7601">Delete</a></li>
              </ul>
            </div>
            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'field' -->
            <!-- FILE NAME SUGGESTIONS:
 ▪️ field--paragraph--field-iframe--iframe.html.twig
 ▪️ field--paragraph--field-iframe.html.twig
 ▪️ field--paragraph--iframe.html.twig
 ▪️ field--field-iframe.html.twig
 ▪️ field--iframe.html.twig
 ✅ field.html.twig
-->
            <!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/custom/bit_by_bit/templates/field.html.twig' -->
            <div
              class="paragraph-size-height-810 field field--name-field-iframe field--type-iframe field--label-hidden field__item">
              <!-- THEME DEBUG -->
              <!-- THEME HOOK: 'iframe' -->
              <!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/custom/bit_by_bit/templates/iframe.html.twig' -->
              <div class="">
                <style>
                  iframe#iframe-field_iframe-4761 {
                    /*frameborder*/
                    border-width: 0;
                    /*scrolling*/
                    overflow: hidden;
                  }
                </style>
                <iframe class="lazyload" width="100%" height="701" name="iframe-field_iframe-4761"
                  id="iframe-field_iframe-4761" title=""
                  allow="accelerometer;autoplay;camera;encrypted-media;geolocation;gyroscope;microphone;payment;picture-in-picture"
                  allowfullscreen="allowfullscreen" loading="lazy"
                  data-src="https://sirclickalot.co.uk/assets/books/gcse-computer-science-plus/chapters/boolean-logic/topics/introduction-to-boolean-logic/snippets/aristotle">
                  Your browser does not support iframes, but you can visit <a
                    href="https://sirclickalot.co.uk/assets/books/gcse-computer-science-plus/chapters/boolean-logic/topics/introduction-to-boolean-logic/snippets/aristotle"></a>
                </iframe>
              </div>
              <!-- END CUSTOM TEMPLATE OUTPUT from 'themes/custom/bit_by_bit/templates/iframe.html.twig' -->
            </div>
            <!-- END CUSTOM TEMPLATE OUTPUT from 'themes/custom/bit_by_bit/templates/field.html.twig' -->
          </div>
          <!-- END OUTPUT from 'modules/contrib/paragraphs/templates/paragraph.html.twig' -->
        </div>
      </div>
      <!-- END CUSTOM TEMPLATE OUTPUT from 'themes/custom/bit_by_bit/templates/field.html.twig' -->
    </div>
    <!-- END OUTPUT from 'themes/contrib/bootstrap5/templates/form/container.html.twig' -->
  </div>
</article>

Thank you

Sorry, but it is not enough to see the markup, as I don't see the styles that are applied to the element. Obviously class .frontend-editing-update-content is not the only possible selector for that element and a lot of other selectors can influence the display, starting from a tag and ending also with .use-ajax class.

Use the developer console to get what styles are applied to this element to find what CSS rule makes this element visible for you on that certain content type pages.

@ a.dmitriiev → OK, I've got it!

The problem relates to paragraphs types that reference node content — typically any content that you wish to embed within pages, of which we do a great deal.

Take a couple of such Paragraph types that are NOT Front End Editing (FEE)-enabled on the page: /admin/config/frontend-editing/entity-bundle-restrictions such as these two...

Given the standard situation when you have a node referenced via one of these non-FEE-enabled Paragraphs as below...

<div class="frontend-editing contextual-region paragraph paragraph--type--interaction paragraph--view-mode--default" id="paragraph-9804">
...content referenced here as normal...

All is well, no Reload content for this field visible.

However, when you view the actual referenced node that is referenced within a Paragraph then the following <div> is still rendered but because it is not an enabled bundle, the front_end_editing.css CSS does not kick in.

<div class="frontend-editing-actions" data-entity-type="node"><a href="/frontend-editing/update-content/node/8574/field_content/full" title="Reload content for this field" class="use-ajax frontend-editing-update-content" data-fe-update-content="node--8574--field_content--full" data-once="ajax">Reload content for this field</a></div>

Maybe the standard Drupal class .visually-hidden should be added to that link to not depend on the frontend_editing styles https://www.drupal.org/docs/getting-started/accessibility/hide-content-p... → . This will make sure that the link is visually hidden always, I suppose

Yep, that's it, adding the class .visually-hidden to the #attributes in the frontend_editing.module at line 22...

…
'#attributes' => [
          'title' => t('Reload content for this field'),
          'class' => [
            'use-ajax',
            'frontend-editing-update-content',
            'visually-hidden',
          ],
…

…completely solves the issue for me.

Thank you.

Added to 1.x and 2.x branches. Will be part of next patch release.

Automatically closed - issue fixed for 2 weeks with no activity.