"We love Drupal here at Inclind. It is no secret Drupal is our preferred CMS because of its super powers like scalability and rock solid security. But as the non-technical, right brained member of this team of technical minds, I have always struggled with Drupal to get pages the way I want. When it came to creating pages or editing content, Drupal didn’t offer that great of an experience. Especially when compared to its closest rival, WordPress and even the less powerful but easy-to-use SquareSpace. But I am happy to report that thanks to the new Gutenberg content editor, content managers and authors are now getting a completely new level of control for editing content and building page layouts and it’s pretty darn awesome.
What is Gutenberg?
Gutenberg (named for Johannes Gutenberg, the inventor of moveable type printing) is a block-based editor that was officially rolled out with WordPress 5.0 in late 2018. According to Yoast, it is the first of three stages to go from page editing to template creation to a full website customizer.
Although Gutenberg debuted as a WordPress feature, it is also available on Drupal and offers a clean, author-friendly interface that allows you to create robust page layouts from a set of blocks without any coding. It replaces the CKEditor WYSIWYG editor module with a modern editing experience with a simplicity similar to editors like SquareSpace. Gone is the rigid Microsoft Word-like editing experience, replaced by a very visual and flexible way to build and edit pages.
How Does it Work?
Opening up a page in Gutenberg for the first time is the moment of zen for content managers — especially if you are used to editing in the old school editor. That beautiful blank page waiting for you to create your vision while knowing that you have the control to build robust pages without struggling to position elements with divs or having to tweak HTML is downright thrilling.
With Gutenberg, you build pages out of blocks. There are sets of elements like headings, paragraphs, images, buttons, videos, quotes, separators, spacers and other commonly used block types that you add to your pages and populate with text and media and my favorite — whitespace.
You can break content up across columns easily and even create custom designed blocks for things like accordions, call-to-action blocks and testimonials that can be reused throughout the website. Want to add adjustable spacers to create breathing room between elements and can drag and drop blocks in the editor to adjust layouts? No problem. On the right sidebar of the editor, you can apply formatting to blocks like adjusting font sizes, applying color or changing positioning. Sounds amazing, right?
Putting it to the Test
In our latest website launch for Delaware Electric Cooperative (DEC), we put the Gutenberg editor to the test. One of the goals of the project was enabling the content editor to create engaging landing pages on the fly. In the discovery process for the project, it was determined that Gutenberg may be the tool needed to achieve this goal.
We approached this project with the atomic design methodology of designing the website from its smallest components — atoms and molecules — up to the full-scale templates and pages. This process fit perfectly with using the Gutenberg editor. Molecules — an atomic design term which is an element made up of smaller parts or atoms — like cards, information boxes and accordions — became custom Gutenberg blocks that the client could use to build pages. All of these elements live in an online library called Pattern Lab. The client can reference the system at any time to determine the blocks that could be used to build pages and set up those blocks — all prebuilt in the Gutenberg editor.
You can see in this video, how easy it is to build a landing page out of the Gutenberg blocks and all of these blocks scale beautifully on mobile devices.
“Working with the Gutenberg editor has certainly been a bit of an adjustment. While it has taken a few weeks to get used to, I’m pleased with all of the design features available with the editor,” said Jeremy Tucker, marketing manager for DEC. “I’m now able to create more dynamic pages that better serve our consumers. This is, without a doubt, an improvement over the Drupal editing platform I used over the past seven years.”
Conclusion
Websites aren’t just about how visitors engage with your content, but also how you, the content manager, are able to successfully able to accomplish your goals with managing content. When tasked to build out pages based on my designs in Drupal in the past, I have shared in the struggles of non-technical content managers in getting layouts to look the way I want. With Gutenberg, those struggles are replaced by the freedom to create engaging pages within minutes. It is truly a game changer in Drupal content management.
{
"jsonapi": {
"version": "1.0",
"meta": {
"links": {
"self": {
"href": "http:\/\/jsonapi.org\/format\/1.0\/"
}
}
}
},
"data": {
"type": "node--article",
"id": "e1c0399a-201a-4e67-98da-edfc20ef96b5",
"links": {
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5?resourceVersion=id%3A261"
}
},
"attributes": {
"internalId": 261,
"isPublished": true,
"title": "Gutenberg Has Become a Game Changer When It Comes to Managing Content on Drupal",
"created": "2022-07-17T17:57:21+00:00",
"changed": "2024-05-09T18:27:37+00:00",
"promote": false,
"sticky": false,
"metatag": [
{
"tag": "meta",
"attributes": {
"name": "title",
"content": "Gutenberg Has Become a Game Changer When It Comes to"
}
},
{
"tag": "meta",
"attributes": {
"name": "description",
"content": "\u0022We love Drupal here at Inclind. It is no secret Drupal is our preferred CMS because of its super powers like scalability and rock solid security. But as the"
}
},
{
"tag": "meta",
"attributes": {
"name": "abstract",
"content": "Delaware Drupal web development company specializing in custom Drupal development, real estate and rental brokerage websites, internet marketing and ecommerce"
}
},
{
"tag": "link",
"attributes": {
"rel": "canonical",
"href": "https:\/\/www.inclind.com\/news\/gutenberg-has-become-game-changer-when-it-comes-managing-content-drupal"
}
},
{
"tag": "meta",
"attributes": {
"name": "robots",
"content": "index, follow"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:site_name",
"content": "Inclind"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:url",
"content": "https:\/\/www.inclind.com\/news\/gutenberg-has-become-game-changer-when-it-comes-managing-content-drupal"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:title",
"content": "Gutenberg Has Become a Game Changer When It Comes to Managing Content on Drupal"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:description",
"content": "Delaware Drupal web development company specializing in custom Drupal development, real estate and rental brokerage websites, internet marketing and ecommerce"
}
},
{
"tag": "meta",
"attributes": {
"property": "place:location:latitude",
"content": "38.77513"
}
},
{
"tag": "meta",
"attributes": {
"property": "place:location:longitude",
"content": "-75.13974"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:street_address",
"content": "119 W. Third St., Suite 6"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:locality",
"content": "Lewes"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:region",
"content": "Delaware"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:postal_code",
"content": "19958"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:country_name",
"content": "United States"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:email",
"content": "hello@inclind.com"
}
},
{
"tag": "meta",
"attributes": {
"property": "og:phone_number",
"content": "(800) 604-8139"
}
}
],
"path": {
"alias": "\/news\/gutenberg-has-become-game-changer-when-it-comes-managing-content-drupal",
"pid": 499,
"langcode": "en"
},
"body": {
"value": "\u003Cp\u003E\u0022We love Drupal here at Inclind. It is no secret Drupal is our preferred CMS because of its super powers like scalability and rock solid security. But as the non-technical, right brained member of this team of technical minds, I have always struggled with Drupal to get pages the way I want. When it came to creating pages or editing content, Drupal didn\u2019t offer that great of an experience. Especially when compared to its closest rival, WordPress and even the less powerful but easy-to-use SquareSpace. But I am happy to report that thanks to the new Gutenberg content editor, content managers and authors are now getting a completely new level of control for editing content and building page layouts and it\u2019s pretty darn awesome.\u003C\/p\u003E\u003Cp\u003EWhat is Gutenberg?\u003Cbr\u003EGutenberg (named for Johannes Gutenberg, the inventor of moveable type printing) is a block-based editor that was officially rolled out with WordPress 5.0 in late 2018. According to Yoast, it is the first of three stages to go from page editing to template creation to a full website customizer.\u003C\/p\u003E\u003Cp\u003EAlthough Gutenberg debuted as a WordPress feature, it is also available on Drupal and offers a clean, author-friendly interface that allows you to create robust page layouts from a set of blocks without any coding. It replaces the CKEditor WYSIWYG editor module with a modern editing experience with a simplicity similar to editors like SquareSpace. Gone is the rigid Microsoft Word-like editing experience, replaced by a very visual and flexible way to build and edit pages.\u003C\/p\u003E\u003Cp\u003EHow Does it Work?\u003Cbr\u003EOpening up a page in Gutenberg for the first time is the moment of zen for content managers \u2014 especially if you are used to editing in the old school editor. That beautiful blank page waiting for you to create your vision while knowing that you have the control to build robust pages without struggling to position elements with divs or having to tweak HTML is downright thrilling.\u003C\/p\u003E\u003Cp\u003EWith Gutenberg, you build pages out of blocks. There are sets of elements like headings, paragraphs, images, buttons, videos, quotes, separators, spacers and other commonly used block types that you add to your pages and populate with text and media and my favorite \u2014 whitespace.\u003C\/p\u003E\u003Cp\u003EYou can break content up across columns easily and even create custom designed blocks for things like accordions, call-to-action blocks and testimonials that can be reused throughout the website. Want to add adjustable spacers to create breathing room between elements and can drag and drop blocks in the editor to adjust layouts? No problem. On the right sidebar of the editor, you can apply formatting to blocks like adjusting font sizes, applying color or changing positioning. Sounds amazing, right?\u003C\/p\u003E\u003Cp\u003EPutting it to the Test\u003Cbr\u003EIn our latest website launch for Delaware Electric Cooperative (DEC), we put the Gutenberg editor to the test. One of the goals of the project was enabling the content editor to create engaging landing pages on the fly. In the discovery process for the project, it was determined that Gutenberg may be the tool needed to achieve this goal.\u003C\/p\u003E\u003Cp\u003EWe approached this project with the atomic design methodology of designing the website from its smallest components \u2014 atoms and molecules \u2014 up to the full-scale templates and pages. This process fit perfectly with using the Gutenberg editor. Molecules \u2014 an atomic design term which is an element made up of smaller parts or atoms \u2014 like cards, information boxes and accordions \u2014 became custom Gutenberg blocks that the client could use to build pages. All of these elements live in an online library called Pattern Lab. The client can reference the system at any time to determine the blocks that could be used to build pages and set up those blocks \u2014 all prebuilt in the Gutenberg editor.\u003C\/p\u003E\u003Cp\u003EYou can see in this video, how easy it is to build a landing page out of the Gutenberg blocks and all of these blocks scale beautifully on mobile devices.\u003C\/p\u003E\u003Cp\u003E\u201cWorking with the Gutenberg editor has certainly been a bit of an adjustment. While it has taken a few weeks to get used to, I\u2019m pleased with all of the design features available with the editor,\u201d said Jeremy Tucker, marketing manager for DEC. \u201cI\u2019m now able to create more dynamic pages that better serve our consumers. This is, without a doubt, an improvement over the Drupal editing platform I used over the past seven years.\u201d\u003C\/p\u003E\u003Cp\u003EConclusion\u003Cbr\u003EWebsites aren\u2019t just about how visitors engage with your content, but also how you, the content manager, are able to successfully able to accomplish your goals with managing content. When tasked to build out pages based on my designs in Drupal in the past, I have shared in the struggles of non-technical content managers in getting layouts to look the way I want. With Gutenberg, those struggles are replaced by the freedom to create engaging pages within minutes. It is truly a game changer in Drupal content management.\u003C\/p\u003E",
"format": "basic_html",
"processed": "\u003Cp\u003E\u0022We love Drupal here at Inclind. It is no secret Drupal is our preferred CMS because of its super powers like scalability and rock solid security. But as the non-technical, right brained member of this team of technical minds, I have always struggled with Drupal to get pages the way I want. When it came to creating pages or editing content, Drupal didn\u2019t offer that great of an experience. Especially when compared to its closest rival, WordPress and even the less powerful but easy-to-use SquareSpace. But I am happy to report that thanks to the new Gutenberg content editor, content managers and authors are now getting a completely new level of control for editing content and building page layouts and it\u2019s pretty darn awesome.\u003C\/p\u003E\u003Cp\u003EWhat is Gutenberg?\u003Cbr\u003EGutenberg (named for Johannes Gutenberg, the inventor of moveable type printing) is a block-based editor that was officially rolled out with WordPress 5.0 in late 2018. According to Yoast, it is the first of three stages to go from page editing to template creation to a full website customizer.\u003C\/p\u003E\u003Cp\u003EAlthough Gutenberg debuted as a WordPress feature, it is also available on Drupal and offers a clean, author-friendly interface that allows you to create robust page layouts from a set of blocks without any coding. It replaces the CKEditor WYSIWYG editor module with a modern editing experience with a simplicity similar to editors like SquareSpace. Gone is the rigid Microsoft Word-like editing experience, replaced by a very visual and flexible way to build and edit pages.\u003C\/p\u003E\u003Cp\u003EHow Does it Work?\u003Cbr\u003EOpening up a page in Gutenberg for the first time is the moment of zen for content managers \u2014 especially if you are used to editing in the old school editor. That beautiful blank page waiting for you to create your vision while knowing that you have the control to build robust pages without struggling to position elements with divs or having to tweak HTML is downright thrilling.\u003C\/p\u003E\u003Cp\u003EWith Gutenberg, you build pages out of blocks. There are sets of elements like headings, paragraphs, images, buttons, videos, quotes, separators, spacers and other commonly used block types that you add to your pages and populate with text and media and my favorite \u2014 whitespace.\u003C\/p\u003E\u003Cp\u003EYou can break content up across columns easily and even create custom designed blocks for things like accordions, call-to-action blocks and testimonials that can be reused throughout the website. Want to add adjustable spacers to create breathing room between elements and can drag and drop blocks in the editor to adjust layouts? No problem. On the right sidebar of the editor, you can apply formatting to blocks like adjusting font sizes, applying color or changing positioning. Sounds amazing, right?\u003C\/p\u003E\u003Cp\u003EPutting it to the Test\u003Cbr\u003EIn our latest website launch for Delaware Electric Cooperative (DEC), we put the Gutenberg editor to the test. One of the goals of the project was enabling the content editor to create engaging landing pages on the fly. In the discovery process for the project, it was determined that Gutenberg may be the tool needed to achieve this goal.\u003C\/p\u003E\u003Cp\u003EWe approached this project with the atomic design methodology of designing the website from its smallest components \u2014 atoms and molecules \u2014 up to the full-scale templates and pages. This process fit perfectly with using the Gutenberg editor. Molecules \u2014 an atomic design term which is an element made up of smaller parts or atoms \u2014 like cards, information boxes and accordions \u2014 became custom Gutenberg blocks that the client could use to build pages. All of these elements live in an online library called Pattern Lab. The client can reference the system at any time to determine the blocks that could be used to build pages and set up those blocks \u2014 all prebuilt in the Gutenberg editor.\u003C\/p\u003E\u003Cp\u003EYou can see in this video, how easy it is to build a landing page out of the Gutenberg blocks and all of these blocks scale beautifully on mobile devices.\u003C\/p\u003E\u003Cp\u003E\u201cWorking with the Gutenberg editor has certainly been a bit of an adjustment. While it has taken a few weeks to get used to, I\u2019m pleased with all of the design features available with the editor,\u201d said Jeremy Tucker, marketing manager for DEC. \u201cI\u2019m now able to create more dynamic pages that better serve our consumers. This is, without a doubt, an improvement over the Drupal editing platform I used over the past seven years.\u201d\u003C\/p\u003E\u003Cp\u003EConclusion\u003Cbr\u003EWebsites aren\u2019t just about how visitors engage with your content, but also how you, the content manager, are able to successfully able to accomplish your goals with managing content. When tasked to build out pages based on my designs in Drupal in the past, I have shared in the struggles of non-technical content managers in getting layouts to look the way I want. With Gutenberg, those struggles are replaced by the freedom to create engaging pages within minutes. It is truly a game changer in Drupal content management.\u003C\/p\u003E",
"summary": ""
},
"articleType": "news",
"author": "Team Inclind",
"authorTitle": null,
"challenge": null,
"introText": null,
"location": null,
"f_metatag": null,
"publishDate": "2019-07-26",
"result": null,
"solution": null,
"subheader1": "With new features and an easy to use interface, Content Management has never been so easy",
"subheader2": null
},
"relationships": {
"contentType": {
"data": null,
"links": {
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/contentType?resourceVersion=id%3A261"
}
}
},
"category": {
"data": {
"type": "catTerm",
"id": "e7befc73-77f0-46c9-aedf-608856a6a450",
"meta": {
"drupal_internal__target_id": 52
}
},
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/category?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/category?resourceVersion=id%3A261"
}
}
},
"companyRef": {
"data": null,
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/companyRef?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/companyRef?resourceVersion=id%3A261"
}
}
},
"image": {
"data": {
"type": "images",
"id": "27e907e9-c076-4d56-a081-58aeac74c22d",
"meta": {
"drupal_internal__target_id": 222
}
},
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/image?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/image?resourceVersion=id%3A261"
}
}
},
"slides": {
"data": [],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/slides?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/slides?resourceVersion=id%3A261"
}
}
},
"teamMember": {
"data": [
{
"type": "node--person",
"id": "87407245-73a3-43f8-9f44-9e70f40a0e1a",
"meta": {
"drupal_internal__target_id": 120
}
}
],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/teamMember?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/teamMember?resourceVersion=id%3A261"
}
}
},
"tags": {
"data": [],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/tags?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/tags?resourceVersion=id%3A261"
}
}
},
"topic": {
"data": [
{
"type": "topicTerm",
"id": "1a993f8f-ee53-4048-ba7a-94e301547386",
"meta": {
"drupal_internal__target_id": 2
}
},
{
"type": "topicTerm",
"id": "eb28b54d-507e-4f20-b7e0-6611507b5ade",
"meta": {
"drupal_internal__target_id": 22
}
},
{
"type": "topicTerm",
"id": "b2773502-f43b-444d-85d1-f1b8e4eaafdf",
"meta": {
"drupal_internal__target_id": 10
}
},
{
"type": "topicTerm",
"id": "8c44c30c-7ffe-44a0-bbfb-7642ac8d3b3c",
"meta": {
"drupal_internal__target_id": 17
}
}
],
"links": {
"related": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/topic?resourceVersion=id%3A261"
},
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5\/relationships\/topic?resourceVersion=id%3A261"
}
}
}
}
},
"links": {
"self": {
"href": "https:\/\/backend.inclind.com\/jsonapi\/articles\/e1c0399a-201a-4e67-98da-edfc20ef96b5?resourceVersion=id%3A261"
}
}
}