Convert views/templates/views-view-grid.tpl.php to twig

Not sure about these:
{{ column_classes[row_number][column_number] }}
{{ row_classes[row_number] }}

maybe they should be added in the preprocess using attributes?

Tagging.

We should hold off until progress on: #1903746: Replace the views grid table template with one using divs
is done

Re-rolled with new location (views templates, not stark) and some corrections. I see the note on #1903746: Replace the views grid table template with one using divs; with that said, here's the work that was done (1:1 conversion) and steveoliver or someone else can decide how to proceed for the time being.

#5 seems to introduce an extra '.' into the code.

Removed the extra dot and re-rolled.

New version of patch that fixes inclusion of row and column classes. Includes a patch to views.theme.inc to put the row classes into $vars['row_classes']

(supercedes #6 - that extra '.' didn't solve adding the correct row/cell classes)

Maybe it would make sense to postpone this issue until #1903746: Replace the views grid table template with one using divs got some progress?

I think I disagree. Our goal is 1:1 conversion, and to be honest I think the effort to convert to div (or more appropriately article) would require an easy change here but a bunch of changes in the CSS, making it a lot more complicated to resolve. This will at least get us a sorted out conversion of the existing method.

Once the conversion is done I'd be more than happy to work on converting to more modern HTML & CSS - but that will also likely want work on the preprocess functions too. A much bigger mess to clean up.

+++ b/core/themes/stark/templates/views/views-view-grid.html.twigundefined
@@ -0,0 +1,36 @@
+ * - attributes: Remaining HTML attributes for the element.
+ * - attributes.class: HTML classes that can be used to style contextually
+ *    through CSS.
+ * - title: @todo
+ * - attributes: Remaining HTML attributes for the element.
+ * - attributes.class: HTML classes that can be used to style contextually
+ *    through CSS.
+ * - rows contains a nested array of rows. Each row contains an array of
+ *   columns.

This menations everything twice (attributes, attributes.class), but not the other variables like $view which should be available as well.

@dawehner - I left it referencing both the main attributes and specifically the classes as they're used in different ways (and it was in there before, so seemed to make sense)

re: $view - it's not mentioned in the original PHP template, only $rows (or just rows in the new syntax).

Working on an updated patch for the core views module instead of Stark now.

Here's a patch against a clean D8 core. Patches views.theme.inc, creates views-view-grid.html.twig and removes views-view-grid.tpl.php

Moving to Drupal core project

Resubmitting. Had to update a preprocess function to enable responsive classes on grid-style output.

Setting back to 'needs review'

Adding twig tag

Re-rolled patch and updated it to be in line with the twig coding standards.

@jastraat - Thanks! An interdiff to show your changes would be great, I know there aren't any on this issue just yet :)

Is there a way to do an interdiff without manually re-making all the changes from the 2nd patch?

Yes, good question :) I would use two local branches from 8.x, one for #15 and one for #19, and then diff the two branches to create the interdiff.

Something like this should do it:

Create first branch:

git checkout 8.x
git checkout -b views-view-grid-1843750-15
git apply -v --index drupal-twig-views-grid-template-issue-1843750_0.patch
git commit -m "Patch from #15"

Create second branch:

git checkout 8.x
git checkout -b views-view-grid-1843750-19
git apply -v --index drupal_twig_views_grid_template-1843750-19.patch
git commit -m "Patch from #19"

Then while still on the second branch:

git diff views-view-grid-184375015-15 > interdiff.txt

Or while on any branch:

git diff views-view-grid-184375015-15 views-view-grid-184375015-19 > interdiff.txt

That was a great answer! Wow. Ok - interdiff attached. (Not sure why the last patch didn't pass tests though.)

#19: drupal_twig_views_grid_template-1843750-19.patch queued for re-testing.

+++ b/core/modules/views/templates/views-view-grid.html.twigundefined
@@ -0,0 +1,37 @@
+ * Default simple view template to display a rows in a grid.

"to display the rows in a grid?"

+++ b/core/modules/views/templates/views-view-grid.html.twigundefined
@@ -0,0 +1,37 @@
+ * - title: View title.

I guess we always should have full sentences?

+++ b/core/modules/views/templates/views-view-grid.html.twigundefined
@@ -0,0 +1,37 @@
+{# using the square brackets because the rows array does not have structure data #}

Can you explain that bit?

+++ b/core/modules/views/views.theme.incundefined
@@ -656,10 +656,18 @@ function template_preprocess_views_view_table(&$vars) {
+  $view     = $variables['view'];

Please let's fix the spaces.

@dawehner Most of us don't know the variable's purposes, only that they exist and should be documented. But these are not the focus of the conversion to twig only a happy documenting by product.

The variables unfortunately haven't been documented before conversion. It would be nice to have a hand from the VDC team to fill in the gaps. Maybe I can convert these to @todo for them later? The goal we have is to finish twig conversions to "working state" by mid April.

The variables unfortunately haven't been documented before conversion. It would be nice to have a hand from the VDC team to fill in the gaps. Maybe I can convert these to @todo for them later? The goal we have is to finish twig conversions to "working state" by mid April.

I'm totally fine with that! Better to have an @todo, then no documentation.

It would be great if you could answer on

+++ b/core/modules/views/templates/views-view-grid.html.twigundefined
@@ -0,0 +1,37 @@
+{# using the square brackets because the rows array does not have structure data #}
Can you explain that bit?

@dawehner - I almost removed that comment line since I didn't really understand the purpose either, but it was in the original patch that I was re-rolling. If no one knows why it was added, I'm happy to take it out.

Tagging.

I'm afraid this needs some more work. I'm not sure how the $responsive variable is intended to be determined, but currently it's undefined. I looked at how the view table template was handling this, but apparently individual fields in tables have a setting for responsive; it doesn't look like this exists for grid.

Could someone explain how $responsive should be determined in a grid context?

The responsive bits should be removed, as they should be only applied to real tables. The grid here has to be replaced by divs at some point.

Removed the responsive bits from the preprocess function. Also updated the documentation for the $variables array since the original patch documentation was based on an example that used a render element. (see http://drupal.org/node/1912606#comment-7275644)

+ * Default simple view template to display the rows in a grid.

Capital "V" for View.

+ * - rows: Contains a nested array of rows. Each row contains an array of
+ *   columns.

Please remove any reference to PHP data types from Twig template files.

+ $variables['attributes_array'] = array('summary' => $handler->options['summary']);

What is this? attributes_array isn't used or documented in the Twig template. Do we need it?

Also, we need an @ingroup themeable for the template as well as @see template_preprocess() and @see template_preprocess_views_view_grid()

And I'll add: we are removing @ingroup views_templates, see #1843738-13: [meta] Convert views module to Twig.

Thanks for keeping on this @jastraat :)

@thedavidmeister - I don't know what the purpose of $variables['attributes_array'] is, but it was in the original preprocess function that we're converting. Anyone else want to chime in if they know?

#37 - would you be able to provide an example dump of what's in that variable by the end of the preprocess, with a print_r() or something?

my gut tells me we probably don't need it anymore as all attributes should be in the attributes variable but we should have a look what's inside first.

@jastraat and @thedavidmeister I am quite sure that is a bug, I fixed it in #1843766: Convert views/templates/views-view-table.tpl.php to twig with
$vars['attributes']['summary'] = $handler->options['summary'];

I made a table view and tested the output and it is definitely broken in core.

It's an option in the views UI for the table summary attribute. Though grid will later become not a table, so this will be removed.

Cleanup, and revert $vars=>$variables because we have an issue for that #1963942: Change all instances of $vars to $variables and keeps it easier to see the other changes in the conversion patch.

hmm wrong patch... try that again.

Great, thank you!

The $attributes_array lines in the Twig conversion issues conflict with #1484704: Remove instances of attributes_array, so we'll need to re roll here or there anyway. Twig conversion issues will become easier to RTBC if the non-Twig issues go in first. (See also #93 in #1183042: Regression: Add WAI-ARIA roles to Core blocks)

@dawehner: #1484704: Remove instances of attributes_array is basically views only. Care to RTBC that one as well?

Tagging for profiling.

I think this one still needs manual testing.

Here are some doc tweaks/updates:

+++ b/core/modules/views/templates/views-view-grid.html.twigundefined
@@ -0,0 +1,33 @@
+ * - title: @todo.

Can we fill in something here - maybe one of the other views patches has this?

+++ b/core/modules/views/templates/views-view-grid.html.twigundefined
@@ -0,0 +1,33 @@
+ * @ingroup themable

s/themable/themeable

+++ b/core/modules/views/views.theme.incundefined
@@ -665,17 +665,24 @@ function template_preprocess_views_view_table(&$vars) {
+ * @param array $variables
...
 function template_preprocess_views_view_grid(&$vars) {

@param array $vars for now for the preprocess function.

+++ b/core/modules/views/views.theme.incundefined
@@ -665,17 +665,24 @@ function template_preprocess_views_view_table(&$vars) {
+ *   - rows: @todo.

Again, I'm sure we can pull this from another views conversion patch.

Doc updates from #46 plus a couple more.

#47: 1843750-47-twig-views-view-grid.patch queued for re-testing.

i'll do some manual testing.

HEAD:

<table  class="views-view-grid views-view-grid cols-2">
<tbody>
<tr >
<td  class="col-1 col-first">
<article id="node-3" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/3" about="/d8html/node/3" typeof="sioc:Item foaf:Document" role="article">
<header>
<h2 property="dc:title" datatype="">
<a href="/d8html/node/3">laksjdf;aljsf</a>
</h2>
<ul class="contextual-links">
<li class="node-edit odd first">
<a href="/d8html/node/3/edit?destination=node">Edit</a>
</li>
<li class="node-delete even last">
<a href="/d8html/node/3/delete?destination=node">Delete</a>
</li>
</ul>
<div class="meta submitted">
<article class="profile" class="user" typeof="sioc:UserAccount" about="/d8html/user/1">
</article>
<span property="dc:date dc:created" content="2013-05-14T20:37:06+10:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/d8html/user/1" rel="author" title="View user profile." class="username" lang="" about="/d8html/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a> on Tue, 05/14/2013 - 20:37</span>
</div>
</header>
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden" data-edit-id="node/3/body/und/teaser">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>alskdjfl;asjkdfl;as fl;as f</p>
</div>
</div>
</div>
</div>
<footer class="link-wrapper">
<ul class="links inline">
<li class="node-readmore odd first last">
<a href="/d8html/node/3" rel="tag" title="laksjdf;aljsf">Read more<span class="element-invisible"> about laksjdf;aljsf</span>
</a>
</li>
</ul>
</footer>
</article>
</td>
<td  class="col-2 col-last">
<article id="node-2" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/2" about="/d8html/node/2" typeof="sioc:Item foaf:Document" role="article">
<header>
<h2 property="dc:title" datatype="">
<a href="/d8html/node/2">laskdjf;alsf</a>
</h2>
<ul class="contextual-links">
<li class="node-edit odd first">
<a href="/d8html/node/2/edit?destination=node">Edit</a>
</li>
<li class="node-delete even last">
<a href="/d8html/node/2/delete?destination=node">Delete</a>
</li>
</ul>
<div class="meta submitted">
<article class="profile" class="user" typeof="sioc:UserAccount" about="/d8html/user/1">
</article>
<span property="dc:date dc:created" content="2013-05-14T20:36:57+10:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/d8html/user/1" rel="author" title="View user profile." class="username" lang="" about="/d8html/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a> on Tue, 05/14/2013 - 20:36</span>
</div>
</header>
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden" data-edit-id="node/2/body/und/teaser">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>;alsdjf;alskdjf</p>
</div>
</div>
</div>
</div>
<footer class="link-wrapper">
<ul class="links inline">
<li class="node-readmore odd first last">
<a href="/d8html/node/2" rel="tag" title="laskdjf;alsf">Read more<span class="element-invisible"> about laskdjf;alsf</span>
</a>
</li>
</ul>
</footer>
</article>
</td>
</tr>
<tr >
<td  class="col-1 col-first">
<article id="node-1" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/1" about="/d8html/node/1" typeof="sioc:Item foaf:Document" role="article">
<header>
<h2 property="dc:title" datatype="">
<a href="/d8html/node/1">asdfasdf</a>
</h2>
<ul class="contextual-links">
<li class="node-edit odd first">
<a href="/d8html/node/1/edit?destination=node">Edit</a>
</li>
<li class="node-delete even last">
<a href="/d8html/node/1/delete?destination=node">Delete</a>
</li>
</ul>
<div class="meta submitted">
<article class="profile" class="user" typeof="sioc:UserAccount" about="/d8html/user/1">
</article>
<span property="dc:date dc:created" content="2013-05-14T19:52:55+10:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/d8html/user/1" rel="author" title="View user profile." class="username" lang="" about="/d8html/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a> on Tue, 05/14/2013 - 19:52</span>
</div>
</header>
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden" data-edit-id="node/1/body/und/teaser">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>asdf</p>
</div>
</div>
</div>
</div>
<footer class="link-wrapper">
<ul class="links inline">
<li class="node-readmore odd first last">
<a href="/d8html/node/1" rel="tag" title="asdfasdf">Read more<span class="element-invisible"> about asdfasdf</span>
</a>
</li>
</ul>
</footer>
</article>
</td>
<td  class="col-2 col-last">
</td>
</tr>
</tbody>
</table>

#47:

<table class="views-view-grid views-view-grid cols-2">
<tbody>
<tr>
<td class="col-1 col-first">
<article id="node-3" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/3" about="/d8html/node/3" typeof="sioc:Item foaf:Document" role="article">
<header>
<h2 property="dc:title" datatype="">
<a href="/d8html/node/3">laksjdf;aljsf</a>
</h2>
<ul class="contextual-links">
<li class="node-edit odd first">
<a href="/d8html/node/3/edit?destination=node">Edit</a>
</li>
<li class="node-delete even last">
<a href="/d8html/node/3/delete?destination=node">Delete</a>
</li>
</ul>
<div class="meta submitted">
<article class="profile" class="user" typeof="sioc:UserAccount" about="/d8html/user/1">
</article>
<span property="dc:date dc:created" content="2013-05-14T20:37:06+10:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/d8html/user/1" rel="author" title="View user profile." class="username" lang="" about="/d8html/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a> on Tue, 05/14/2013 - 20:37</span>
</div>
</header>
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden" data-edit-id="node/3/body/und/teaser">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>alskdjfl;asjkdfl;as fl;as f</p>
</div>
</div>
</div>
</div>
<footer class="link-wrapper">
<ul class="links inline">
<li class="node-readmore odd first last">
<a href="/d8html/node/3" rel="tag" title="laksjdf;aljsf">Read more<span class="element-invisible"> about laksjdf;aljsf</span>
</a>
</li>
</ul>
</footer>
</article>
</td>
<td class="col-2 col-last">
<article id="node-2" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/2" about="/d8html/node/2" typeof="sioc:Item foaf:Document" role="article">
<header>
<h2 property="dc:title" datatype="">
<a href="/d8html/node/2">laskdjf;alsf</a>
</h2>
<ul class="contextual-links">
<li class="node-edit odd first">
<a href="/d8html/node/2/edit?destination=node">Edit</a>
</li>
<li class="node-delete even last">
<a href="/d8html/node/2/delete?destination=node">Delete</a>
</li>
</ul>
<div class="meta submitted">
<article class="profile" class="user" typeof="sioc:UserAccount" about="/d8html/user/1">
</article>
<span property="dc:date dc:created" content="2013-05-14T20:36:57+10:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/d8html/user/1" rel="author" title="View user profile." class="username" lang="" about="/d8html/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a> on Tue, 05/14/2013 - 20:36</span>
</div>
</header>
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden" data-edit-id="node/2/body/und/teaser">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>;alsdjf;alskdjf</p>
</div>
</div>
</div>
</div>
<footer class="link-wrapper">
<ul class="links inline">
<li class="node-readmore odd first last">
<a href="/d8html/node/2" rel="tag" title="laskdjf;alsf">Read more<span class="element-invisible"> about laskdjf;alsf</span>
</a>
</li>
</ul>
</footer>
</article>
</td>
</tr>
<tr>
<td class="col-1 col-first">
<article id="node-1" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/1" about="/d8html/node/1" typeof="sioc:Item foaf:Document" role="article">
<header>
<h2 property="dc:title" datatype="">
<a href="/d8html/node/1">asdfasdf</a>
</h2>
<ul class="contextual-links">
<li class="node-edit odd first">
<a href="/d8html/node/1/edit?destination=node">Edit</a>
</li>
<li class="node-delete even last">
<a href="/d8html/node/1/delete?destination=node">Delete</a>
</li>
</ul>
<div class="meta submitted">
<article class="profile" class="user" typeof="sioc:UserAccount" about="/d8html/user/1">
</article>
<span property="dc:date dc:created" content="2013-05-14T19:52:55+10:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/d8html/user/1" rel="author" title="View user profile." class="username" lang="" about="/d8html/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">admin</a> on Tue, 05/14/2013 - 19:52</span>
</div>
</header>
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden" data-edit-id="node/1/body/und/teaser">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>asdf</p>
</div>
</div>
</div>
</div>
<footer class="link-wrapper">
<ul class="links inline">
<li class="node-readmore odd first last">
<a href="/d8html/node/1" rel="tag" title="asdfasdf">Read more<span class="element-invisible"> about asdfasdf</span>
</a>
</li>
</ul>
</footer>
</article>
</td>
<td class="col-2 col-last">
</td>
</tr>
</tbody>
</table>

Diff:

--- /Users/thedavidmeister/tmp/diff/original-mod 
+++ /Users/thedavidmeister/tmp/diff/new-mod 
@@ -1,7 +1,7 @@
-<table  class="views-view-grid views-view-grid cols-2">
+<table class="views-view-grid views-view-grid cols-2">
 <tbody>
-<tr >
-<td  class="col-1 col-first">
+<tr>
+<td class="col-1 col-first">
 <article id="node-3" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/3" about="/d8html/node/3" typeof="sioc:Item foaf:Document" role="article">
 <header>
 <h2 property="dc:title" datatype="">
@@ -40,7 +40,7 @@
 </footer>
 </article>
 </td>
-<td  class="col-2 col-last">
+<td class="col-2 col-last">
 <article id="node-2" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/2" about="/d8html/node/2" typeof="sioc:Item foaf:Document" role="article">
 <header>
 <h2 property="dc:title" datatype="">
@@ -80,8 +80,8 @@
 </article>
 </td>
 </tr>
-<tr >
-<td  class="col-1 col-first">
+<tr>
+<td class="col-1 col-first">
 <article id="node-1" class="node node-article promoted view-mode-teaser contextual-region clearfix" role="article" data-edit-entity="node/1" about="/d8html/node/1" typeof="sioc:Item foaf:Document" role="article">
 <header>
 <h2 property="dc:title" datatype="">
@@ -120,7 +120,7 @@
 </footer>
 </article>
 </td>
-<td  class="col-2 col-last">
+<td class="col-2 col-last">
 </td>
 </tr>
 </tbody>

New HTML is functionally identical and has better whitespace. Twig conversion also fixes some a bunch of errors that were appearing for me in HEAD:

Notice: Undefined index: header in template_preprocess_views_view_grid() (line 769 of core/modules/views/views.theme.inc).
Notice: Undefined variable: row_classes in include() (line 19 of core/modules/views/templates/views-view-grid.tpl.php).
Notice: Undefined variable: row_classes in include() (line 19 of core/modules/views/templates/views-view-grid.tpl.php).

+ * - rows: A list of rows. Each row contains an list of columns.

"a list of columns."

+ // This should be string so that's okay.

"This should be a string so this is ok."

Done and done

Profiling.

=== 8.x..8.x compared (519be9a13e594..519bea2c59e7a):

ct  : 88,823|88,823|0|0.0%
wt  : 610,952|612,153|1,201|0.2%
cpu : 557,585|557,627|42|0.0%
mu  : 9,114,832|9,114,832|0|0.0%
pmu : 9,269,740|9,269,740|0|0.0%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519be9a13e594&...

=== 8.x..1843750 compared (519be9a13e594..519bea9000214):

ct  : 88,823|89,194|371|0.4%
wt  : 610,952|614,735|3,783|0.6%
cpu : 557,585|559,914|2,329|0.4%
mu  : 9,114,832|9,140,500|25,668|0.3%
pmu : 9,269,740|9,295,476|25,736|0.3%

http://www.lionsad.de/xhprof-kit/xhprof/xhprof_html/?run1=519be9a13e594&...

+++ b/core/modules/views/views.theme.incundefined
@@ -652,17 +652,24 @@ function template_preprocess_views_view_table(&$vars) {
+  $result = $view->result;

Actually $result is not used so can be removed.

I'll take care of re-rolling.

Fixed #57

Looks good, thanks @mr.baileys! Great catch @alexpott :)

+1. Ready for #1987510: [meta] Convert all core *.tpl.php templates to Twig as singular patch

Committed d39eace and pushed to 8.x. Thanks!