This document summarizes updates to the Display Suite module, including: 1. Configuration management improvements where settings are now stored in configuration files like YAML instead of the database. 2. Display Suite now uses Twig templates to define layouts and regions. An example one column Twig template is shown. 3. Additional context is provided on contextual links, form, and comment support in Twig templates.

1. Display
suite
of
your
display
Drupalaton
2013

2. Bram
Goffings
Drupal
developer
@
nascom
Twi?er:
@aspilicious
D.o:
@aspilicious
Co-­‐maintainer
Display
Suite
Play
a
mean
game
of
table
tennis
About
me

3. Quick
demo

4. What
has
changed?

5. ConfiguraNon
management
(cmi)
SeQngs
are
stored
in
configuraNon
files
#
ds.config.yml
field_template:
'0'
.-­‐default:
theme_field
.-­‐kill-­‐colon:
'0’

6. ConfiguraNon
management
(cmi)
Custom
fields
made
in
the
UI
are
saved
in
yml
files.
#
ds.field.test.yml
proper:es:
code:
value:
test
format:
ds_code
use_token:
0
field:
test
label:
test
ui_limit:
''
en::es:
node:
node
field_type:
code_field

7. ConfiguraNon
management
(cmi)
Custom
field
and
region
classes
are
saved
in
yml
files
#
ds.classes.yml
regions:
'test_region_class'
fields:
'test_fields_class'

8. ConfiguraNon
management
(cmi)
ConfiguraNon
schema’s
are
NOT
YET
wri?en

9. Twig
Display
suite
uses
twig
templates
now

10. Twig
Display
Suite
one-­‐col
layout
{#
/**
*
@file
*
Display
Suite
1
column
template.
*
*
Available
variables:
*
-­‐
ds_content_wrapper:
@todo
*
-­‐
a?ributes:
@todo
*
-­‐
Ntle_suffix:
@todo
*
-­‐
ds_content:
@todo
*/
#}
<{{
ds_content_wrapper
}}
class="ds-­‐1col
{{
a?ributes.class
}}
clearfix"
{{
a?ributes
}}
>
{%
if
Ntle_suffix.contextual_links
is
not
null
%}
{{
Ntle_suffix.contextual_links
}}
{%
endif
%}
{{
ds_content
}}
</{{
ds_content_wrapper
}}>
{%
if
drupal_render_children
is
not
null
%}
{{
drupal_render_children
}}
{%
endif
%}

11. Twig
Display
Suite
one-­‐col
layout
{#
/**
*
@file
*
Display
Suite
1
column
template.
*
*
Available
variables:
*
-­‐
ds_content_wrapper:
@todo
*
-­‐
a?ributes:
@todo
*
-­‐
Ntle_suffix:
@todo
*
-­‐
ds_content:
@todo
*/
#}
<{{
ds_content_wrapper
}}
class="ds-­‐1col
{{
a?ributes.class
}}
clearfix"
{{
a?ributes
}}
>
{%
if
Ntle_suffix.contextual_links
is
not
null
%}
{{
Ntle_suffix.contextual_links
}}
{%
endif
%}
{{
ds_content
}}
</{{
ds_content_wrapper
}}>
{%
if
drupal_render_children
is
not
null
%}
{{
drupal_render_children
}}
{%
endif
%}
ç
comments

12. Twig
Display
Suite
one-­‐col
layout
{#
/**
*
@file
*
Display
Suite
1
column
template.
*
*
Available
variables:
*
-­‐
ds_content_wrapper:
@todo
*
-­‐
a?ributes:
@todo
*
-­‐
Ntle_suffix:
@todo
*
-­‐
ds_content:
@todo
*/
#}
<{{
ds_content_wrapper
}}
class="ds-­‐1col
{{
a?ributes.class
}}
clearfix"
{{
a?ributes
}}
>
{%
if
Ntle_suffix.contextual_links
is
not
null
%}
{{
Ntle_suffix.contextual_links
}}
{%
endif
%}
{{
ds_content
}}
</{{
ds_content_wrapper
}}>
{%
if
drupal_render_children
is
not
null
%}
{{
drupal_render_children
}}
{%
endif
%}
ç
Contextual
links
support

13. Twig
Display
Suite
one-­‐col
layout
{#
/**
*
@file
*
Display
Suite
1
column
template.
*
*
Available
variables:
*
-­‐
ds_content_wrapper:
@todo
*
-­‐
a?ributes:
@todo
*
-­‐
Ntle_suffix:
@todo
*
-­‐
ds_content:
@todo
*/
#}
<{{
ds_content_wrapper
}}
class="ds-­‐1col
{{
a?ributes.class
}}
clearfix"
{{
a?ributes
}}
>
{%
if
Ntle_suffix.contextual_links
is
not
null
%}
{{
Ntle_suffix.contextual_links
}}
{%
endif
%}
{{
ds_content
}}
</{{
ds_content_wrapper
}}>
{%
if
drupal_render_children
is
not
null
%}
{{
drupal_render_children
}}
{%
endif
%}
ç
DS
form
support

14. Twig
Display
Suite
one-­‐col
layout
{#
/**
*
@file
*
Display
Suite
1
column
template.
*
*
Available
variables:
*
-­‐
ds_content_wrapper:
@todo
*
-­‐
a?ributes:
@todo
*
-­‐
Ntle_suffix:
@todo
*
-­‐
ds_content:
@todo
*/
#}
<{{
ds_content_wrapper
}}
class="ds-­‐1col
{{
a?ributes.class
}}
clearfix"
{{
a?ributes
}}
>
{%
if
Ntle_suffix.contextual_links
is
not
null
%}
{{
Ntle_suffix.contextual_links
}}
{%
endif
%}
{{
ds_content
}}
</{{
ds_content_wrapper
}}>
{%
if
drupal_render_children
is
not
null
%}
{{
drupal_render_children
}}
{%
endif
%}
Actual
template!

15. Twig
Drush
layout
script
is
not
yet
(completely)
working

16. RouNng,
controllers
and
Symfony
• Converted
hook_menu
to
the
new
rouNng
system
• Converted
procedural
callbacks
to
controller
classes
• Converted
form
callbacks
to
form
classes
• Made
use
of
the
symfony
request
objects.
• …

17. RouNng,
controllers
and
Symfony
I
need
a
few
hours
to
go
through
all
these
changes.

18. RouNng,
controllers
and
Symfony
I
need
a
few
hours
to
go
through
all
the
changes.
Browse
through
the
Display
Suite
UI
module
source
code
if
you’re
curious
how
the
rouNng
system
is
working
in
D8
now.

19. RouNng,
controllers
and
Symfony
I
need
a
few
hours
to
go
through
all
the
changes.
Browse
through
the
Display
Suite
UI
module
source
code
if
you’re
curious
how
the
rouNng
system
is
working
in
D8
now.
The
router
stuff
will
sNll
change
a
lot
before
Drupal
8
is
released.

20. Plugins

21. Plugins
Display
suite
uses
plugins
for
custom
fields
wri?en
in
code

22. Plugins
Display
suite
uses
plugins
for
custom
fields
wri?en
in
code
Plugins
replace
hook_ds_fields_info

23. Plugins
Display
suite
uses
plugins
for
custom
fields
wri?en
in
code
Plugins
replace
hook_ds_fields_info
Hook_ds_fields_info_alter
sNll
exists

24. What
is
a
DS
field
plugin?

25. What
is
a
DS
field
plugin?
A
class
that
implements
the
DsFieldInterface
interface

26. What
is
a
DS
field
plugin?
A
class
that
implements
the
DsFieldInterface
interface
Placed
in
the
DsField
namespace
namespace
Drupal<module>PluginDsField;

27. What
is
a
DS
field
plugin?
A
class
that
implements
the
DsFieldInterface
interface
Placed
in
the
DsField
namespace
namespace
Drupal<module>PluginDsField;
What
does
that
mean???

28. Let’s
build
an
example
module
to
find
out!!

29. ds_example.info.yml
name:
'Display
Suite
example'
descripNon:
'My
first
awesome
field
plugin'
type:
module
core:
8.x
package:
'Display
Suite'

30. ds_example.info.yml
name:
'Display
Suite
example'
descripNon:
'My
first
awesome
field
plugin'
type:
module
core:
8.x
package:
'Display
Suite'

31. ds_example.module
<?php

32. ds_example.module
<?php
Seriously?

33. ds_example.module
<?php
Seriously?
Yeah…
;-­‐(
But
hopefully
we
can
make
this
file
opNonal
soon.

34. Hello
plugin

35. Hello
plugin
• A
field
that
prints
hello

36. Hello
plugin
• A
field
that
prints
hello
• Place
inside
the
Drupal<module>PluginDsField
namespace

37. Hello
plugin
• A
field
that
prints
hello
• Place
inside
the
Drupalds_examplePluginDsField
namespace

38. Hello
plugin
• A
field
that
prints
hello
• Place
inside
the
Drupalds_examplePluginDsField
namespace

39. Hello
plugin
• A
field
that
prints
hello
• Place
inside
the
Drupalds_examplePluginDsField
namespace
That
are
a
lot
of
directories!!

40. Hello
plugin
• A
field
that
prints
hello
• Place
inside
the
Drupalds_examplePluginDsField
namespace
That
are
a
lot
of
directories!!
Get
used
to
it
J

41. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

42. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

43. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

44. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

45. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

46. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

47. Hello
plugin
<?php
namespace
Drupalds_examplePluginDsField;
use
DrupalCoreAnnotaNonTranslaNon;
use
DrupaldsAnnotaNonDsField;
use
DrupaldsPluginDsFieldDsFieldBase;
/**
*
@DsField(
*
id
=
"hello",
*
Ntle
=
@TranslaNon("Hello"),
*
enNty_type
=
"node",
*
module
=
"ds_example"
*
)
*/
class
Hello
extends
DsFieldBase
{
public
funcNon
render($field)
{
return
"hello";
}
}

48. Quick
demo
(part
2)

49. Other
funcNonal
changes
• Field
templates
are
moved
from
ds
extras
to
ds
core
• CTools
integraNon
is
gone.
So
no
fancy
dynamic
field
integraNon
at
the
moment.

50. Your
quesNons?!

51. Please
test
it!
and
file
a
bug
report
when
it
fails*
*
When
filing
a
bug
report,
be
sure
it
isn’t
filed
yet.
Try
to
be
as
specific
as
possible.
Don’t
run
Display
Suite
on
a
“real”
drupal
8
site
yet
(if
they
exist).
Stuff
could
break.
We
are
not
responsible
for
the
mental
pain
a
broken
Display
Suite
module
causes
when
there
isn’t
an
official
release
yet.
Not
everything
is
converted
yet,
you
can
ask
us
in
irc
if
you’re
in
doubt.