Meta issue: #1980004: [meta] Creating Dream Markup
Issue based on: #1898038: custom_block.module - Convert theme_ functions to Twig

Current markup proposal:

<nav role="navigation">
  <ul class="nav-list">
    {% for type in types %}
      <li>
        <a href="type.link.href">
          <h2 class="nav-list__title">{{ type.label }}</h2>
          <div class="nav-list__description">{{ type.description }}</div>
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

oresh’s picture

Project: » Drupal core
Version: » 8.x-dev
Component: Twig templates conversion (front-end branch) » markup
Category: feature » task

moving issue to core.

Hydra’s picture

+++ b/core/modules/block/custom_block/templates/custom-block-add-list.html.twigundefined
@@ -0,0 +1,25 @@
+  <dl class="node-type-list">

This should probbably be something like "custom-block-type-list"

webthingee’s picture

latest patch is...
http://drupal.org/node/1898038

looks like...

{% spaceless %}
  <dl class="node-type-list">
    {% for type in types %}
      <dt>{{ type.link }}</dt>
      <dd>{{ type.description }}</dd>
    {% endfor %}
  </dl>
{% endspaceless %}

Is there a reason this is node-type? It seems this should be block unless I am missing something. Not familiar with this module yet... is it displaying a node as a block (i.e. a node setting?)...

either...

<dl class="block__custom--list" >

or if it is a node

<dl class="node__block-custom--list">

might fit what is needed here. As custom is the type of block, and list is the variation on the display.

ry5n’s picture

There are a lot of problems with the class names here:
- With class="node__block-custom--list" the new class naming conventions have been misapplied. This is neither an element within a node nor a special style of custom block (if it were a special style of custom block it would have to be class="block-custom block-custom--list").
- The bigger issue is that all of them, including .block__custom--list and .node-type-list are missing the boat on modularity.

Here’s what I’d do instead:

AFAIK this template renders a navigation list of block types to create, at /block/add, and as such is the same as all other admin navigation lists like /node/add or /admin. When I originally surveyed the Seven theme, this pattern was obvious, and I picked it out as the Nav List component. See http://groups.drupal.org/node/283223#Nav_List.

So, if admin navigation lists represent a reusable UI component, then:

1. I’m not sure why this module is using a custom template; can we not use theme_admin_block_content() [and also change the name to something more descriptive, like theme_nav_list()]?
2. Any default classes should reflect the component, not the specific content, so all we need is class="nav-list".
3. I am not sure we should be using a <dl>. Although it’s semantically OK, it’s not the only valid way to mark this up, and we can’t wrap the dl/dt pairs if we need do. Also, AFAIK most screen readers still treat them as HMTL4 definition lists (if someone can correct me, I will be happy).

This is one place where I think the Seven theme in D7 gets it right. This is hardly changed from D7:

<nav role="navigation">
  <ul class="nav-list">
    {% for type in types %}
      <li class="nav-list__item">
        <a href="type.link.href">
          <h2 class="nav-list__title">{{ type.label }}</h2>
          <div class="nav-list__description">{{ type.description }}</div>
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>
stuajc’s picture

I agree that node-type-list is an inappropriate class name, and it looks like it was just reused from the node add list at node/add. A quick fix would be changing that to block-type-list and keeping all else the same, but as ry5n points out above, this is still not very modular. And possibly a bigger question is why use definition lists inconsistently throughout the admin interface to style these particular components?

I like ry5n's proposed markup, which is much more semantic and reusable, but I would make one small change in line with the CSS Architecture page for D8, and remove the class on the lis because it's kind of redundant and emphasizing the DOM structure. This is also in line with the menu system, which omits the "item" class.

<nav role="navigation">
  <ul class="nav-list">
    {% for type in types %}
      <li>
        <a href="type.link.href">
          <h2 class="nav-list__title">{{ type.label }}</h2>
          <div class="nav-list__description">{{ type.description }}</div>
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>
ry5n’s picture

I’m fine with no class on the <li>. In many cases it’s not really necessary, although it does actually make the CSS *less* dependent on the HTML, but that’s not a big concern in this situation. So +1 for #5.

jenlampton’s picture

Can someone please update the issue summary with the current proposed syntax?

martin_q’s picture

Assigned: Unassigned » martin_q

Summary updated.

(Noob question) what is the next step and are we ready to do that now?

martin_q’s picture

Assigned: martin_q » Unassigned
martin_q’s picture

Assigned: Unassigned » martin_q

Working on a patch to implement this now.

martin_q’s picture

Status: Active » Needs review
FileSize
925 bytes

This patch implements the current proposed syntax.

martin_q’s picture

And this separate patch corrects a grammatical error in custom_block.pages.inc, for full compliance with #1913208: [policy] Standardize template preprocess function documentation.

(Used the suggested filename this time, too.)

martin_q’s picture

Issue summary: View changes

Updated summary to reflect current state of thread.

alansaviolobo’s picture

Issue summary: View changes
FileSize
1.42 KB

combined and rerolled the 2 patches.

Status: Needs review » Needs work

The last submitted patch, 13: markup_for-1982200-1.patch, failed testing.

mgifford’s picture

Assigned: martin_q » Unassigned

There has been no new work on this issue in quite some time. So I'm assuming the person assigned is no longer being actively pursuing it. Sincere apologies if this is wrong.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.