Wordpress source plugin and example site #1321

sebastienfi · 2017-07-01T15:02:15Z

This is a first PR for a gatsby-source-plugin and using-wordpress example.

The source plugin is published on NPM --> https://www.npmjs.com/package/gatsby-source-wordpress

The example site uses :

Styled-components
Wordpress.com as a source using gatsby-source-wordpress
Hedron as a gridsystem

I tried to make the site the ugliest on the internet as a praise to 1980's internet. I hope I succeeded.

KyleAMathews · 2017-07-01T15:06:25Z

Deploy preview failed.

Built with commit 4ac59b9

https://app.netlify.com/sites/using-contentful/deploys/59592934a700c46a8e33aa50

gatsbybot · 2017-07-01T15:07:48Z

Deploy preview ready!

Built with commit 4ac59b9

https://deploy-preview-1321--using-drupal.netlify.com

gatsbybot · 2017-07-01T15:08:17Z

Deploy preview ready!

Built with commit 4ac59b9

https://deploy-preview-1321--gatsbyjs.netlify.com

gatsbybot · 2017-07-01T15:09:06Z

Deploy preview ready!

Built with commit 4ac59b9

https://deploy-preview-1321--gatsbygram.netlify.com

KyleAMathews

Looking great! Really excited to get this in.

It'd be great to get some testing going for this. I've been playing a lot with design/testing strategies for source plugins so let's chat later.

You should run from the base of the repo npm run format to fix up code with Prettier. I noticed your clone of the git repo is a bit out of date so you'll probably want to update to the latest 1.0 code so you're formatting your code with the latest Prettier.

KyleAMathews · 2017-07-01T16:23:21Z

examples/using-wordpress/.eslintrc

@@ -0,0 +1,27 @@
+{


Kill this file — the gatsby repo has its own .eslintrc file that everything should follow

KyleAMathews · 2017-07-01T16:24:06Z

examples/using-wordpress/.gitignore

@@ -0,0 +1,47 @@
+# Logs


This probably isn't necessary either

KyleAMathews · 2017-07-01T16:24:26Z

examples/using-wordpress/.travis.yml

@@ -0,0 +1,39 @@
+# back to language cpp to try to bypass osx node failure


not necessary

KyleAMathews · 2017-07-01T16:24:52Z

examples/using-wordpress/config.toml

@@ -0,0 +1 @@
+siteTitle="Sample site"


config.toml is just for Gatsby v0. We don't use it any more in Gatsby v1

KyleAMathews · 2017-07-01T16:25:35Z

examples/using-wordpress/package.json

+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-sharp": "next",
+    "gatsby-source-wordpress": "next",
+    "graphql": "^0.10.3",


this is supplied by gatsby

KyleAMathews · 2017-07-01T16:25:49Z

examples/using-wordpress/package.json

+    "gatsby-source-wordpress": "next",
+    "graphql": "^0.10.3",
+    "hedron": "^0.7.1",
+    "highlight": "^0.2.4",


looks like you're not using this?

KyleAMathews · 2017-07-01T16:26:35Z

examples/using-wordpress/package.json

+    "json-stringify-safe": "^5.0.1",
+    "lodash": "^4.16.4",
+    "qs": "^6.4.0",
+    "react-helmet": "^5.1.3",


install gatsby-plugin-react-helmet instead — that then handles the server rendering for you. Do the same with react-plugin-styled-components

done.
#1341

KyleAMathews · 2017-07-01T16:27:44Z

examples/using-wordpress/src/html.js

+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          {this.props.headComponents}
+          {css}
+          {head.title.toComponent()}


you can remove these after gatsby-plugin-react-helmet is installed

KyleAMathews · 2017-07-01T16:30:46Z

packages/gatsby-source-wordpress/gatsby-node.js

@@ -0,0 +1,700 @@
+'use strict';


This shouldn't be committed — related to the needed changes in .gitignore/.npmignore

KyleAMathews · 2017-07-01T16:31:49Z

packages/gatsby-source-wordpress/src/gatsby-node.js

+let siteURL
+
+
+// ======== Main Void ==========


what's "Main Void" mean?

It means it's the entry point.

…astienfi/gatsby into topics/wordpress-source-site

…ything should follow

… unused deps

0x80 · 2017-07-02T15:53:19Z

@sebastienfi looks like the plugin source is not publicly available?

sebastienfi · 2017-07-02T17:15:09Z

@0x80 : I don't know how to check if the code is public... The forked repo is public. What happens when you try to see the latest commit ? 4ac59b9

0x80 · 2017-07-02T18:27:41Z

@sebastienfi Since you published it on npm from your username, I assumed that you would have this code in an isolated public repo. I see now that you forked Gatsby and coded the plugin as a package.

If I understand this correctly I think you shouldn't have published the source plugin on npm yourself, because it will be part of the Gatsby repo and all packages should be published from there. Lerna manages the packages for Gatsby because it is a monorepo.

donavon · 2017-07-03T13:46:41Z

examples/using-wordpress/gatsby-node.js

+      }
+    `
+    )
+      .then(result => {


you could destructure (in many places)

.then(({ errors, data }) => {

donavon · 2017-07-03T14:07:01Z

examples/using-wordpress/src/components/styled/index.js

+  ${props => PR.colorProps(props)}
+  ${PR.marginProps}
+`;
+export const H7 = styled.h6`


there is no H7. was this deliberate?

donavon · 2017-07-03T14:21:44Z

examples/using-wordpress/src/components/styled/index.js

+/* Global Tags */
+export const H1 = styled.h1`
+  ${props => PR.ftzProps(props, ftz.h1)}
+  ${props => PR.colorProps(props)}


For your consideration...

This could be DRYed up a lot. for example, something like this (untested) maybe?

const styleHeader level => { const hx = `h${level}`; return styled[hx]` ${props => PR.ftzProps(props, ftz[hx])} ${props => PR.colorProps(props)} ${PR.marginProps} `; };

then

const [H1, H2, H3, H4, H5, H6] = [1, 2, 3, 4, 5, 6].map(styleHeader);

donavon · 2017-07-03T14:26:44Z

examples/using-wordpress/src/layouts/index.js

+}
+
+DefaultLayout.propTypes = {
+  location: PropTypes.object.isRequired,


You specify location as required, but then you never use it.

donavon · 2017-07-03T14:30:57Z

examples/using-wordpress/src/layouts/index.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+class DefaultLayout extends React.Component {


SFC?

const DefaultLayout = ({ children }) => ( <div>{children}</div> );

Also can you get away without the div wrapper by returning React.Children.only(children)?

donavon · 2017-07-03T14:46:08Z

examples/using-wordpress/src/utils/fontFaceHelper.js

+      font-weight: ${fontWeight};
+    }
+  `
+}


I believe that you can avoid string concatenation by doing this:

export function fontFaceHelper(name, src, fontWeight = 'normal', fontStyle = 'normal') { cont woff = `../assets/fonts/${src}.woff`; cont woff2 = `../assets/fonts/${src}.woff2`; return ` @font-face{ font-family: "${name}"; src: url(${require(woff)}) format("woff"), url(${require(woff2)}#${name}) format("woff2"); font-style: ${fontStyle}; font-weight: ${fontWeight}; } `; }

KyleAMathews · 2017-07-03T15:59:20Z

packages/gatsby-source-wordpress/src/output-color.js

@@ -0,0 +1,47 @@
+/**


BTW, chalk is a very popular way of adding color in node that you could use instead of your own module https://www.npmjs.com/package/chalk

KyleAMathews · 2017-07-06T05:47:27Z

hey! Let's get this in. Really looking forward to the army of Wordpress/Gatsby clones that'll be emerging soon :-D

whmountains · 2017-07-06T12:18:21Z

Wow, that came just in time. I have a client that lined up that already has a Wordpress website, so I'll probably be using this.

cr101 · 2017-07-15T03:07:59Z

@sebastienfi is there any chance the example in using-wordpress could be expanded to fetch WordPress posts and authors based on a keyword search. For example, as you type display all posts and authors that match the search term "keyword".

corysimmons · 2017-08-14T07:24:25Z

Can we get some more docs on WordPress/Gatsby usage?

I have a fresh install of WP on a remote server, and a fresh install of Gatsby locally. I installed the npm pkgs (Bluebird, etc.) and copypasted gatsby-node.js from this PR to ./gatsby-node.js in my Gatsby project.

I get GraphQLError: Cannot query field "allWordpressPage" on type "RootQueryType". Did you mean "allSitePage"?

A really barebones example with a fresh WP install on localhost or a remote server would do wonders for my self-esteem.

sebastienfi · 2017-08-16T08:10:14Z

@cr101 yes you can do that.
PS : Sorry I bumped into your message so late!

cr101 · 2017-08-16T08:25:09Z

@sebastienfi Any idea if Advanced Custom Fields (ACF) is entirely WP REST API ready? If so, does ACF expose the endpoints for custom post types, taxonomies and custom fields in the REST API? Is there a plugin required to expose the endpoints?
Have you used ACF? If so, does it work well with Gatsby?

I've been evaluating PODS which is an awesome awesome plugin but unfortunately PODS doesn't currently have repeating groups fields which is a shame because it's entirely REST API ready.
Toolset Types is not REST API ready at all so I'm hoping that ACF is REST API ready.

sebastienfi · 2017-08-16T08:33:10Z

@cr101 I'm using ACF Pro mainly so the plugin is compatible with it on all aspects. Read the doc of the source plugin and search for ACF you'll find plenty of intel.

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress

ACF will work with the other plugin mentioned in the docs that exposes ACF field to endpoints. It will work with custom post types and stuff.

cr101 · 2017-08-16T08:35:25Z

@sebastienfi Is ACF PRO entirely REST API ready or do I need a plugin to expose the endpoints?
UPDATE:
oh, I found it - acf-to-rest-api

sebastienfi added 3 commits July 1, 2017 16:49

First commit of gatsby source wordpress and example site

4a0163f

Update config.toml

b990e73

Update gatsby-config.js

5d6972e

KyleAMathews suggested changes Jul 1, 2017

View reviewed changes

sebastienfi added 9 commits July 2, 2017 10:51

Functions docs

3566473

Merge branch 'topics/wordpress-source-site' of https://github.com/seb…

93c0e23

…astienfi/gatsby into topics/wordpress-source-site

Removed eslint : the gatsby repo has its own .eslintrc file that ever…

6402ac6

…ything should follow

updated gitignore

39ea544

removed unecessary files

76cf7d0

added ignore on transpiled files

6a867d0

gatsby-plugin-react-helmet & gatsby-plugin-styled-components & remove…

c981849

… unused deps

Removed unused dependencies

38e72b7

Remove transpiled files

10a31e7

sebastienfi added 4 commits July 2, 2017 19:06

Minor linted comma missing

01ae606

Version update

5618dea

Removed unwanted fields in GraphQL queries

0dd22d2

Rewrite of the module's core for more simplicity

4ac59b9

donavon reviewed Jul 3, 2017

View reviewed changes

examples/using-wordpress/gatsby-node.js

}

`

)

.then(result => {

Copy link

donavon Jul 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could destructure (in many places)

.then(({ errors, data }) => {

donavon reviewed Jul 3, 2017

View reviewed changes

KyleAMathews reviewed Jul 3, 2017

View reviewed changes

KyleAMathews merged commit 0f8c626 into gatsbyjs:1.0 Jul 6, 2017

corysimmons mentioned this pull request Aug 14, 2017

Bugfix : gatsby-source-wordpress giving invalid node names to GraphQL #1778

Merged

3 tasks

		@@ -0,0 +1,39 @@
		# back to language cpp to try to bypass osx node failure

Wordpress source plugin and example site #1321

Wordpress source plugin and example site #1321

Conversation

sebastienfi commented Jul 1, 2017

KyleAMathews commented Jul 1, 2017 • edited Loading

gatsbybot commented Jul 1, 2017 • edited Loading

gatsbybot commented Jul 1, 2017 • edited Loading

gatsbybot commented Jul 1, 2017 • edited Loading

KyleAMathews left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0x80 commented Jul 2, 2017

sebastienfi commented Jul 2, 2017

0x80 commented Jul 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KyleAMathews commented Jul 6, 2017

whmountains commented Jul 6, 2017

cr101 commented Jul 15, 2017 • edited Loading

corysimmons commented Aug 14, 2017

sebastienfi commented Aug 16, 2017

cr101 commented Aug 16, 2017

sebastienfi commented Aug 16, 2017 • edited Loading

cr101 commented Aug 16, 2017 • edited Loading

KyleAMathews commented Jul 1, 2017 •

edited

Loading

gatsbybot commented Jul 1, 2017 •

edited

Loading

gatsbybot commented Jul 1, 2017 •

edited

Loading

gatsbybot commented Jul 1, 2017 •

edited

Loading

cr101 commented Jul 15, 2017 •

edited

Loading

sebastienfi commented Aug 16, 2017 •

edited

Loading

cr101 commented Aug 16, 2017 •

edited

Loading