fix(plugin-seo): titles being displayed twice (#8310)

Author: paulpopus

packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx

@@ -100,7 +100,13 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
         }}
       >
         <div className="plugin-seo__field">
-          <FieldLabel field={null} Label={Label} label={label} {...(labelProps || {})} />
+          <FieldLabel
+            field={null}
+            Label={Label}
+            label={label}
+            required={required}
+            {...(labelProps || {})}
+          />
           {hasGenerateDescriptionFn && (
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
@@ -151,7 +157,6 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
             Component: null,
             RenderedComponent: errorMessage,
           }}
-          label={label}
           onChange={setValue}
           path={pathFromContext}
           required={required}

packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -102,7 +102,13 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
         }}
       >
         <div className="plugin-seo__field">
-          <FieldLabel field={null} Label={Label} label={label} {...(labelProps || {})} />
+          <FieldLabel
+            field={null}
+            Label={Label}
+            label={label}
+            required={required}
+            {...(labelProps || {})}
+          />
           {hasGenerateImageFn && (
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
@@ -151,7 +157,6 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
             RenderedComponent: errorMessage,
           }}
           filterOptions={field.filterOptions}
-          label={undefined}
           onChange={(incomingImage) => {
             if (incomingImage !== null) {
               if (typeof incomingImage === 'object') {

packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx

@@ -37,11 +37,11 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
       label,
       required,
     },
+    field: fieldFromProps,
     hasGenerateTitleFn,
     labelProps,
   } = props || {}
   const { path: pathFromContext } = useFieldProps()
-
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
   const field: FieldType<string> = useField({
@@ -98,7 +98,13 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
         }}
       >
         <div className="plugin-seo__field">
-          <FieldLabel field={null} Label={Label} label={label} {...(labelProps || {})} />
+          <FieldLabel
+            field={fieldFromProps}
+            Label={Label}
+            label={label}
+            required={required}
+            {...(labelProps || {})}
+          />
           {hasGenerateTitleFn && (
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
@@ -150,7 +156,6 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
             Component: null,
             RenderedComponent: errorMessage,
           }}
-          label={label}
           onChange={setValue}
           path={pathFromContext}
           required={required}

packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx

@@ -78,7 +78,11 @@ export const PreviewComponent: React.FC<PreviewProps> = (props) => {
   }, [fields, href, locale, docInfo, hasGenerateURLFn, getData])
 
   return (
-    <div>
+    <div
+      style={{
+        marginBottom: '20px',
+      }}
+    >
       <div>{t('plugin-seo:preview')}</div>
       <div
         style={{

packages/plugin-seo/src/index.tsx

@@ -28,7 +28,7 @@ export const seoPlugin =
           OverviewField({}),
           MetaTitleField({
             hasGenerateFn: typeof pluginConfig?.generateTitle === 'function',
-            overrides: pluginConfig?.fieldOverrides?.title as unknown as TextField,
+            overrides: pluginConfig?.fieldOverrides?.title,
           }),
           MetaDescriptionField({
             hasGenerateFn: typeof pluginConfig?.generateDescription === 'function',

test/plugin-seo/collections/PagesWithImportedFields.ts

@@ -65,6 +65,9 @@ export const PagesWithImportedFields: CollectionConfig = {
           fields: [
             MetaTitleField({
               hasGenerateFn: true,
+              overrides: {
+                required: true,
+              },
             }),
             PreviewField({
               hasGenerateFn: true,