Changes to update-version.html.twig for displaying core compatibility on Available updates report

Contributed modules and themes can be compatible with multiple branches of core (but not compatible with all minor versions for a given major release). Furthermore, Drupal will soon support semantic versioning for Drupal contributed modules, so it will be even less obvious what versions of core a given release is compatible with.

The available updates report at admin/reports/updates now displays information about which versions of core a given release is compatible with. This information is presented in a <details> element that appears under the release notes link for each release.

In cases where the recommended update is a version that is no longer compatible with the currently installed version of Drupal core, the download link is now removed (and the details are open by default to make it more obvious to site administrators that they can't directly update to that release without updating core, first).

These changes required modifications to the update-version.html.twig template provided by the Update module in core. Because this information is critical going forward (especially once Drupal 9.0.0 is released), the template was also changed in the Stable core theme (which normally doesn't happen), so that the Seven theme and any other administrative themes based on Stable will have the new elements.

The template is now passed a core_compatibility_details variable that contains a render array defining the core compatibility information. This is handled in a render array instead of directly using the <details> HTML markup in the template, since the 'details' render element includes JavaScript polyfills to ensure compatibility on all browsers.

Additionally, the version template variable (and array) now includes the following sub elements:

• core_compatible: A flag indicating whether the project is compatible with the currently installed version of Drupal core. This flag is not set for the Drupal core project itself.
• core_compatibility_message: A message indicating the versions of Drupal core with which this project is compatible. This message is also contained within the 'core_compatibility_details' variable documented above. This message is not set for the Drupal core project itself.

Any admin theme that is overriding this template should be updated accordingly.

Before

<div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
  <div class="clearfix">
    <div class="project-update__version-title layout-column layout-column--quarter">{{ title }}</div>
    <div class="project-update__version-details layout-column layout-column--quarter">
      <a href="{{ version.release_link }}">{{ version.version }}</a>
      <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
      {% if version.core_compatibility_message %}
        <span class="project-update__core-compatibility-message">{{ version.core_compatibility_message }}</span>
      {% endif %}
    </div>
    <div class="layout-column layout-column--half">
      <ul class="project-update__version-links">
        <li class="project-update__download-link">
          <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
        </li>
        <li class="project-update__release-notes-link">
          <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
        </li>
      </ul>
    </div>
  </div>
</div>

After

<div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
  <div class="clearfix">
    <div class="project-update__version-title layout-column layout-column--quarter">{{ title }}</div>
    <div class="project-update__version-details layout-column layout-column--quarter">
      <a href="{{ version.release_link }}">{{ version.version }}</a>
      <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
    </div>
    <div class="layout-column layout-column--half">
      <ul class="project-update__version-links">
        {% if version.core_compatible is not defined or version.core_compatible %}
          <li class="project-update__download-link">
            <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
          </li>
        {% endif %}
        <li class="project-update__release-notes-link">
          <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
        </li>
        {% if core_compatibility_details %}
          <li class="project-update__compatibility-details">
            {{ core_compatibility_details }}
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
</div>

Key changes

1. Replace this:
   

           <li class="project-update__download-link">
             <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
           </li>
       

   With this:

           {% if version.core_compatible is not defined or version.core_compatible %}
             <li class="project-update__download-link">
               <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
             </li>
           {% endif %}
       

2. Add this:
   

           {% if core_compatibility_details %}
             <li class="project-update__compatibility-details">
               {{ core_compatibility_details }}
             </li>
           {% endif %}