{"id":1365,"date":"2018-09-22T14:55:11","date_gmt":"2018-09-22T12:55:11","guid":{"rendered":"https:\/\/felix-arntz.me\/?p=1365"},"modified":"2025-02-11T08:12:23","modified_gmt":"2025-02-11T16:12:23","slug":"building-a-reusable-gutenberg-section-block","status":"publish","type":"post","link":"https:\/\/felix-arntz.me\/blog\/building-a-reusable-gutenberg-section-block\/","title":{"rendered":"Building a Reusable Gutenberg Section Block"},"content":{"rendered":"\n

As I announced in my last post in which I explained how I updated my website using Gutenberg and AMP<\/a>, I would like to share some more details on specific implementations for some of the block types and AMP support integrations. Let’s start today with looking into building a reusable Gutenberg section block type. What do I mean by this? It is common for websites to have their main content width limited to a maximum, to keep line lengths readable on larger screens. However, sometimes you still want certain components to break out of those limitations, or you might even want to break an entire page into different full-width sections which are differentiated by their visual appearance and allow to host content that itself is then again limited in its maximum width. The homepage of my website makes heavy use of this, if you prefer to see an example, or you can also look at the following example blocks embedded in this post. (Note that you will need a screen with a resolution of at least around 1200px width in order to see the width limits to take effect.)<\/p>\n\n\n\n\n\n\n\n

\n\n

This is a full-width section with alternate color, where the inner content width is limited to the maximum site content width (which is 72rem<\/code> on my website).<\/p>\n\n<\/div><\/div>\n\n\n\n

\n\n

This is a wide-width section with highlight color, where the inner content width is limited to the typical content width (I typically use 48rem<\/code>).<\/p>\n\n\n

Of course you can put anything you like into a section, not only text – so here you see an image of a great dinner and conversations at WCEU with XWP and Multisite friends:<\/p>\n\n\n

\"Dinner<\/figure>\n\n<\/div><\/div>\n\n\n\n
\n\n

Oh, and sections can also have background images, which you can see showcased on my homepage.<\/p>\n\n<\/div><\/div>\n\n\n\n

The Section Component<\/h2>\n\n\n\n

Instead of having the block type control everything, I initially wanted to ensure to keep the section markup controlled separately from the actual block type that allows controlling them. Therefore I introduced a Section<\/code> React component that is reusable and that I could theoretically also use in other block types and even entirely separate use-cases on my website. The component is stateless and rather simple, so here is the code for it:<\/p>\n\n\n

import<\/span> classnames from<\/span> 'classnames'<\/span>;\nimport<\/span> '.\/style.scss'<\/span>;\nfunction<\/span> Section<\/span>( { colorScheme, contentMaxWidth, className, children, ...props } <\/span>) <\/span>{\n\tconst<\/span> wrapperClasses = classnames(\n\t\t'lal-blocks-section'<\/span>,\n\t\t{\n\t\t\t'is-style-alternate'<\/span>: colorScheme === 'alternate'<\/span>,\n\t\t\t'is-style-highlight'<\/span>: colorScheme === 'highlight'<\/span>,\n\t\t},\n\t\tclassName\n\t);\n\tconst<\/span> innerClasses = classnames(\n\t\t'lal-blocks-section-inner'<\/span>,\n\t\t`is-${ contentMaxWidth || 'site'<\/span> }<\/span>-width`<\/span>,\n\t);\n\treturn<\/span> (\n\t\t<div<\/span>\n\t\t\tclassName<\/span>={<\/span> wrapperClasses<\/span> }\n\t\t\t{ ...props<\/span> }\n\t\t><\/span>\n\t\t\t<div<\/span>\n\t\t\t\tclassName<\/span>={<\/span> innerClasses<\/span> }\n\t\t\t><\/span>\n\t\t\t\t{ children }\n\t\t\t<\/div<\/span>><\/span>\n\t\t<\/div<\/span>><\/span><\/span>\n\t);\n}\nexport<\/span> default<\/span> Section;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
I’ll explain the code a bit:<\/p>\n\n\n\n