Merge pull request #28 from imranhsayed/feature/elementor-support

Elementor Support 🥳 - Major update

README.md

@@ -24,6 +24,7 @@
 8. Categories, Archive Page, Custom Home Page
 9. Custom Widgets, Menus
 10. Yoast seo support
+11. Supports Post and Page building with Elementor 
 
 ## 🌐 Live Demo
 
@@ -41,8 +42,17 @@
 ## 🚀 Set Up
 
 ### Gatsby Setup
-* Rename [`.env-example`](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/site/.env-example) in site directory file to `.env` and add your WordPress SITE_URL and FRONTEND_URL in `site` directory : 
-`SITE_URL=https://example.com`
+* Rename [`.env-example`](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/site/.env-example) in site directory file to `.env` and add the following, in this `site` directory of this repo.
+
+ - Also set the `GATSBY_ELEMENTOR_SUPPORT` and `GATSBY_SIDEBAR` if you would
+ like the theme to support page and post building with elementor and sidebar. 
+
+```shell script
+GATSBY_WORDPRESS_SITE_URL=xxx
+FRONTEND_URL=xxx # Set this to http://localhost:3000 for development and your live front-end gatsby url for production.
+GATSBY_ELEMENTOR_SUPPORT=true
+GATSBY_SIDEBAR=false
+```
 
 ### WordPress Setup
 1. On your WordPress site, download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-wordpress-themes",
-  "version": "1.0.6",
+  "version": "2.0.9",
   "private": true,
   "description": "Gatsby WordPress Theme Project",
   "main": "index.js",
@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "dev": "yarn workspace site dev",
+	"dev:clean": "yarn workspace site dev:clean",
     "build": "yarn workspace site build",
 	"serve": "yarn workspace site serve",
     "clean": "yarn workspace site clean"

packages/gatsby-wordpress-theme-phoenix/README.md

@@ -66,6 +66,15 @@ module.exports = {
 };
 ``` 
 
+Also add the following to your `.env` file and set the `GATSBY_ELEMENTOR_SUPPORT` `GATSBY_SIDEBAR` if you would
+like the theme to support page and post building with elementor and sidebar.
+
+```shell script
+GATSBY_WORDPRESS_SITE_URL=xxx
+GATSBY_ELEMENTOR_SUPPORT=true
+GATSBY_SIDEBAR=false
+```
+
 ### WordPress Site Setup
 
 ### WordPress Setup
@@ -103,3 +112,9 @@ g. [wp-graphql-yoast-seo](https://github.com/imranhsayed/gatsby-wordpress-themes
 
 6. Add the ACF required data on the Home page from WordPress Dashboard. 
 7. If isn't already set your site title, description and logo from WordPress customizer.
+
+## Styles used by elementor
+Check in the source
+
+* id='elementor-icons-css'
+* id='elementor-common-css'

packages/gatsby-wordpress-theme-phoenix/create-pages/archive.js

@@ -21,6 +21,8 @@ query GET_POSTS {
           edges {
             node {
               id
+              databaseId
+              bodyClasses
               title
               uri
               date

packages/gatsby-wordpress-theme-phoenix/create-pages/blog.js

@@ -10,6 +10,8 @@ query GET_POSTS {
 	    edges {
 	      node {
 	        id
+	        databaseId
+	        bodyClasses
 	        title
 	        excerpt
 	        content

packages/gatsby-wordpress-theme-phoenix/create-pages/front-page.js

@@ -107,6 +107,8 @@ query GET_FRONT_PAGE {
 	  posts(first: 3) {
 	    nodes {
 	      id
+	      databaseId
+	      bodyClasses
 	      title
 	      excerpt
 	      date
@@ -135,6 +137,7 @@ query GET_FRONT_PAGE {
 	        title
 	        excerpt
 	        content
+	        bodyClasses
 	        date
 	        uri
 	        author {

packages/gatsby-wordpress-theme-phoenix/create-pages/pages.js

@@ -10,6 +10,8 @@ query GET_PAGES {
     pages( first: 5000 ) {
       nodes {
         id
+        databaseId
+        bodyClasses
         title
         content
         date

packages/gatsby-wordpress-theme-phoenix/create-pages/posts.js

@@ -9,6 +9,8 @@ query GET_POSTS {
     posts( first: 5000 ) {
       nodes {
         id
+        databaseId
+        bodyClasses
         title
         excerpt
         content

packages/gatsby-wordpress-theme-phoenix/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-wordpress-theme-phoenix",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Gatsby WordPress Theme Phoenix",
   "main": "index.js",
   "dependencies": {
@@ -9,6 +9,7 @@
     "@wordpress/block-library": "^2.18.0",
     "classnames": "^2.2.6",
     "dateformat": "^3.0.3",
+    "dompurify": "^2.2.0",
     "gatsby-image": "^2.4.5",
     "gatsby-link": "^2.4.6",
     "gatsby-paginate": "^1.1.1",
@@ -25,6 +26,7 @@
     "lodash": "^4.17.15",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
+    "react-body-classname": "^1.3.1",
     "react-helmet": "^6.0.0",
     "react-responsive": "^8.0.3",
     "sass-mq": "^5.0.1"

packages/gatsby-wordpress-theme-phoenix/src/components/blog-list/post/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
-import { getFormattedDate } from '../../../utils/functions';
+import { getFormattedDate, sanitize } from '../../../utils/functions';
 import Link from 'gatsby-link';
 import './style.scss';
 import defaultImage from '../../../images/default/default.jpg';
@@ -25,10 +25,10 @@ const Post = ( { post } ) => {
 			) }
 			<div className="featured-post-section__content">
 				{ post.title ? (
-					<h3 dangerouslySetInnerHTML={ { __html: post.title } } />
+					<h3 dangerouslySetInnerHTML={ { __html: sanitize(post?.title) } } />
 				) : null }
 				{ post.excerpt ? (
-					<div className="featured-post-section__excerpt" dangerouslySetInnerHTML={ { __html: post.excerpt } }/>
+					<div className="featured-post-section__excerpt" dangerouslySetInnerHTML={ { __html: sanitize(post?.excerpt) } }/>
 				) : null }
 				<div className="featured-post-section__meta">
 					{ post.date ? (

packages/gatsby-wordpress-theme-phoenix/src/components/footer/footer-static.js

@@ -1,5 +1,5 @@
 import Link from 'gatsby-link';
-import { normalizePath } from "../../utils/functions";
+import { normalizePath, sanitize } from "../../utils/functions";
 import FacebookIcon from "../icons/facebook-icon";
 import TwitterIcon from "../icons/twitter-icon";
 import InstagramIcon from "../icons/instagram-icon";
@@ -25,8 +25,8 @@ const Footer = ( { data } ) => {
 			<div className="wrapper">
 				{/*Top section*/}
 				<div className="footer__top">
-					{ sidebarOne ? <div  dangerouslySetInnerHTML={ { __html: sidebarOne } } className="footer__sidebar-one footer-widget"/> : null }
-					{ sidebarTwo ? <div  dangerouslySetInnerHTML={ { __html: sidebarTwo } } className="footer__sidebar-two footer-widget"/> : null }
+					{ sidebarOne ? <div  dangerouslySetInnerHTML={ { __html: sanitize(sidebarOne) } } className="footer__sidebar-one footer-widget"/> : null }
+					{ sidebarTwo ? <div  dangerouslySetInnerHTML={ { __html: sanitize(sidebarTwo) } } className="footer__sidebar-two footer-widget"/> : null }
 
 					{
 						footerMenuItems.edges.length ? (

packages/gatsby-wordpress-theme-phoenix/src/components/home/latest-posts/index.js

@@ -5,6 +5,7 @@ import config from '../../../../client-config';
 import Img from 'gatsby-image';
 import { useStaticQuery, graphql } from "gatsby";
 import './style.scss';
+import { sanitize } from "../../../utils/functions";
 
 const LatestPosts = ( props ) => {
 
@@ -47,7 +48,7 @@ const LatestPosts = ( props ) => {
 										) }
 										<div className="latest-post-section__content">
 											{ post.excerpt ? (
-												<div className="latest-post-section__excerpt" dangerouslySetInnerHTML={ { __html: post.excerpt } }/>
+												<div className="latest-post-section__excerpt" dangerouslySetInnerHTML={ { __html: sanitize(post?.excerpt) } }/>
 											) : null }
 										</div>
 									</Link>

packages/gatsby-wordpress-theme-phoenix/src/components/home/search-results/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 import Link from 'gatsby-link';
+import { sanitize } from "../../../utils/functions";
 
 const SearchResults = ( { queryResults } ) => {
 
@@ -12,7 +13,7 @@ const SearchResults = ( { queryResults } ) => {
 		<ul className="search-results">
 			{ queryResults.map( post => (
 				<li key={ post.id }>
-					<Link to={ post.uri }><span dangerouslySetInnerHTML={{ __html: post.title }}/></Link>
+					<Link to={ post.uri }><span dangerouslySetInnerHTML={{ __html: sanitize(post.title) }}/></Link>
 				</li>
 			) ) }
 		</ul>

packages/gatsby-wordpress-theme-phoenix/src/components/page/index.js

@@ -9,10 +9,12 @@ import { useStaticQuery, graphql } from "gatsby";
 import { isEmpty } from 'lodash';
 import './style.scss';
 import Taxonomies from "../widgets/taxonomies";
+import { sanitize } from "../../utils/functions";
 
 const Page = ( props ) => {
 
 	const { data } = props;
+	const showSidebar = 'false' !== process.env.GATSBY_SIDEBAR;
 
 	/* eslint-disable */
 	const imgData = useStaticQuery(graphql`
@@ -33,16 +35,14 @@ const Page = ( props ) => {
 			{ ! isEmpty( data )  ? (
 				<div className="page-container wrapper">
 					{ ! isEmpty( data.title )  ? (
-						<h2>{ data.title }</h2>
+						<h2 dangerouslySetInnerHTML={{__html: sanitize( data?.title )}}/>
 					) : null }
-					<div className="page-content-wrap">
+					<div className={`page-content-wrap ${showSidebar ? 'has-sidebar' : '' }`}>
 						<section className="page-content">
 							{/* Uncomment this if you need featured image to be displayed here*/}
 							{ ! isEmpty( data.featuredImage ) ? (
 								<Img fluid={data.featuredImage.sourceUrlSharp.childImageSharp.fluid} alt={ data.altText ? data.altText : data.title } />
-							) : (
-								<Img fluid={imgData.file.childImageSharp.fluid} alt="Default" />
-							) }
+							) : null }
 
 							{ ! isEmpty( data.content ) ? (
 								<div
@@ -52,10 +52,12 @@ const Page = ( props ) => {
 								/>
 							) : null }
 						</section>
-						<aside className="aside">
-							{/* Taxonomy Widget */}
-							<Taxonomies taxonomies={ data.categories }/>
-						</aside>
+						{ showSidebar ? (
+							<aside className="aside">
+								{/* Taxonomy Widget */}
+								<Taxonomies taxonomies={ data.categories }/>
+							</aside>
+						) : null }
 					</div>
 				</div>
 			) : (

packages/gatsby-wordpress-theme-phoenix/src/components/page/style.scss

@@ -2,12 +2,15 @@
 
 .page-content-wrap {
 
-	display: grid;
 	padding-bottom: 48px;
-	grid-template-columns: 100%;
 
-	@media only screen and ( min-width: $tablet ) {
-		grid-template-columns: 70% 30%;
+	&.has-sidebar {
+		display: grid;
+		grid-template-columns: 100%;
+
+		@media only screen and ( min-width: $tablet ) {
+			grid-template-columns: 70% 30%;
+		}
 	}
 
 	.page-content {

packages/gatsby-wordpress-theme-phoenix/src/components/single/index.js

@@ -3,6 +3,7 @@ import React from "react";
 import { isEmpty } from 'lodash';
 import './style.scss';
 import Img from 'gatsby-image';
+import { sanitize } from "../../utils/functions";
 
 const Single = ( { data } ) => {
 
@@ -11,13 +12,14 @@ const Single = ( { data } ) => {
 	}
 
 	const { id, postId, title, content, featuredImage, categories } = data;
+	const showSidebar = 'false' !== process.env.GATSBY_SIDEBAR;
 
 	return (
 		<div className="post-container wrapper">
 			<div className="entry-header">
-				<h1 className="entry-title" dangerouslySetInnerHTML={{ __html: title }} />
+				<h1 className="entry-title" dangerouslySetInnerHTML={{ __html: sanitize(title) }} />
 			</div>
-			<div className="post-content-wrap">
+			<div className={`post-content-wrap ${showSidebar ? 'has-sidebar' : '' }`}>
 				<article
 					data-id={id}
 					id={`post-${postId}`}
@@ -33,10 +35,14 @@ const Single = ( { data } ) => {
 					/>
 					{/* .entry-content */}
 				</article>
-				<aside className="aside">
-					{/* Taxonomy Widget */}
-					<Taxonomies taxonomies={ categories }/>
-				</aside>
+				{
+					showSidebar ? (
+						<aside className="aside">
+							{/* Taxonomy Widget */}
+							<Taxonomies taxonomies={ categories }/>
+						</aside>
+					): null
+				}
 			</div>
 		</div>
 	)

packages/gatsby-wordpress-theme-phoenix/src/components/single/style.scss

@@ -2,21 +2,29 @@
 
 .post-content-wrap {
 
-	display: grid;
 	padding-bottom: 48px;
-	grid-template-columns: 100%;
 
-	@media only screen and ( min-width: $tablet ) {
-		grid-template-columns: 70% 30%;
+	&.has-sidebar {
+		display: grid;
+		grid-template-columns: 100%;
+
+		@media only screen and ( min-width: $tablet ) {
+			grid-template-columns: 70% 30%;
+		}
 	}
 
 	.post-content {
 
 		padding-bottom: 48px;
 
 		@media only screen and ( min-width: $tablet ) {
-			padding-right: 48px;
 			padding-bottom: 0;
 		}
 	}
+
+	.aside {
+		@media only screen and ( min-width: $tablet ) {
+			padding-left: 48px;
+		}
+	}
 }

packages/gatsby-wordpress-theme-phoenix/src/sass/vendor/hamburger/_base.scss

@@ -1,5 +1,4 @@
 // Hamburger
-// ==================================================
 .hamburger {
   padding: $hamburger-padding-y $hamburger-padding-x;
   display: inline-block;

packages/gatsby-wordpress-theme-phoenix/src/sass/vendor/hamburger/hamburgers.scss

@@ -1,5 +1,5 @@
 /*!
- * Hamburgers
+ * Hamburgers.
  * @description Tasty CSS-animated hamburgers
  * @author Jonathan Suh @jonsuh
  * @site https://jonsuh.com/hamburgers

packages/gatsby-wordpress-theme-phoenix/src/sass/vendor/hamburger/types/_slider.scss

@@ -1,4 +1,4 @@
-
+// slider.
 @if index($hamburger-types, slider) {
   /*
    * Slider