/** * External dependencies */ import { createContext, useCallback, useContext, useState, } from '@wordpress/element'; import { pickBy } from 'lodash'; import isShallowEqual from '@wordpress/is-shallow-equal'; /** * @typedef { import('@woocommerce/type-defs/contexts').ValidationContext } ValidationContext * @typedef {import('react')} React */ const ValidationContext = createContext( { getValidationError: () => '', setValidationErrors: ( errors ) => void errors, clearValidationError: ( property ) => void property, clearAllValidationErrors: () => void null, hideValidationError: () => void null, showValidationError: () => void null, showAllValidationErrors: () => void null, hasValidationErrors: false, getValidationErrorId: ( errorId ) => errorId, } ); /** * @return {ValidationContext} The context values for the validation context. */ export const useValidationContext = () => { return useContext( ValidationContext ); }; /** * Validation context provider * * Any children of this context will be exposed to validation state and helpers * for tracking validation. * * @param {Object} props Incoming props for the component. * @param {JSX.Element} props.children What react elements are wrapped by this component. */ export const ValidationContextProvider = ( { children } ) => { const [ validationErrors, updateValidationErrors ] = useState( {} ); /** * This retrieves any validation error message that exists in state for the * given property name. * * @param {string} property The property the error message is for. * * @return {Object} The error object for the given property. */ const getValidationError = useCallback( ( property ) => validationErrors[ property ], [ validationErrors ] ); /** * Provides an id for the validation error that can be used to fill out * aria-describedby attribute values. * * @param {string} errorId The input css id the validation error is related * to. * @return {string} The id to use for the validation error container. */ const getValidationErrorId = useCallback( ( errorId ) => { const error = validationErrors[ errorId ]; if ( ! error || error.hidden ) { return ''; } return `validate-error-${ errorId }`; }, [ validationErrors ] ); /** * Clears any validation error that exists in state for the given property * name. * * @param {string} property The name of the property to clear if exists in * validation error state. */ const clearValidationError = useCallback( /** * Callback that is memoized. * * @param {string} property */ ( property ) => { updateValidationErrors( /** * Callback for validation Errors handling. * * @param {Object} prevErrors */ ( prevErrors ) => { if ( ! prevErrors[ property ] ) { return prevErrors; } const { // eslint-disable-next-line no-unused-vars -- this is intentional to omit the dynamic property from the returned object. [ property ]: clearedProperty, ...newErrors } = prevErrors; return newErrors; } ); }, [] ); /** * Clears the entire validation error state. */ const clearAllValidationErrors = useCallback( () => void updateValidationErrors( {} ), [] ); /** * Used to record new validation errors in the state. * * @param {Object} newErrors An object where keys are the property names the * validation error is for and values are the * validation error message displayed to the user. */ const setValidationErrors = useCallback( ( newErrors ) => { if ( ! newErrors ) { return; } updateValidationErrors( ( prevErrors ) => { newErrors = pickBy( newErrors, ( error, property ) => { if ( typeof error.message !== 'string' ) { return false; } if ( prevErrors.hasOwnProperty( property ) ) { return ! isShallowEqual( prevErrors[ property ], error ); } return true; } ); if ( Object.values( newErrors ).length === 0 ) { return prevErrors; } return { ...prevErrors, ...newErrors, }; } ); }, [] ); /** * Used to update a validation error. * * @param {string} property The name of the property to update. * @param {Object} newError New validation error object. */ const updateValidationError = useCallback( ( property, newError ) => { updateValidationErrors( ( prevErrors ) => { if ( ! prevErrors.hasOwnProperty( property ) ) { return prevErrors; } const updatedError = { ...prevErrors[ property ], ...newError, }; return isShallowEqual( prevErrors[ property ], updatedError ) ? prevErrors : { ...prevErrors, [ property ]: updatedError, }; } ); }, [] ); /** * Given a property name and if an associated error exists, it sets its * `hidden` value to true. * * @param {string} property The name of the property to set the `hidden` * value to true. */ const hideValidationError = useCallback( ( property ) => void updateValidationError( property, { hidden: true, } ), [ updateValidationError ] ); /** * Given a property name and if an associated error exists, it sets its * `hidden` value to false. * * @param {string} property The name of the property to set the `hidden` * value to false. */ const showValidationError = useCallback( ( property ) => void updateValidationError( property, { hidden: false, } ), [ updateValidationError ] ); /** * Sets the `hidden` value of all errors to `false`. */ const showAllValidationErrors = useCallback( () => void updateValidationErrors( ( prevErrors ) => { const updatedErrors = {}; Object.keys( prevErrors ).forEach( ( property ) => { if ( prevErrors[ property ].hidden ) { updatedErrors[ property ] = { ...prevErrors[ property ], hidden: false, }; } } ); if ( Object.values( updatedErrors ).length === 0 ) { return prevErrors; } return { ...prevErrors, ...updatedErrors, }; } ), [] ); const context = { getValidationError, setValidationErrors, clearValidationError, clearAllValidationErrors, hideValidationError, showValidationError, showAllValidationErrors, hasValidationErrors: Object.keys( validationErrors ).length > 0, getValidationErrorId, }; return ( { children } ); }; Sample Page – getpacificseeds.com

getpacificseeds.com

Sample Page

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!