Feature: save title as pageslug on publish

src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx

@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 import {EditIcon, GiveIcon} from '../components/icons';
-import {drawerRight, moreVertical, external} from '@wordpress/icons';
+import {drawerRight, external, moreVertical} from '@wordpress/icons';
 import {setFormSettings, setTransferState, useFormState, useFormStateDispatch} from '../stores/form-state';
-import {Button, Dropdown, ExternalLink, Icon, MenuGroup, MenuItem, TextControl} from '@wordpress/components';
+import {Button, Dropdown, ExternalLink, MenuGroup, MenuItem, TextControl} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 import {Header} from '../components';
 import {getWindowData, Storage} from '../common';
@@ -11,9 +11,10 @@ import {setIsDirty} from '@givewp/form-builder/stores/form-state/reducer';
 import revertMissingBlocks from '@givewp/form-builder/common/revertMissingBlocks';
 import {Markup} from 'interweave';
 import {InfoModal, ModalType} from '../components/modal';
-import {setEditorMode, useEditorState, useEditorStateDispatch} from "@givewp/form-builder/stores/editor-state";
-import EditorMode from "@givewp/form-builder/types/editorMode";
-import {useDispatch} from "@wordpress/data";
+import {setEditorMode, useEditorState, useEditorStateDispatch} from '@givewp/form-builder/stores/editor-state';
+import EditorMode from '@givewp/form-builder/types/editorMode';
+import {useDispatch} from '@wordpress/data';
+import {cleanForSlug} from '@wordpress/url';
 
 const Logo = () => (
     <div
@@ -37,11 +38,10 @@ const Logo = () => (
     </div>
 );
 
-const HeaderContainer = ({
-                             SecondarySidebarButtons = null,
-                             showSidebar,
-                             toggleShowSidebar,
-                         }) => {
+/**
+ * @unreleased dispatch page slug from form title on initial publish.
+ */
+const HeaderContainer = ({SecondarySidebarButtons = null, showSidebar, toggleShowSidebar}) => {
     const {blocks, settings: formSettings, isDirty, transfer} = useFormState();
 
     const {formTitle} = formSettings;
@@ -54,6 +54,7 @@ const HeaderContainer = ({
     const isPublished = 'publish' === formSettings.formStatus;
     const {isMigratedForm, isTransferredForm} = window.migrationOnboardingData;
     const {createSuccessNotice} = useDispatch('core/notices');
+
     const {
         formPage: {permalink},
     } = getWindowData();
@@ -72,7 +73,12 @@ const HeaderContainer = ({
                 setErrorMessage(error.message);
             })
             .then(({formTitle, pageSlug}: FormSettings) => {
-                dispatch(setFormSettings({formTitle, pageSlug}));
+                dispatch(
+                    setFormSettings({
+                        formTitle,
+                        pageSlug,
+                    })
+                );
                 dispatch(setIsDirty(false));
                 setSaving(null);
                 showOnSaveNotice(formStatus);
@@ -82,22 +88,25 @@ const HeaderContainer = ({
     const showOnSaveNotice = (formStatus: string) => {
         if ('draft' === formStatus) {
             createSuccessNotice(__('Draft saved.', 'give'), {
-                type: 'snackbar'
+                type: 'snackbar',
             });
         } else {
-            const notice = 'publish' === formStatus && formSettings.formStatus !== 'draft'
-                ? __('Form updated.', 'give')
-                : __('Form published.', 'give')
+            const notice =
+                'publish' === formStatus && formSettings.formStatus !== 'draft'
+                    ? __('Form updated.', 'give')
+                    : __('Form published.', 'give');
 
             createSuccessNotice(notice, {
                 type: 'snackbar',
-                actions: [{
-                    label: __('View form', 'give'),
-                    url: permalink
-                }]
+                actions: [
+                    {
+                        label: __('View form', 'give'),
+                        url: permalink,
+                    },
+                ],
             });
         }
-    }
+    };
 
     const {mode} = useEditorState();
     const dispatchEditorState = useEditorStateDispatch();
@@ -108,7 +117,7 @@ const HeaderContainer = ({
         if (EditorMode.design === mode) {
             dispatchEditorState(setEditorMode(EditorMode.schema));
         }
-    }
+    };
 
     // @ts-ignore
     return (
@@ -126,7 +135,7 @@ const HeaderContainer = ({
                                 borderRadius: '4px',
                                 display: 'flex',
                                 gap: 'var(--givewp-spacing-2)',
-                                padding: 'var(--givewp-spacing-3) var(--givewp-spacing-4)'
+                                padding: 'var(--givewp-spacing-3) var(--givewp-spacing-4)',
                             }}
                             onClick={() => toggleEditorMode()}
                             icon={EditIcon}
@@ -140,7 +149,10 @@ const HeaderContainer = ({
                     <TextControl
                         className={'givewp-form-title'}
                         value={formTitle}
-                        onChange={(formTitle) => dispatch(setFormSettings({formTitle}))}
+                        onChange={(formTitle) => {
+                            !isPublished && dispatch(setFormSettings({pageSlug: cleanForSlug(formTitle)}));
+                            dispatch(setFormSettings({formTitle}));
+                        }}
                     />
                 }
                 contentRight={
@@ -154,16 +166,11 @@ const HeaderContainer = ({
                             {isSaving && 'draft' === isSaving
                                 ? __('Saving...', 'give')
                                 : 'draft' === formSettings.formStatus
-                                    ? __('Save as Draft', 'give')
-                                    : __('Switch to Draft', 'give')}
+                                ? __('Save as Draft', 'give')
+                                : __('Switch to Draft', 'give')}
                         </Button>
                         {isPublished && (
-                            <Button
-                                label={__('View form', 'give')}
-                                href={permalink}
-                                target="_blank"
-                                icon={external}
-                            />
+                            <Button label={__('View form', 'give')} href={permalink} target="_blank" icon={external} />
                         )}
                         <Button
                             onClick={() => onSave('publish')}
@@ -174,8 +181,8 @@ const HeaderContainer = ({
                             {isSaving && 'publish' === isSaving
                                 ? __('Updating...', 'give')
                                 : 'publish' === formSettings.formStatus
-                                    ? __('Update', 'give')
-                                    : __('Publish', 'give')}
+                                ? __('Update', 'give')
+                                : __('Publish', 'give')}
                         </Button>
                         <Button onClick={toggleShowSidebar} isPressed={showSidebar} icon={drawerRight} />
                         <Dropdown
@@ -189,12 +196,12 @@ const HeaderContainer = ({
                                         icon={moreVertical}
                                         onClick={() => {
                                             if (transfer.showTooltip) {
-                                                dispatch(setTransferState({showTooltip: false}))
+                                                dispatch(setTransferState({showTooltip: false}));
                                             }
                                             onToggle();
                                         }}
                                     />
-                                )
+                                );
                             }}
                             renderContent={({onClose}) => (
                                 <div style={{minWidth: '280px', maxWidth: '400px'}}>
@@ -214,7 +221,9 @@ const HeaderContainer = ({
                                         {isMigratedForm && !isTransferredForm && !transfer.showNotice && (
                                             <>
                                                 <MenuItem
-                                                    className={transfer.showTooltip && 'givewp-transfer-selected-menuitem'}
+                                                    className={
+                                                        transfer.showTooltip && 'givewp-transfer-selected-menuitem'
+                                                    }
                                                     onClick={() => {
                                                         dispatch(setTransferState({showTransferModal: true}));
                                                         onClose();
@@ -225,7 +234,10 @@ const HeaderContainer = ({
 
                                                 {transfer.showTooltip && (
                                                     <div className="givewp-transfer-tooltip">
-                                                        {__('Want to transfer donation data later? Access this option in the three dots menu above at any time.', 'give')}
+                                                        {__(
+                                                            'Want to transfer donation data later? Access this option in the three dots menu above at any time.',
+                                                            'give'
+                                                        )}
                                                     </div>
                                                 )}
                                             </>
@@ -236,9 +248,7 @@ const HeaderContainer = ({
                                         href="https://docs.givewp.com/nextgenfeedback"
                                         rel="noopener noreferrer"
                                     >
-                                        <MenuItem icon={external}>
-                                                {__('Submit Feedback', 'give')}
-                                        </MenuItem>
+                                        <MenuItem icon={external}>{__('Submit Feedback', 'give')}</MenuItem>
                                     </ExternalLink>
                                 </div>
                             )}

src/FormBuilder/resources/js/form-builder/src/settings/form-summary/index.js

@@ -3,25 +3,34 @@ import {__} from '@wordpress/i18n';
 import {setFormSettings, useFormState, useFormStateDispatch} from '@givewp/form-builder/stores/form-state';
 
 import {isFormPageEnabled, PageSlugControl} from './page-slug';
+import {cleanForSlug} from '@wordpress/url';
 
+/**
+ * @unreleased dispatch page slug from form title on initial publish.
+ */
 const FormSummarySettings = () => {
     const {
-        settings: {formTitle},
+        settings: {formTitle, pageSlug, formStatus},
     } = useFormState();
     const dispatch = useFormStateDispatch();
+    const isPublished = 'publish' === formStatus;
+    const isTitleSlug = !isPublished && cleanForSlug(formTitle) === pageSlug;
 
     return (
         <PanelBody className={'givewp-panel-body--summary'} title={__('Summary', 'give')} initialOpen={true}>
             <PanelRow>
                 <TextControl
                     label={__('Title')}
                     value={formTitle}
-                    onChange={(formTitle) => dispatch(setFormSettings({formTitle}))}
+                    onChange={(formTitle) => {
+                        !isPublished && dispatch(setFormSettings({pageSlug: cleanForSlug(formTitle)}));
+                        dispatch(setFormSettings({formTitle}));
+                    }}
                 />
             </PanelRow>
             {!!isFormPageEnabled && (
                 <PanelRow>
-                    <PageSlugControl />
+                    <PageSlugControl pageSlug={isTitleSlug ? cleanForSlug(formTitle) : pageSlug} />
                 </PanelRow>
             )}
         </PanelBody>

src/FormBuilder/resources/js/form-builder/src/settings/form-summary/page-slug.js

@@ -1,81 +1,85 @@
 import {Button, Dropdown, ExternalLink, TextControl} from '@wordpress/components';
 import {close, Icon} from '@wordpress/icons';
-import {setFormSettings, useFormState, useFormStateDispatch} from '@givewp/form-builder/stores/form-state';
+import {setFormSettings, useFormStateDispatch} from '@givewp/form-builder/stores/form-state';
 
 import {getWindowData} from '@givewp/form-builder/common';
 import {cleanForSlug, safeDecodeURIComponent} from '@wordpress/url';
-import {useCallback, useState} from '@wordpress/element';
+import {__} from '@wordpress/i18n';
+
+import {useCallback, useEffect, useState} from 'react';
 
 const {
     formPage: {isEnabled, permalink, rewriteSlug},
 } = getWindowData();
 
 /**
+ * @unreleased pass page slug from parent component to support form title as initial slug.
  * @since 3.0.0
  * @see https://github.com/WordPress/gutenberg/blob/a8c5605f5dd077a601aefce6f58409f54d7d4447/packages/editor/src/components/post-slug/index.js
  */
-const PageSlugControl = () => {
-    const {
-        settings: {pageSlug},
-    } = useFormState();
+const PageSlugControl = ({pageSlug}) => {
     const dispatch = useFormStateDispatch();
-  const [editedSlug, setEditedSlug] = useState(safeDecodeURIComponent(pageSlug));
+    const [editedSlug, setEditedSlug] = useState(safeDecodeURIComponent(pageSlug));
+
+    useEffect(() => {
+        setEditedSlug(safeDecodeURIComponent(pageSlug));
+    }, [pageSlug]);
 
-  const updateSlug = useCallback(() => {
-      const cleanEditedSlug = cleanForSlug(editedSlug);
-      setEditedSlug(cleanEditedSlug);
+    const updateSlug = useCallback(() => {
+        const cleanEditedSlug = cleanForSlug(editedSlug);
+        setEditedSlug(cleanEditedSlug);
 
-      if (cleanEditedSlug !== pageSlug) {
-          dispatch(setFormSettings({pageSlug: cleanEditedSlug}));
-      }
-  }, [pageSlug, editedSlug, dispatch]);
+        if (cleanEditedSlug !== pageSlug) {
+            dispatch(setFormSettings({pageSlug: cleanEditedSlug}));
+        }
+    }, [pageSlug, editedSlug, dispatch]);
 
-  return (
-      !!isEnabled && (
-          <Dropdown
-              className="my-container-class-name"
-              contentClassName="givewp-sidebar-dropdown-content"
-              popoverProps={{placement: 'bottom-start'}}
-              focusOnMount={'container'}
-              renderToggle={({isOpen, onToggle}) => (
-                  <TextControl
-                      label={'URL'}
-                      value={'/donations/' + editedSlug}
-                      onChange={() => null}
-                      onClick={onToggle}
-                      aria-expanded={isOpen}
-                  />
-              )}
-              renderContent={({onClose}) => (
-                  <div style={{minWidth: 'calc(var(--givewp-sidebar-width) - 48px)'}}>
-                      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-                          <strong style={{fontSize: '14px'}}>{'URL'}</strong>
-                          <Button onClick={onClose}>
-                              <Icon icon={close} size={14}></Icon>
-                          </Button>
-                      </div>
-                      <TextControl
-                          label={'Permalink'}
-                          value={editedSlug}
-                          autoComplete="off"
-                          spellCheck="false"
-                          onChange={(newPageSlug) => {
-                              setEditedSlug(newPageSlug);
-                          }}
-                          help={'The last part of the URL.'}
-                          onBlur={() => updateSlug()}
-                      />
-                      <div>
-                          <strong style={{fontSize: '14px'}}>View Page</strong>
-                      </div>
-                      <ExternalLink href={permalink} style={{fontSize: '14px'}}>
-                          {sprintf('%s/%s', rewriteSlug, editedSlug)}
-                      </ExternalLink>
-                  </div>
-              )}
-          />
-      )
-  );
+    return (
+        !!isEnabled && (
+            <Dropdown
+                className="my-container-class-name"
+                contentClassName="givewp-sidebar-dropdown-content"
+                popoverProps={{placement: 'bottom-start'}}
+                focusOnMount={'container'}
+                renderToggle={({isOpen, onToggle}) => (
+                    <TextControl
+                        label={__('URL', 'give')}
+                        value={'/donations/' + editedSlug}
+                        onChange={() => null}
+                        onClick={onToggle}
+                        aria-expanded={isOpen}
+                    />
+                )}
+                renderContent={({onClose}) => (
+                    <div style={{minWidth: 'calc(var(--givewp-sidebar-width) - 48px)'}}>
+                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+                            <strong style={{fontSize: '14px'}}>{__('URL', 'give')}</strong>
+                            <Button onClick={onClose}>
+                                <Icon icon={close} size={14}></Icon>
+                            </Button>
+                        </div>
+                        <TextControl
+                            label={__('Permalink', 'give')}
+                            value={editedSlug}
+                            autoComplete="off"
+                            spellCheck="false"
+                            onChange={(newPageSlug) => {
+                                setEditedSlug(newPageSlug);
+                            }}
+                            help={__('The last part of the URL.', 'give')}
+                            onBlur={() => updateSlug()}
+                        />
+                        <div>
+                            <strong style={{fontSize: '14px'}}>View Page</strong>
+                        </div>
+                        <ExternalLink href={permalink} style={{fontSize: '14px'}}>
+                            {sprintf('%s/%s', rewriteSlug, editedSlug)}
+                        </ExternalLink>
+                    </div>
+                )}
+            />
+        )
+    );
 };
 
 export default PageSlugControl;