6

I want to get rid of the most markup in Drupal 8 templates, but still want to have working contextual links. How to do this?

11

In Drupal 8 the contextual links markup is still printed via the {{ title_suffix }} variable (D7: print render($title_suffix);).

block.html.twig (default):

{%
  set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
  ]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

So a minimal version would still work:

{{ title_suffix }}
{{ content) }}

Printed result for user without the permission "Use contextual links"

<div data-contextual-id="block:block=foo:|block_content:block_content=1:changed=1423224125"></div>
BlaBlaBlaContent

Printed result for user with the permission "Use contextual links"

<div data-contextual-id="block:block=foo:|block_content:block_content=1:changed=1423224125" class="contextual-render-processed contextual" role="form">
    <button type="button" class="trigger focusable visually-hidden" aria-pressed="false">Open configuration options</button>
    <ul hidden="" class="contextual-links">
        <li class="block-configure"><a href="/admin/structure/block/manage/foo?destination=node/4">Configure block</a></li>
        <li class="block-contentblock-edit"><a href="/block/4?destination=node/4">Edit</a></li>
        <li class="block-contentblock-delete"><a href="/block/4/delete?destination=node/4">Delete</a></li>
    </ul>
</div>
BlaBlaBlaContent

The default formatting will be destroyed because the outer class .contextual-region is missing and it's defined like this in contextual.theme.css:

.contextual-region .contextual .contextual-links {...}
.contextual-region .contextual .contextual-links li {...}
...

So you have to overwrite (https://www.drupal.org/node/1876600) this file or copy the definitions in one of your theme css files and change for example like:

.contextual-region .contextual .contextual-links, .contextual .contextual-links {...}
.contextual-region .contextual .contextual-links li, .contextual .contextual-links li {...}

Or you place manually in the template or via JS ".contextual-region" into an outer dom element or print {{ attributes }} there.

Printed result:

<div class="block block--classic contextual-region">
    <div data-contextual-id="block:block=foo:|block_content:block_content=5:changed=1423308445" class="contextual-render-processed contextual" role="form">
        <button type="button" class="trigger focusable" aria-pressed="false">Open configuration options</button>
        <ul hidden="" class="contextual-links">
            <li class="block-configure"><a href="/admin/structure/block/manage/callforproposalsblock?destination=node/4">Configure block</a></li><li class="block-contentblock-edit"><a href="/block/5?destination=node/4">Edit</a></li>
            <li class="block-contentblock-delete"><a href="/block/5/delete?destination=node/4">Delete</a></li>
        </ul>
    </div>
    BlaBlaBlaContent
</div>

Remark: Without the upper .contextual-region the mouseover visibility of the contextual links icon is not working ...

Note: Current version of Drupal 8 is Beta 6 - so things may still change!

  • Just mentioning that this still works with D8 being out of beta status. – TheThirdMan Jan 5 '17 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.