diff --git a/composer.json b/composer.json index 589d6e423..527db3a0f 100644 --- a/composer.json +++ b/composer.json @@ -65,15 +65,15 @@ "newfold-labs/wp-module-global-ctb": "^1.0.9", "newfold-labs/wp-module-help-center": "1.0.21", "newfold-labs/wp-module-loader": "^1.0.10", - "newfold-labs/wp-module-marketplace": "^2.1.0", + "newfold-labs/wp-module-marketplace": "^2.2.0", "newfold-labs/wp-module-notifications": "^1.2.1", "newfold-labs/wp-module-onboarding": "^1.11.10", "newfold-labs/wp-module-patterns": "^0.1.10", - "newfold-labs/wp-module-performance": "^1.2.2", + "newfold-labs/wp-module-performance": "^1.3.0", "newfold-labs/wp-module-runtime": "^1.0.7", "newfold-labs/wp-module-secure-passwords": "^1.1", "newfold-labs/wp-module-sso": "^1.0.4", - "newfold-labs/wp-module-staging": "^1.1.1", + "newfold-labs/wp-module-staging": "^1.2.2", "wp-forge/wp-update-handler": "^1.0", "wp-forge/wp-upgrade-handler": "^1.0" } diff --git a/composer.lock b/composer.lock index 7fc03cb06..f3fffc443 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "91de4cbb8c627ca7ac8cbcc4f5586ca7", + "content-hash": "4f9f12b882b0e6b5ed7a3117834fa027", "packages": [ { "name": "doctrine/inflector", @@ -810,16 +810,16 @@ }, { "name": "newfold-labs/wp-module-marketplace", - "version": "2.1.0", + "version": "2.2.0", "source": { "type": "git", "url": "https://github.com/newfold-labs/wp-module-marketplace.git", - "reference": "3f836e2ae93e97e91a677e12ceb65fda90ee4d86" + "reference": "89984da21a9b069a1c47320d3b2bffbf89201e17" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/newfold-labs/wp-module-marketplace/zipball/3f836e2ae93e97e91a677e12ceb65fda90ee4d86", - "reference": "3f836e2ae93e97e91a677e12ceb65fda90ee4d86", + "url": "https://api.github.com/repos/newfold-labs/wp-module-marketplace/zipball/89984da21a9b069a1c47320d3b2bffbf89201e17", + "reference": "89984da21a9b069a1c47320d3b2bffbf89201e17", "shasum": "" }, "require": { @@ -860,10 +860,10 @@ ], "description": "A module for rendering product data and interacting with the Hiive marketplace API.", "support": { - "source": "https://github.com/newfold-labs/wp-module-marketplace/tree/2.1.0", + "source": "https://github.com/newfold-labs/wp-module-marketplace/tree/2.2.0", "issues": "https://github.com/newfold-labs/wp-module-marketplace/issues" }, - "time": "2023-11-07T15:19:22+00:00" + "time": "2023-12-04T23:25:24+00:00" }, { "name": "newfold-labs/wp-module-notifications", @@ -1063,16 +1063,16 @@ }, { "name": "newfold-labs/wp-module-performance", - "version": "1.2.2", + "version": "1.3.0", "source": { "type": "git", "url": "https://github.com/newfold-labs/wp-module-performance.git", - "reference": "f5cf5924aa6aaceebdf0b5d8b5ea7e004eb1d1a8" + "reference": "4ac17a7ad77bb39cd90ebbb5cb207ede5336dbac" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/newfold-labs/wp-module-performance/zipball/f5cf5924aa6aaceebdf0b5d8b5ea7e004eb1d1a8", - "reference": "f5cf5924aa6aaceebdf0b5d8b5ea7e004eb1d1a8", + "url": "https://api.github.com/repos/newfold-labs/wp-module-performance/zipball/4ac17a7ad77bb39cd90ebbb5cb207ede5336dbac", + "reference": "4ac17a7ad77bb39cd90ebbb5cb207ede5336dbac", "shasum": "" }, "require": { @@ -1101,10 +1101,10 @@ ], "description": "A module for managing caching functionality.", "support": { - "source": "https://github.com/newfold-labs/wp-module-performance/tree/1.2.2", + "source": "https://github.com/newfold-labs/wp-module-performance/tree/1.3.0", "issues": "https://github.com/newfold-labs/wp-module-performance/issues" }, - "time": "2023-10-30T13:02:28+00:00" + "time": "2023-12-04T23:27:28+00:00" }, { "name": "newfold-labs/wp-module-runtime", @@ -1251,16 +1251,16 @@ }, { "name": "newfold-labs/wp-module-staging", - "version": "1.1.1", + "version": "1.2.2", "source": { "type": "git", "url": "https://github.com/newfold-labs/wp-module-staging.git", - "reference": "5a045d4345b5b6a205fb2a5a2a6ac37953b1503c" + "reference": "c2dd6a1a381c3473cffab0d8eb49b1bd8dd0f966" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/newfold-labs/wp-module-staging/zipball/5a045d4345b5b6a205fb2a5a2a6ac37953b1503c", - "reference": "5a045d4345b5b6a205fb2a5a2a6ac37953b1503c", + "url": "https://api.github.com/repos/newfold-labs/wp-module-staging/zipball/c2dd6a1a381c3473cffab0d8eb49b1bd8dd0f966", + "reference": "c2dd6a1a381c3473cffab0d8eb49b1bd8dd0f966", "shasum": "" }, "require-dev": { @@ -1294,10 +1294,10 @@ ], "description": "Newfold module for staging functionality in brand plugins", "support": { - "source": "https://github.com/newfold-labs/wp-module-staging/tree/1.1.1", + "source": "https://github.com/newfold-labs/wp-module-staging/tree/1.2.2", "issues": "https://github.com/newfold-labs/wp-module-staging/issues" }, - "time": "2023-09-19T22:32:47+00:00" + "time": "2023-12-04T23:24:25+00:00" }, { "name": "wp-cli/wp-config-transformer", diff --git a/package-lock.json b/package-lock.json index fdea0166b..2a9a43b67 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@heroicons/react": "^2.0.18", "@newfold-labs/wp-module-ecommerce": "^1.3.14", "@newfold-labs/wp-module-runtime": "^1.0.7", - "@newfold/ui-component-library": "^1.0.0", + "@newfold/ui-component-library": "^1.0.1", "@reduxjs/toolkit": "^1.9.6", "@wordpress/compose": "^6.24.0", "@wordpress/dom-ready": "^3.47.0", @@ -3219,9 +3219,9 @@ } }, "node_modules/@newfold/ui-component-library": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.0.tgz", - "integrity": "sha512-zEP2oe+WHu1VJ4B34tKb+8cOdSIefSZ5sappZHLJtA3DM+LhP4NHoVvLt34YYNdm9Zq1mL/M5PH9uqCbMQZFOg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.1.tgz", + "integrity": "sha512-p/nCSWcVNs7hOzUJNQXbyiQe82WAzUXbSENIvMX326FeLyETo0AtncqNUZJxABDIVQVQONu+19uRCAqCRvZBPQ==", "dependencies": { "@headlessui/react": "^1.7.8", "@heroicons/react": "^1.0.6", @@ -25415,9 +25415,9 @@ } }, "@newfold/ui-component-library": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.0.tgz", - "integrity": "sha512-zEP2oe+WHu1VJ4B34tKb+8cOdSIefSZ5sappZHLJtA3DM+LhP4NHoVvLt34YYNdm9Zq1mL/M5PH9uqCbMQZFOg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@newfold/ui-component-library/-/ui-component-library-1.0.1.tgz", + "integrity": "sha512-p/nCSWcVNs7hOzUJNQXbyiQe82WAzUXbSENIvMX326FeLyETo0AtncqNUZJxABDIVQVQONu+19uRCAqCRvZBPQ==", "requires": { "@headlessui/react": "^1.7.8", "@heroicons/react": "^1.0.6", diff --git a/package.json b/package.json index 010c5a17c..6102c4753 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@heroicons/react": "^2.0.18", "@newfold-labs/wp-module-ecommerce": "^1.3.14", "@newfold-labs/wp-module-runtime": "^1.0.7", - "@newfold/ui-component-library": "^1.0.0", + "@newfold/ui-component-library": "^1.0.1", "@reduxjs/toolkit": "^1.9.6", "@wordpress/compose": "^6.24.0", "@wordpress/dom-ready": "^3.47.0", diff --git a/src/app/components/page/index.js b/src/app/components/page/index.js deleted file mode 100644 index 47fd63e3c..000000000 --- a/src/app/components/page/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import classNames from 'classnames'; - -export const Page = ( { className, children } ) => { - return ( -
- { children } -
- ); -}; diff --git a/src/app/components/section/index.js b/src/app/components/section/index.js deleted file mode 100644 index 03a4352af..000000000 --- a/src/app/components/section/index.js +++ /dev/null @@ -1,159 +0,0 @@ -import { Button, Title } from '@newfold/ui-component-library'; -import { useState, useEffect } from '@wordpress/element'; -import classNames from 'classnames'; - -export const SectionContainer = ( { className, children } ) => { - return ( -
- { children } -
- ); -}; - -export const SectionHeader = ( { - title, - subTitle, - className, - primaryAction = { title: false, className: false, onClick: false }, - secondaryAction = { title: false, className: false, onClick: false }, -} ) => { - return ( -
-
- { title && ( -

- { title } -

- ) } - { subTitle &&

{ subTitle }

} -
- { ( primaryAction.title || secondaryAction.title ) && ( -
- { primaryAction.title && ( - - ) } - { secondaryAction.title && ( - - ) } -
- ) } -
- ); -}; - -export const SectionContent = ( { - separator = false, - id, - className, - children, -} ) => { - const [ isTarget, setIsTarget ] = useState( false ); - const searchParams = new URLSearchParams( window.location.search ); - - useEffect( () => { - if ( - searchParams.has( 'nfd-target' ) && - searchParams.get( 'nfd-target' ) === id - ) { - setIsTarget( true ); - - setTimeout( () => { - setIsTarget( false ); - removeTargetQueryParam(); - }, 9500 ); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ searchParams ] ); - - /* - * Remove the 'nfd-target={id}' query param from the URL - */ - const removeTargetQueryParam = () => { - searchParams.delete( 'nfd-target' ); - const currentURL = window.location.href; - const updatedURL = currentURL.replace( `&nfd-target=${ id }`, '' ); - window.history.replaceState( null, null, updatedURL ); - }; - - return ( -
-
- { children } -
-
- ); -}; - -export const SectionSettings = ( { - className, - children, - title, - description, -} ) => { - return ( -
-
-
- - { title } - - { description && ( -
{ description }
- ) } -
-
- -
- { title } -
{ children }
-
-
- ); -}; diff --git a/src/app/components/webinars-banner/index.js b/src/app/components/webinars-banner/index.js index 0a42a4b3e..c6868a70e 100644 --- a/src/app/components/webinars-banner/index.js +++ b/src/app/components/webinars-banner/index.js @@ -1,12 +1,11 @@ import { useState, useEffect } from '@wordpress/element'; -import { Button, Title } from '@newfold/ui-component-library'; +import { Button, Container, Title } from '@newfold/ui-component-library'; import { ArrowRightIcon, CalendarIcon, ClockIcon, } from '@heroicons/react/24/outline'; import { ReactComponent as WebinarsVector } from 'App/images/webinars-vector.svg'; -import { SectionContainer, SectionContent } from 'App/components/section'; /** * A component that displays the next monthly webinar. @@ -106,8 +105,8 @@ const WebinarsBanner = () => { } return ( - - + +
@@ -173,8 +172,8 @@ const WebinarsBanner = () => {
- - + + ); }; diff --git a/src/app/pages/ecommerce/page.js b/src/app/pages/ecommerce/page.js index 21e319c14..d9122eaa2 100644 --- a/src/app/pages/ecommerce/page.js +++ b/src/app/pages/ecommerce/page.js @@ -1,11 +1,11 @@ import './styles.scss'; import { useContext } from '@wordpress/element'; import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'; +import { Page } from '@newfold/ui-component-library'; import { NewfoldECommerce } from '@newfold-labs/wp-module-ecommerce'; import '@newfold-labs/wp-module-ecommerce/bluehost.css'; import AppStore from 'App/data/store'; import { bluehostSettingsApiFetch } from 'App/util/helpers'; -import { Page } from 'App/components/page'; import { useNotification } from 'App/components/notifications'; const ECommerce = () => { diff --git a/src/app/pages/help/index.js b/src/app/pages/help/index.js index fd0961d18..b1e0db6aa 100644 --- a/src/app/pages/help/index.js +++ b/src/app/pages/help/index.js @@ -1,10 +1,10 @@ -import { Button, Card, Title } from '@newfold/ui-component-library'; -import { Page } from 'App/components/page'; import { - SectionContainer, - SectionContent, - SectionHeader, -} from 'App/components/section'; + Button, + Card, + Container, + Page, + Title, +} from '@newfold/ui-component-library'; import help from 'App/data/help'; const HelpCard = ( { item } ) => { @@ -46,17 +46,17 @@ const Help = () => { }; return ( - - + - { renderHelpCards() } - + { renderHelpCards() } + ); }; diff --git a/src/app/pages/help/stylesheet.scss b/src/app/pages/help/stylesheet.scss deleted file mode 100644 index 66ddbf4d2..000000000 --- a/src/app/pages/help/stylesheet.scss +++ /dev/null @@ -1,17 +0,0 @@ -.card-help { - text-align: center; - flex-grow: 2; - - .components-card-header, - .components-card-footer { - flex-direction: column; - justify-content: end; - } - - /* <= WP 5.8 */ - .components-card__header, - .components-card__footer { - justify-content: center; - } - -} \ No newline at end of file diff --git a/src/app/pages/home/index.js b/src/app/pages/home/index.js index 22232a333..bd7f2254c 100644 --- a/src/app/pages/home/index.js +++ b/src/app/pages/home/index.js @@ -1,6 +1,4 @@ -import './stylesheet.scss'; -import { Page } from 'App/components/page'; -import { SectionContainer, SectionContent } from 'App/components/section'; +import { Container, Page } from '@newfold/ui-component-library'; import WebinarsBanner from 'App/components/webinars-banner'; import AccountCard from './accountCard'; import HelpCard from './helpCard'; @@ -11,14 +9,14 @@ const Home = () => { - - + +
- - + + ); }; diff --git a/src/app/pages/home/stylesheet.scss b/src/app/pages/home/stylesheet.scss deleted file mode 100644 index ace83d4b9..000000000 --- a/src/app/pages/home/stylesheet.scss +++ /dev/null @@ -1,123 +0,0 @@ -.wppbh-section { - margin: 0 0 2rem; - position: relative; - - .components-card__header { - background: var(--color-off-white); - border: 1px solid var(--color-border); - flex-direction: column; - @media screen and (min-width: 1132px) { - flex-direction: row; - } - .heading { - color: var(--color-title); - font-size: 1.5rem; - margin-bottom: 0 !important; // wp core override - @media screen and (min-width: 1132px) { - margin-bottom: 24px !important; - } - } - p { - color: var(--color-text); - font-weight: 700; - margin-left: 0; - } - } - .components-card__footer { - .heading { - display: flex; - align-items: center; - svg, - .dashicons { - margin-right: 4px; - } - } - } - - - &.wppbh-section-coming-soon { - - .wppbh-section-graphic { - top: -3rem; - right: -6rem; - } - } - - &:first-of-type { // allows for better reordering and injection - margin-top: 1rem; - } -} - -.section-graphic { - position: absolute; - right: 0; - top: 2rem; - transition: all .5s ease; - z-index: 0; - display: none; - @media screen and (min-width: 882px) { - display: block; - max-width: 260px; - } - @media screen and (min-width: 1190px) { - max-width: 330px; - } - @media screen and (min-width: 1399px) { - max-width: 400px; - } - - &.reverse { - transform: rotateY(180deg); - @media(prefers-reduced-motion) { - transform: none; - } - } -} - -.wppbh-section-card { - position: relative; - z-index: 1; - - @media screen and (min-width: 882px) { - max-width: 66%; - } - - .components-card__footer { - flex-direction: column; - - .wppbh-cardlist-content { - width: 100%; - .components-heading { - display: flex; - align-items: center; - .dashicons, svg { - margin-right: 8px; - color: var(--color-primary); - fill: var(--color-primary); - } - } - @media screen and (max-width: 700px) { - text-align: center; - .components-heading { - justify-content: center; - } - } - } - - .components-button { - margin: 1rem auto; - } - - @media screen and (min-width: 700px) { - flex-direction: row; - - .wppbh-cardlist-content { - max-width: 60%; - } - - .components-button { - margin: 0; - } - } - } -} \ No newline at end of file diff --git a/src/app/pages/marketplace/index.js b/src/app/pages/marketplace/index.js index ec617adcc..02e8cf6f6 100644 --- a/src/app/pages/marketplace/index.js +++ b/src/app/pages/marketplace/index.js @@ -2,12 +2,7 @@ import apiFetch from '@wordpress/api-fetch'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import classnames from 'classnames'; -import { Page } from 'App/components/page'; -import { - SectionContainer, - SectionHeader, - SectionContent, -} from 'App/components/section'; +import { Container, Page } from '@newfold/ui-component-library'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; // component sourced from marketplace module import { default as NewfoldMarketplace } from '@modules/wp-module-marketplace/components/marketplace/'; @@ -44,20 +39,14 @@ const MarketplacePage = () => { NewfoldRuntime, }; - const moduleComponents = { - SectionHeader, - SectionContent, - }; - return ( - + - + ); }; diff --git a/src/app/pages/performance/index.js b/src/app/pages/performance/index.js index b5afd1e6f..d1b4e3b32 100644 --- a/src/app/pages/performance/index.js +++ b/src/app/pages/performance/index.js @@ -1,21 +1,15 @@ -import AppStore from '../../data/store'; -import { Page } from '../../components/page'; -import { useState, useEffect, useContext, Fragment } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; -import classnames from 'classnames'; +import { useState, useEffect, useContext, Fragment } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; +import classnames from 'classnames'; +import { Container, Page } from '@newfold/ui-component-library'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; -import { - SectionContainer, - SectionHeader, - SectionContent, - SectionSettings, -} from 'App/components/section'; -import { useNotification } from 'App/components/notifications'; +import AppStore from '../../data/store'; import { bluehostSettingsApiFetch as newfoldSettingsApiFetch, bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch, } from 'App/util/helpers'; +import { useNotification } from 'App/components/notifications'; import { default as NewfoldPerformance } from '@modules/wp-module-performance/components/performance/'; @@ -39,20 +33,15 @@ const PerformancePage = () => { }; const moduleComponents = { - Page, - SectionHeader, - SectionContent, - SectionSettings, - SectionContainer, Fragment, }; return ( - - + { methods={ moduleMethods } Components={ moduleComponents } /> - + ); }; diff --git a/src/app/pages/settings/automaticUpdates.js b/src/app/pages/settings/automaticUpdates.js index 0758c2fa2..cc22f220e 100644 --- a/src/app/pages/settings/automaticUpdates.js +++ b/src/app/pages/settings/automaticUpdates.js @@ -1,9 +1,8 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, ToggleField } from '@newfold/ui-component-library'; +import { Alert, Container, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const AutomaticUpdatesAll = ( { setError, notify } ) => { @@ -286,7 +285,7 @@ const AutomaticUpdates = () => { const notify = useNotification(); return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/comingSoon.js b/src/app/pages/settings/comingSoon.js index de0d710cd..4e4c94573 100644 --- a/src/app/pages/settings/comingSoon.js +++ b/src/app/pages/settings/comingSoon.js @@ -1,12 +1,11 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, ToggleField } from '@newfold/ui-component-library'; +import { Alert, Container, ToggleField } from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch, comingSoonAdminbarToggle, } from '../../util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const ComingSoon = () => { @@ -85,7 +84,7 @@ const ComingSoon = () => { }; return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/commentSettings.js b/src/app/pages/settings/commentSettings.js index fdd66e3a5..122e1bc24 100644 --- a/src/app/pages/settings/commentSettings.js +++ b/src/app/pages/settings/commentSettings.js @@ -1,9 +1,13 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, SelectField, ToggleField } from '@newfold/ui-component-library'; +import { + Alert, + Container, + SelectField, + ToggleField, +} from '@newfold/ui-component-library'; import AppStore from '../../data/store'; import { bluehostSettingsApiFetch } from '../../util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const OldPostsComments = ( { setError, notify } ) => { @@ -244,7 +248,7 @@ const CommentSettings = () => { const notify = useNotification(); return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/contentSettings.js b/src/app/pages/settings/contentSettings.js index 7beb8548a..2eff0cef3 100644 --- a/src/app/pages/settings/contentSettings.js +++ b/src/app/pages/settings/contentSettings.js @@ -1,9 +1,8 @@ import { useState } from '@wordpress/element'; import { useUpdateEffect } from 'react-use'; -import { Alert, SelectField } from '@newfold/ui-component-library'; +import { Alert, Container, SelectField } from '@newfold/ui-component-library'; import AppStore from 'App/data/store'; import { bluehostSettingsApiFetch } from 'App/util/helpers'; -import { SectionSettings } from 'App/components/section'; import { useNotification } from 'App/components/notifications'; const ContentRevisions = ( { setError, notify } ) => { @@ -190,7 +189,7 @@ const ContentSettings = () => { const notify = useNotification(); return ( - { ) } - + ); }; diff --git a/src/app/pages/settings/index.js b/src/app/pages/settings/index.js index 2316d1e86..7609e234e 100644 --- a/src/app/pages/settings/index.js +++ b/src/app/pages/settings/index.js @@ -1,53 +1,54 @@ +import classNames from 'classnames'; +import { Container, Page } from '@newfold/ui-component-library'; +import useContainerBlockIsTarget from 'App/util/hooks/useContainerBlockTarget'; import AutomaticUpdates from './automaticUpdates'; -import ComingSoon from './comingSoon'; import CommentSettings from './commentSettings'; +import ComingSoon from './comingSoon'; import ContentSettings from './contentSettings'; -import { Page } from 'App/components/page'; -import { - SectionContainer, - SectionHeader, - SectionContent, -} from 'App/components/section'; const Settings = () => { return ( - - + - - + - - + - - + - + - - + + ); }; diff --git a/src/app/pages/staging/index.js b/src/app/pages/staging/index.js index f2f470699..f6ecbd651 100644 --- a/src/app/pages/staging/index.js +++ b/src/app/pages/staging/index.js @@ -3,13 +3,6 @@ import { useState, useEffect } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; import classnames from 'classnames'; import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime'; -import { Page } from 'App/components/page'; -import { - SectionContainer, - SectionHeader, - SectionContent, - SectionSettings, -} from 'App/components/section'; import { useNotification } from 'App/components/notifications'; // component sourced from staging module import { default as NewfoldStaging } from '@modules/wp-module-staging/components/staging/'; @@ -32,17 +25,8 @@ const Staging = () => { useNotification, }; - const moduleComponents = { - Page, - SectionHeader, - SectionContent, - SectionSettings, - SectionContainer, - }; - return ( diff --git a/src/app/util/hooks/useContainerBlockTarget.js b/src/app/util/hooks/useContainerBlockTarget.js new file mode 100644 index 000000000..2c7c2bcc0 --- /dev/null +++ b/src/app/util/hooks/useContainerBlockTarget.js @@ -0,0 +1,43 @@ +import { useEffect, useState } from '@wordpress/element'; + +/** + * Checks if the container block is the target element based on the query param. + * If true, the hook will return that boolean value for a few seconds. + * The hook will set the value to false and remove the query param. + * + * @param {string} id - the container block id, used to check if it's the target. + * @return {boolean} - true if the container block is the target. + */ +const useContainerBlockIsTarget = ( id ) => { + const [ isTarget, setIsTarget ] = useState( false ); + const searchParams = new URLSearchParams( window.location.search ); + + useEffect( () => { + if ( + searchParams.has( 'nfd-target' ) && + searchParams.get( 'nfd-target' ) === id + ) { + setIsTarget( true ); + + setTimeout( () => { + setIsTarget( false ); + removeTargetQueryParam(); + }, 9500 ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ searchParams ] ); + + /* + * Remove the 'nfd-target={id}' query param from the URL + */ + const removeTargetQueryParam = () => { + searchParams.delete( 'nfd-target' ); + const currentURL = window.location.href; + const updatedURL = currentURL.replace( `&nfd-target=${ id }`, '' ); + window.history.replaceState( null, null, updatedURL ); + }; + + return isTarget; +}; + +export default useContainerBlockIsTarget; diff --git a/src/app/util/hooks/useHandlePageLoad.js b/src/app/util/hooks/useHandlePageLoad.js index ff64f706a..d90843fff 100644 --- a/src/app/util/hooks/useHandlePageLoad.js +++ b/src/app/util/hooks/useHandlePageLoad.js @@ -1,5 +1,9 @@ import { useLocation } from 'react-router-dom'; +/** + * Scrolls to top of page on route change. + * @return {boolean} - true + */ const useHandlePageLoad = () => { const location = useLocation(); const routeContents = document.querySelector( '.wppbh-app-body-inner' );