{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/options-prop/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How to customise a Section, Block or Field using options","slug":"options-prop","updated":"2023-02-14T00:00:00.000Z","category":"how-to-content","ingress":"In this guide, we will customise a Section component on the landing page using the options prop.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"introduction","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#introduction","ariaLabel":"introduction permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Introduction"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Version\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/releases/tag/v10.0.0","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"10.0.0"}]},{"type":"text","value":"\nof Flex Templates for Web (FTW) renders content pages using data from\nPages, the Flex headless content management system. This how-to article\nassumes a basic understanding of the Pages feature and how FTW renders\ncontent pages using the PageBuilder. We suggest reading the following\narticles before proceeding:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pages introduction"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pages reference"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"How FTW renders content pages using the PageBuilder"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This guide will introduce you to best practices for styling and\ncustomising components used by the PageBuilder."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"customising-components","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customising-components","ariaLabel":"customising components permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Customising components"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW uses a component called the PageBuilder to render content pages. You\nwill likely want to change the style and structure of content pages, and\nthe PageBuilder is where you should make those changes. It is good to\nnote that changes to the PageBuilder will affect how "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"all content\npages"}]},{"type":"text","value":" are rendered. If you only want to customise a specific section\non an individual content page, you need to take a different approach."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let’s lay out a more concrete example of the scenario outlined in the\nprevious paragraph: say you want to define that all Sections on the\nlanding page that use the template section-article, the title and\ningress should be aligned left, and on all other pages they should\nadhere to the default styling, i.e. be centred:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/81c0a11208d30e35441938febee3150c/1ba14/example1.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 23.270440251572328%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAABIUlEQVQY00WQS0/CQBSF+3cRCTEGlEctbV0Y0L3EjX/FhVsoyqbFRBdQAgkRps8ptJ+ZSdTFl3Mz595zM9eYTia8zWbMFJ6HN53+43ko3/d9yrKkqirN6XQiyzLyPEdK+feueox6rYZlO7iuy63jcN1uc9VqaVU06nXuh0M9HEURSZKw3W55n8/xgwVBEJCmqfaUGudnZwwvmrjdDqZpctPvY/Z6mn63S7PR4GE00oG73Y4wDFmv1yy/Pll+LFgtl6zCkM1mo0MNFfJ42eSu28Ea2NiWhW0NtDoDG8s0eRqPKYpCfzXPMmRZEb6+4D+Pifff5FJyPB41RiElkSzYRzFCCPYHwUEIDgeBEJG+kQr7vZMaTrOMJEmJo1jXCrVM+T/YhlHyGIRYOAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/81c0a11208d30e35441938febee3150c/82e29/example1.webp 159w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/ef33f/example1.webp 318w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/f1837/example1.webp 635w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/29549/example1.webp 953w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/c5420/example1.webp 1270w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/bfe71/example1.webp 1846w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/81c0a11208d30e35441938febee3150c/8b9b5/example1.png 159w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/fa108/example1.png 318w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/53fb6/example1.png 635w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/5a426/example1.png 953w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/91155/example1.png 1270w","/docs/legacy/static/81c0a11208d30e35441938febee3150c/1ba14/example1.png 1846w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/81c0a11208d30e35441938febee3150c/53fb6/example1.png","alt":"e","title":"e","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Making these changes directly to the SectionArticle component will\nresult in changes across all content pages. Let’s demonstrate. We will\ncreate a new rule set in SectionArticle.module.css that does not apply\nany centering:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".title"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"max-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 30ch"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ingress"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"max-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 65ch"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, let’s use these rulesets in the SectionArticle.js component:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"<SectionContainer\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    id={sectionId}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    className={className}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    rootClassName={rootClassName}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    background={background}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    options={fieldOptions}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  >\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    {hasHeaderFields ? (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"      <header className={defaultClasses.sectionDetails}>\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"        <Field data={title} className={defaultClasses.title} options={fieldOptions} />\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"        <Field data={title} className={css.title} options={fieldOptions} />\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"        <Field data={ingress} className={defaultClasses.ingress} options={fieldOptions} />\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"        <Field data={ingress} className={css.ingress} options={fieldOptions} />"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We’ll now see that the rule set is applied to all Sections using the\nsection-article template, on all content pages:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/584ea/left-aligned.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 24.528301886792455%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAABHElEQVQY012Qb0vCUBTG/az1Sghk9MI/M7PeyGraC3vtQMS+QPVFVhg4jYQZEg5dc3/u3e4vNjWiCz8uzzmH5/Cc0mq1wplOmc9mzP6R1xzHwXVd0jQlSZICKSUohVKK41MHXRoNh2iaRscwMDod2q0Wer1Os9HgQtfRKhXu+302mw22bTOZvPGxWBAKQbDb8e37+L5PEATF0pJlWVROT7g512jqOnqtRuNAvVrlrFymZ5qEYcjnckmeaOm6LF5s3Pc5a8/D8zy22+3e8PHpmburNoPrS0zTpPuHXrfLrWHwMB6TZtk+spAE3prpaMDXq41UIIQozArDPHeqYCckURQRhgeiqNBZlv3eKv/jOCZOEuJMEQtZzOb62P8Bey9YQ/fc0SYAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/82e29/left-aligned.webp 159w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/ef33f/left-aligned.webp 318w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/f1837/left-aligned.webp 635w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/29549/left-aligned.webp 953w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/c5420/left-aligned.webp 1270w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/e1e67/left-aligned.webp 2204w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/8b9b5/left-aligned.png 159w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/fa108/left-aligned.png 318w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/53fb6/left-aligned.png 635w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/5a426/left-aligned.png 953w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/91155/left-aligned.png 1270w","/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/584ea/left-aligned.png 2204w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/402bb67a8366a1bf8ecfa9656ff739f0/53fb6/left-aligned.png","alt":"Two content pages with content aligned left","title":"Two content pages with content aligned left","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, our goal is to be able to apply the styling to a single content\npage. Let’s see how that happens in the next chapter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"using-the-options-prop","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#using-the-options-prop","ariaLabel":"using the options prop permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Using the options prop"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The best way to accomplish this is by using the options prop to override\nthe section on a specific page. Options is a prop that can be passed to\nthe pageBuilder component. The prop takes an object used to map either a\nSection, Block or Field component to a custom component."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's first create a new component based on the original SectionArticle\ncomponent. The easiest way to do this is to duplicate the SectionArticle\ndirectory. Let’s rename the duplicate as “SectionArticleAlignLeft”:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 560px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/e3166/vscode-sc.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 32.075471698113205%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABV0lEQVQY0z3MS2/aQBSGYW/Crko2VboJGTPjsQGbi8HmYohNTIJUFUGktFKaCyhKQldVd82i7SY//K1mirp4dM6Rvu84ytMopdE6oBFGdGdD2pOETp7avVsM6J6P8MOmzXnax/P+sV3LJ4hCOx1f1rBUjbAekMYxi7Lk/CynyCaUec68mJENh4hqFekKpBAoV+Arabta1lBCoKWLc5iuMY7SNcfZNe7lA9H6G+FqR/Dpieby2d6N5RPy4h53focobzkpbnjXX+27V3yYfOZo9AXnYLzBqIw3HBaPnCy/k25+0bl9pXXzk9bXV7sPtr85270xfXkj3f5BrH7gDO44yLZUsi3vL3ZUih1Ord7CkPU29XafeJRTLJZM5x//G88WVjItqerQOvVD5L5rCD+y0/GUxJMSrRSNICBqNhmmKf1eTD+OSXo9a5AkxJ0OJm+yhulZ5sf+/gt6M8FHeqHIdAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/82e29/vscode-sc.webp 159w","/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/ef33f/vscode-sc.webp 318w","/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/a27fc/vscode-sc.webp 560w"],"sizes":"(max-width: 560px) 100vw, 560px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/8b9b5/vscode-sc.png 159w","/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/fa108/vscode-sc.png 318w","/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/e3166/vscode-sc.png 560w"],"sizes":"(max-width: 560px) 100vw, 560px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/c6ec3767af58a17a2ca3725acbd62ed1/e3166/vscode-sc.png","alt":"Screenshot depicting new file","title":"Screenshot depicting new file","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Remember to also rename all files within the new directory from\nSectionArticle to SectionArticleAlignLeft:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 558px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/a0cd3/vscode-sc2.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 30.817610062893085%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABYklEQVQY01WMy2/TQBgHrebAMRK9QEkCYb1er5/xI+vEjcujAUUqfQpRVbQUJYFeEAeOSLRF/cOnyqYcOPyk3fk047Te/KA1WdBqljx6fcXT/V9kX/8Sfv5D8uWG8Pya9PKW5PKWcnFHdHFNfHGDPP3NxoO3MVmyOftpfac9+kh7eGi3OTqhPz0jP/5OtD8nOVgQfZgT7c1JD5YUJ1dkR98sF+/OaQ+PHnbIk+YTj6tjHM8VeK6LFIJAK7ZHisAklLOaZJKji5jeVodep0d3q0P3Wde+X3SfI/sv8cTaD7MIpTwcV3qsJlyJ72uMCYhNRlqX/y0Z5WQ7hqwxxCYnHZdEJkMFGldIdBIhPbUOylXUlWjtU1UBcZVZedCYdXC7ZNAM7b+Y1mtumUGFGtEXBIMYTykc+S8oXPwgJBpPrTx8P6Gc1hS7Y4rd2obMrKHa27FsdcteVeRvxyitCfMUz/e5B8YHwtk7qlYvAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/82e29/vscode-sc2.webp 159w","/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/ef33f/vscode-sc2.webp 318w","/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/7d2db/vscode-sc2.webp 558w"],"sizes":"(max-width: 558px) 100vw, 558px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/8b9b5/vscode-sc2.png 159w","/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/fa108/vscode-sc2.png 318w","/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/a0cd3/vscode-sc2.png 558w"],"sizes":"(max-width: 558px) 100vw, 558px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/0719495b5f5a47051db12632e2f4e0f4/a0cd3/vscode-sc2.png","alt":"Screenshot depicting new file","title":"Screenshot depicting new file","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We can now reapply the changes we made in the previous chapter to our\nnew component. First, create a new rule set in\nSectionArticleAlignLeft.module.css:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".title"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"max-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 30ch"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ingress"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"max-width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 65ch"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And change the SectionArticleAlignLeft.js file to use the new rule set\nwe just created:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"<SectionContainer\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    id={sectionId}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    className={className}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    rootClassName={rootClassName}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    background={background}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    options={fieldOptions}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  >\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    {hasHeaderFields ? (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"      <header className={defaultClasses.sectionDetails}>\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"        <Field data={title} className={defaultClasses.title} options={fieldOptions} />\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"        <Field data={title} className={css.title} options={fieldOptions} />\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"        <Field data={ingress} className={defaultClasses.ingress} options={fieldOptions} />\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"        <Field data={ingress} className={css.ingress} options={fieldOptions} />"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We won't be able to see this change live yet. First, we will have to\nimport the new component and use the options prop in LandingPage.js:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" SectionArticleAlignLeft "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../../containers/PageBuilder/SectionBuilder/SectionArticleAlignLeft'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We can then define an object in LandingPage.js that will be passed on as\nthe options prop:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" sectionOverrides "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"article"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"component"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" SectionArticleAlignLeft "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's pass that object to the PageBuilder component in LandingPage.js as\nthe options prop:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"return (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  <PageBuilder\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    pageAssetsData={pageAssetsData?.[camelize(ASSET_NAME)]?.data}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    title={schemaTitle}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    description={schemaDescription}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    schema={pageSchemaForSEO}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    contentType={openGraphContentType}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    inProgress={inProgress}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"    options={{sectionComponents: sectionOverrides}}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    fallbackPage={\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"      <FallbackPage\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"        title={schemaTitle}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"        description={schemaDescription}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"        schema={pageSchemaForSEO}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"        contentType={openGraphContentType}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"      />\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    }"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When we go to the landing page, we will see that the FTW uses the new\ncomponent we created to render the section article. This component will\nonly render section articles on the landing page. That is evident when\nwe navigate to any other content page: we will see that titles and\ncontent are centred."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"overriding-blocks-and-fields","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#overriding-blocks-and-fields","ariaLabel":"overriding blocks and fields permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Overriding Blocks and Fields"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Similar overrides can be made for Blocks and Fields too. For example, if\nwe had wanted to override a Block instead of a Section, we could have\nused the following mapping:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" blockOverrides "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'default-block'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"component"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CustomBlock "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And passed it as an options prop:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"  options"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"blockComponents"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" blockOverrides"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Field overrides can be made similarly. Overriding the H1 tag would be\ndefined using the following structure:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" fieldOverrides "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"heading1"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"component"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CustomH1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"pickValidProps"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" exposeContentAsChildren"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Overriding a Field requires passing a function to pickValidProps to\nensure data validation. You can import the exposeContentAsChildren\nfunction from Field.helpers:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" exposeContentAsChildren "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../PageBuilder/Field/Field.helpers'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this case, we would define our custom heading component in the\nHeading.js file:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" CustomH1 "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" React"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"forwardRef"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"props"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" ref"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"rootClassName"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" rootClass"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"otherProps "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" props"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"Heading\n      rootClassName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"rootClass "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"||"}]},{"type":"text","value":" css"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"h1custom"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"as"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"||"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'h1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      tagRef"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"ref"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n      "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"otherProps"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nCustomH1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"displayName "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'CustomH1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nCustomH1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"defaultProps "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" defaultPropsHeading"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\nCustomH1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"propTypes "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" propTypesHeading"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And export it in the PageBuilder/Primitives/Heading/index.js file:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" CustomH1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"H1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"H2"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"H3"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"H4"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"H5"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"H6"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./Heading'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, we’d pass it on to the options prop in LandingPage.js:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"options"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"fieldComponents"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" fieldOverrides"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For a list of which Fields can be overridden, see\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/src/containers/PageBuilder/Field/Field.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Field.js"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Introduction","depth":2},{"value":"Customising components","depth":2},{"value":"Using the options prop","depth":2},{"value":"Overriding Blocks and Fields","depth":2}]}},"pageContext":{"slug":"options-prop","category":"how-to-content"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}