Skip to content

jedifunk/coa-gatsby

Repository files navigation

COA theme Gatsby port

WP + WPGraphQL + Gatsby

This is a personal project. I am porting an existing custom Wordpress theme to Gatsby.

Tools in use:

Create config file

const Config = {
  source: {
    protocol: 'https',
    wpUrl: 'yourdomain.com',
  },
  search: {
      appID: APP_ID,
      adminKey: ADMIN_KEY,
      searchKey: SEARCH_KEY,
  },
  social: {
      twitterHandle: TWITTER_HANDLE,
  }
}

Config.source.url = Config.source.protocol + '://' + Config.source.wpUrl;

module.exports = Config

WP functions file addition

This function creates the custom WPGraphQL connection between CoreGalleryBlock and MediaItem, adding the option to query for image metadata on the block itself. Using this to bring in image EXIF data to the Lightbox.

function coa_register_graphql_connection() {
  
  register_graphql_connection( [
		'fromType' => 'CoreGalleryBlock',
    'toType' => 'MediaItem',
    'fromFieldName' => 'galleryImages',
    'resolve' => function( $gallery_block, $args, $context, $info ) {
			$image_ids = ! empty($gallery_block['attributes']['ids']) ? $gallery_block['attributes']['ids'] : null;
      $resolver   = new \WPGraphQL\Data\Connection\PostObjectConnectionResolver( $source, $args, $context, $info, 'attachment' );
      $resolver->setQueryArg( 'post__in', $image_ids ); // This sets the WP_Query to query just these ids    
			$connection = $resolver->get_connection();
			return $connection;
    },
    'resolveNode' => function( $id, $args, $context, $info ) {
      return \WPGraphQL\Data\DataSource::resolve_post_object( $id, $context );
    }
  ] );
}

add_action( 'graphql_register_types', 'coa_register_graphql_connection' );

TODO

  • Add body classes
  • Add User archive
  • Homepage hero
  • Homepage layout
  • Move images to CDN
  • Create Gatsby component for each Gutenberg block type
  • [ ] Use Gatsby Image for responsiveness Unnecessary since using CDN
  • Lazy load images, maybe(?)
  • Gallery popup
  • EXIF data to lightbox images
  • Add social share
  • FontAwesome integration
  • Add page transitions
  • Add Yoast SEO via WPGraphQL
  • Integrate analytics
  • 404 page
  • Featured Image refactor to not query for every post (if possible)
  • Find way to bring in homepage hero better, currently looking for exact image
  • Adjust WP theme to blank
  • Test Algolia once ready to deploy, can't seem to test from localhost.

About

WP + WPGraphQL + Gatsby

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published