DEV Community: Elliott W

Gatsby Wordpress ACF Flexible Content

Elliott W — Sun, 14 Feb 2021 06:46:39 +0000

Let me tell you a story about some poor sod (definitely not me) who is excited about gatsby + wordpress but is lead astray by dark forces out of his control.

Let's say you want to create a page template where pages can be made out of components defined in your flexible content field. You are trying to get the data for all these components in src/templates/page.js:

export const query = graphql`
  query PageQuery($id: String!) {
    wpPage(id: {eq: $id}) {
      title
      page_components {
        components {
          __typename
          ... on WpPage_PageComponents_Components_BannerOne {
            title
            button {
              text
              link
            }
            # More stuff
          }
          ... on WpPage_PageComponents_Components_BannerTwo {
            title
            image
            # More stuff
          }
        }
      }
    }
  }
`

It would be against the Single-responsibility principle in the SOLID principles to have the component queries as part of the page query, so you turn these component queries into fragments:

For example, in src/components/page/BannerOne/BannerOne.js:

export const query = graphql`
  fragment BannerOneFragment on WpPage_PageComponents_Components_BannerOne {
    title
    button {
      text
      link
    }
    # More stuff
  }
`

And now your page query in src/templates/page.js looks like:

export const query = graphql`
  query PageQuery($id: String!) {
    wpPage(id: {eq: $id}) {
      title
      page_components {
        components {
          __typename
          ... on WpPage_PageComponents_Components_BannerOne {
            ...BannerOneFragment
          }
          ... on WpPage_PageComponents_Components_BannerTwo {
            ...BannerTwoFragment
          }
        }
      }
    }
  }
`

Great! Things are looking better already. However we still haven't completely separated concerns, since when we add a new component, we have to remember to add its fragment to the page query. Not the end of the world, but not ideal either.

You notice the graphql query is a template literal, so maybe you can dynamically generate the components query? Assuming you could get the componentNames by reading all the component file names from your file system, it would look something like:

export const query = graphql`
  query PageQuery($id: String!) {
    wpPage(id: {eq: $id}) {
      title
      page_components {
        components {
          __typename
          ${componentNames.map(componentName => {
            return `
              ... on WpPage_PageComponents_Components_${componentName} {
                ...${componentName}Fragment
              }
            `
          }).join()}
        }
      }
    }
  }
`

Ah! An error! What you are trying to do is extremely illegal! So you put up with adding new fragments to the page query every time you add a new component. But then you decide: wouldn't it be great to build other post types out of components too?

Now it starts to get messy. Not only do you have to duplicate the fragments in the page query (src/templates/page.js):

export const query = graphql`
  query PageQuery($id: String!) {
    wpPage(id: {eq: $id}) {
      title
      page_components {
        components {
          __typename
          ... on WpPage_PageComponents_Components_BannerOne {
            ...BannerOnePageFragment
          }
          ... on WpPage_PageComponents_Components_BannerTwo {
            ...BannerTwoPageFragment
          }
          ... on WpProject_PageComponents_Components_BannerOne {
            ...BannerOneProjectFragment
          }
          ... on WpProject_PageComponents_Components_BannerTwo {
            ...BannerTwoProjectFragment
          }
        }
      }
    }
  }
`

You also have to duplicate the fragments in the components too (src/components/page/BannerOne/BannerOne.js):

export const query = graphql`
  fragment BannerOnePageFragment on WpPage_PageComponents_Components_BannerOne {
    title
    button {
      text
      link
    }
    # More stuff
  }
  fragment BannerOneProjectFragment on WpProject_PageComponents_Components_BannerOne {
    title
    button {
      text
      link
    }
    # More stuff
  }
`

And you can imagine the pain when trying to add more post types...

Several weeks later

Then God Himself (and by God I mean Henrik Wirth) comes to you in a dream and tells you that all these problems can be fixed by generating the template file (src/templates/page.js) yourself before Gatsby gets its filthy hands on it!

This way you can dynamically generate the page query like we wanted to earlier. We can also create separate template files for each of the different post types. Fantastic! It would look something like this in gatsby-node.js:

postTypes.forEach(postType => {
  createTemplate(postType)
})
pages.forEach(page => {
    const template = getTemplate(page.postType)
  gatsbyUtilities.actions.createPage({
    path: page.uri,
    component: template,
    context: {
      id: page.id,
    },
  })
})

The createTemplate function would create a template file for every post type, e.g. .cache/page-templates/page.js and .cache/page-templates/project.js, and the queries in each of those files would be automatically populated with all the component fragments.

But wait, we can optimize even further!

Right now, every template file imports every component that exists, which bloats pages that are not using every single component. What if we generated template files for every single page, rather than just for every post type?

This way we import only the components that a page needs.

If you'd like to see how this works in practice, please visit
gatsby-wp-acf-starter for a rigorously commented starter project.

How to use Material Web Components with Contact Form 7

Elliott W — Thu, 10 Dec 2020 06:55:06 +0000

Goal

Replace the default fields that Contact Form 7 (CF7) outputs with our desired Material Web Component (MWC) components.

Requirements

A module bundler such as webpack or rollup.

Method

In your plugin or theme, create the following folder structure:

mwc
├── mwc.php
├── mwc.js
├── _mwc.scss
└── modules
    ├── text.php
    └── textarea.php

You should copy any modules you want from wp-content/plugins/contact-form-7/modules. Here I've just used text and textarea.

As early as possible in the wordpress lifecycle require your mwc/mwc.php file. Then in the file, require all your modules like so:

require_once __DIR__ . '/modules/text.php';
require_once __DIR__ . '/modules/textarea.php';

In each of your modules/X.php files, where X is the module name:

Delete everything after the wpcf7_X_form_tag_handler function (we don't need to change validation or the tag generator menu)

Step	Search for	Replace with
1	`wpcf7_add_form_tag_X`	`mwc_wpcf7_add_form_tag_X`
2	`wpcf7_X_form_tag_handler`	`mwc_wpcf7_X_form_tag_handler`
3	`$atts['placeholder'] = $value;`	`$atts['label'] = $value;`
4	`input`	`mwc-textfield` (or whatever your component is)
5	`%3$s`	`<input type="hidden" name="' . $tag->name . '" />%3$s`

3. At the top of the file add:

remove_action('wpcf7_init', 'wpcf7_add_form_tag_X');

At this point we should be able to make a CF7 template such as:

[text* full-name placeholder "Your Name"]
[email* email placeholder "Email address"]
[tel phone placeholder "Contact number (optional)"]
[textarea* message x4 placeholder "Your message"]
[submit "Submit]

However the fields won't be rendering because we haven't imported the web components yet. To fix that, install your desired components:

npm install @material/mwc-textfield
npm install @material/mwc-textarea

And then in your mwc/mwc.js file, add:

import '@material/mwc-textfield'
import '@material/mwc-textarea'

export default () => {
  const form = document.querySelector('.wpcf7-form')
  if (form) {
    form.querySelectorAll('.wpcf7-form-control-wrap').forEach(formControlWrap => {
      const formControl = formControlWrap.querySelector('.wpcf7-form-control')
      // If is web component
      if (formControl.tagName.includes('-')) {
        const input = formControlWrap.querySelector('input[type="hidden"]')
        // Make sure the hidden input value stays in sync with the mwc value
        formControl.addEventListener('change', () => {
          input.value = formControl.value
        })
      }
    })
  }
}

The reason we've had to add an extra hidden input and keep its value in sync with our mwc component value is because currently there is no support for web components to submit their values in forms. This is a very hacky solution, but does the job.

Now in your index.js file:

import MWC from 'mwc/mwc'

document.addEventListener("DOMContentLoaded", () => {
  MWC()
})

And you should have working Material Web Components with Contact Form 7! :D

If you want to style your components, see the themeing guide.

Unfortunately I haven't tested this on other mwc components, so please let us know in the comments what other components you implemented and any gotchas that you had to work around.

Enjoy!