diff --git a/projects/packages/jetpack-mu-wpcom/changelog/cm-841-surface-login-requirement b/projects/packages/jetpack-mu-wpcom/changelog/cm-841-surface-login-requirement
new file mode 100644
index 000000000000..ab726c9841ed
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/cm-841-surface-login-requirement
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Verbum Comments: explain why commenting is unavailable when login is required but the login options cannot be shown, instead of offering a form that will be rejected.
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php
index 59a7025e7b0a..99e2ead82116 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php
@@ -237,6 +237,7 @@ public function enqueue_assets() {
/* translators: %s is the name of the provider (WordPress, Facebook, Twitter) */
'Logged in via %s' => __( 'Logged in via %s', 'jetpack-mu-wpcom' ),
'Log out' => __( 'Log out', 'jetpack-mu-wpcom' ),
+ 'Your browser is blocking the cookies needed to log in and comment here. Allow cookies in your privacy settings, then reload the page.' => __( 'Your browser is blocking the cookies needed to log in and comment here. Allow cookies in your privacy settings, then reload the page.', 'jetpack-mu-wpcom' ),
'Email' => __( 'Email', 'jetpack-mu-wpcom' ),
'(Address never made public)' => __( '(Address never made public)', 'jetpack-mu-wpcom'), // phpcs:ignore PEAR.Functions.FunctionCallSignature.SpaceBeforeCloseBracket
'Instantly' => __( 'Instantly', 'jetpack-mu-wpcom' ),
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx
index 1b96b5824aad..46e08490fa2a 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/logged-out.tsx
@@ -10,7 +10,6 @@ import type { SocialServiceName } from '../hooks/useSocialLogin';
const { mustLogIn, requireNameEmail, commentRegistration } = VerbumComments;
interface LoggedOutProps {
login: ( service: SocialServiceName ) => void;
- canWeAccessCookies: boolean;
loginWindow: Window | null;
}
@@ -40,7 +39,7 @@ const getLoginCommentText = ( commentParent: Signal ) => {
return { defaultText };
};
-export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOutProps ) => {
+export const LoggedOut = ( { login, loginWindow }: LoggedOutProps ) => {
const [ activeService, setActiveService ] = useState( '' );
const closeLoginPopupService = requireNameEmail && ! mustLogIn ? 'mail' : '';
@@ -82,72 +81,83 @@ export const LoggedOut = ( { login, canWeAccessCookies, loginWindow }: LoggedOut
setActiveService( service );
};
- const { commentParent } = useContext( VerbumSignals );
+ const { canAccessCookies, commentParent, isCommentBlocked } = useContext( VerbumSignals );
return (
- { canWeAccessCookies && (
- <>
-
- { getLoginCommentText( commentParent ) }
-
+ { ( canAccessCookies || mustLogIn ) && (
+
+ { getLoginCommentText( commentParent ) }
+
+ ) }
+ { isCommentBlocked.value && (
+
+ { translate(
+ 'Your browser is blocking the cookies needed to log in and comment here. Allow cookies in your privacy settings, then reload the page.'
+ ) }
+
+ ) }
+ { canAccessCookies && (
+
-
- { Object.entries( serviceData ).map( ( [ service, value ] ) => {
- // Don't show mail login if "Users must be registered and logged in to comment" enabled.
- if ( mustLogIn && service === 'mail' ) {
- // eslint-disable-next-line array-callback-return
- return;
- }
-
- return (
-
- );
- } ) }
-
-
+ { Object.entries( serviceData ).map( ( [ service, value ] ) => {
+ // Don't show mail login if "Users must be registered and logged in to comment" enabled.
+ if ( mustLogIn && service === 'mail' ) {
+ // eslint-disable-next-line array-callback-return
+ return;
+ }
+
+ return (
-