WordPress 6.7 compatibility: Add __nextHasNoMarginBottom to controls …

…to prevent deprecation notices (#39877)

projects/js-packages/publicize-components/changelog/update-base-control-bottom-margin-style-deprecation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices.

projects/js-packages/publicize-components/src/components/connection-management/mark-as-shared.tsx

@@ -45,6 +45,7 @@ export function MarkAsShared( { connection }: MarkAsSharedProps ) {
 			onChange={ onChange }
 			disabled={ isUpdating || connection.status === 'broken' }
 			label={ __( 'Mark the connection as shared', 'jetpack' ) }
+			__nextHasNoMarginBottom={ true }
 		/>
 	);
 }

projects/js-packages/publicize-components/src/components/message-box-control/index.js

@@ -55,6 +55,7 @@ export default function MessageBoxControl( {
 				_n( '%d character remaining', '%d characters remaining', charactersRemaining, 'jetpack' ),
 				charactersRemaining
 			) }
+			__nextHasNoMarginBottom={ true }
 		/>
 	);
 }

projects/js-packages/publicize-components/src/components/panel/index.jsx

@@ -68,6 +68,7 @@ const PublicizePanel = ( { prePublish, children } ) => {
 							onChange={ togglePublicizeFeature }
 							checked={ isPublicizeEnabled && hasConnections }
 							disabled={ ! hasConnections }
+							__nextHasNoMarginBottom={ true }
 						/>
 					) }
 

projects/js-packages/publicize-components/src/components/social-image-generator/panel/index.js

@@ -51,6 +51,7 @@ const SocialImageGeneratorPanel = ( { prePublish = false } ) => {
 				help={ ! isEnabled ? __( 'Social Image is disabled for this post.', 'jetpack' ) : '' }
 				checked={ isEnabled }
 				onChange={ setIsEnabled }
+				__nextHasNoMarginBottom={ true }
 			/>
 			{ isEnabled && (
 				<>

projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js

@@ -70,6 +70,7 @@ const SocialImageGeneratorSettingsModal = ( { onClose } ) => {
 						{ label: __( 'No Image', 'jetpack' ), value: 'none' },
 					] }
 					onChange={ setEditedImageType }
+					__nextHasNoMarginBottom={ true }
 				/>
 
 				{ localImageType === 'custom' && (
@@ -92,6 +93,7 @@ const SocialImageGeneratorSettingsModal = ( { onClose } ) => {
 						'By default the post title is used for the image. You can use this field to set your own text.',
 						'jetpack'
 					) }
+					__nextHasNoMarginBottom={ true }
 				/>
 				<BaseControl __nextHasNoMarginBottom={ true } className={ styles.templateControl }>
 					<BaseControl.VisualLabel>{ __( 'Templates', 'jetpack' ) }</BaseControl.VisualLabel>

projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx

@@ -98,6 +98,7 @@ export function PreviewSection() {
 										}
 										checked={ isEnabled }
 										onChange={ toggleConnection( tab.connection_id, tab ) }
+										__nextHasNoMarginBottom={ true }
 									/>
 								) : null
 							}

projects/packages/forms/changelog/update-base-control-bottom-margin-style-deprecation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices.

projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-plugin-state.js

@@ -126,6 +126,7 @@ const CRMPluginIsActive = ( { crmData, setCRMData, jetpackCRM, setAttributes } )
 			checked={ jetpackCRM }
 			onChange={ value => setAttributes( { jetpackCRM: value } ) }
 			help={ __( 'Store contact form submissions in your CRM.', 'jetpack-forms' ) }
+			__nextHasNoMarginBottom={ true }
 		/>
 	);
 };

projects/packages/forms/src/blocks/contact-form/components/jetpack-crm-integration/jetpack-crm-integration-settings.js

@@ -65,7 +65,7 @@ const CRMPluginData = ( { jetpackCRM, setAttributes } ) => {
 
 const CRMIntegrationSettings = ( { jetpackCRM, setAttributes } ) => {
 	return (
-		<BaseControl>
+		<BaseControl __nextHasNoMarginBottom={ true }>
 			<CRMPluginData jetpackCRM={ jetpackCRM } setAttributes={ setAttributes } />
 		</BaseControl>
 	);

projects/packages/forms/src/blocks/contact-form/components/jetpack-email-connection-settings.js

@@ -109,6 +109,7 @@ const JetpackEmailConnectionSettings = ( {
 					'You can enter multiple email addresses separated by commas.',
 					'jetpack-forms'
 				) }
+				__nextHasNoMarginBottom={ true }
 			/>
 
 			<HelpMessage isError id={ `contact-form-${ instanceId }-email-error` }>
@@ -120,6 +121,7 @@ const JetpackEmailConnectionSettings = ( {
 				value={ emailSubject }
 				placeholder={ __( 'Enter a subject', 'jetpack-forms' ) }
 				onChange={ newSubject => setAttributes( { subject: newSubject } ) }
+				__nextHasNoMarginBottom={ true }
 			/>
 		</>
 	);

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js

@@ -63,6 +63,7 @@ function JetpackFieldCheckbox( props ) {
 							label={ __( 'Checked by default', 'jetpack-forms' ) }
 							checked={ defaultValue }
 							onChange={ value => setAttributes( { defaultValue: value ? 'true' : '' } ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 					</PanelBody>
 				</InspectorControls>
@@ -77,6 +78,7 @@ function JetpackFieldCheckbox( props ) {
 							checked={ required }
 							onChange={ value => setAttributes( { required: value } ) }
 							help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 						<JetpackFieldWidth setAttributes={ setAttributes } width={ width } />
 
@@ -85,6 +87,7 @@ function JetpackFieldCheckbox( props ) {
 							checked={ attributes.shareFieldAttributes }
 							onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
 							help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 					</PanelBody>
 					<PanelColorSettings

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js

@@ -54,6 +54,7 @@ const JetpackFieldConsent = ( {
 						checked={ attributes.shareFieldAttributes }
 						onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
 						help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+						__nextHasNoMarginBottom={ true }
 					/>
 				</PanelBody>
 				<PanelColorSettings
@@ -68,7 +69,7 @@ const JetpackFieldConsent = ( {
 					] }
 				/>
 				<PanelBody title={ __( 'Consent Settings', 'jetpack-forms' ) }>
-					<BaseControl>
+					<BaseControl __nextHasNoMarginBottom={ true }>
 						<SelectControl
 							label={ __( 'Permission to email', 'jetpack-forms' ) }
 							value={ consentType }
@@ -77,6 +78,7 @@ const JetpackFieldConsent = ( {
 								{ label: __( 'Add a privacy checkbox', 'jetpack-forms' ), value: 'explicit' },
 							] }
 							onChange={ value => setAttributes( { consentType: value } ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 					</BaseControl>
 				</PanelBody>

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js

@@ -113,6 +113,7 @@ const JetpackFieldControls = ( {
 			checked={ required }
 			onChange={ value => setAttributes( { required: value } ) }
 			help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }
+			__nextHasNoMarginBottom={ true }
 		/>,
 		! hidePlaceholder && (
 			<TextControl
@@ -124,6 +125,7 @@ const JetpackFieldControls = ( {
 					'Show visitors an example of the type of content expected. Otherwise, leave blank.',
 					'jetpack-forms'
 				) }
+				__nextHasNoMarginBottom={ true }
 			/>
 		),
 		<JetpackFieldWidth key="width" setAttributes={ setAttributes } width={ width } />,
@@ -133,6 +135,7 @@ const JetpackFieldControls = ( {
 			checked={ attributes.shareFieldAttributes }
 			onChange={ value => setAttributes( { shareFieldAttributes: value } ) }
 			help={ __( 'Deactivate for individual styling of this block', 'jetpack-forms' ) }
+			__nextHasNoMarginBottom={ true }
 		/>,
 	];
 
@@ -203,6 +206,7 @@ const JetpackFieldControls = ( {
 								onChange={ setNumberAttribute( 'buttonBorderWidth' ) }
 								min={ 0 }
 								max={ 100 }
+								__nextHasNoMarginBottom={ true }
 							/>
 							<RangeControl
 								label={ __( 'Button Border Radius', 'jetpack-forms' ) }
@@ -211,6 +215,7 @@ const JetpackFieldControls = ( {
 								onChange={ setNumberAttribute( 'buttonBorderRadius' ) }
 								min={ 0 }
 								max={ 100 }
+								__nextHasNoMarginBottom={ true }
 							/>
 						</>
 					) }
@@ -223,6 +228,7 @@ const JetpackFieldControls = ( {
 								onChange={ setNumberAttribute( 'borderWidth' ) }
 								min={ 0 }
 								max={ 100 }
+								__nextHasNoMarginBottom={ true }
 							/>
 							<RangeControl
 								label={ __( 'Border Radius', 'jetpack-forms' ) }
@@ -231,6 +237,7 @@ const JetpackFieldControls = ( {
 								onChange={ setNumberAttribute( 'borderRadius' ) }
 								min={ 0 }
 								max={ 100 }
+								__nextHasNoMarginBottom={ true }
 							/>
 						</>
 					) }
@@ -266,6 +273,7 @@ const JetpackFieldControls = ( {
 						"Customize the input's name/ID. Only alphanumeric, dash and underscore characters are allowed",
 						'jetpack-forms'
 					) }
+					__nextHasNoMarginBottom={ true }
 				/>
 			</InspectorAdvancedControls>
 		</>

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js

@@ -97,6 +97,7 @@ const JetpackDatePicker = props => {
 									'Select the format in which the date will be displayed.',
 									'jetpack-forms'
 								) }
+								__nextHasNoMarginBottom={ true }
 							/>
 						),
 					},

projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js

@@ -9,6 +9,7 @@ export default function JetpackFieldWidth( { setAttributes, width } ) {
 				'jetpack-forms'
 			) }
 			className="jetpack-field-label__width"
+			__nextHasNoMarginBottom={ true }
 		>
 			<BaseControl.VisualLabel>{ __( 'Field Width', 'jetpack-forms' ) }</BaseControl.VisualLabel>
 			<ButtonGroup aria-label={ __( 'Field Width', 'jetpack-forms' ) }>

projects/packages/forms/src/blocks/contact-form/components/jetpack-newsletter-integration-settings.js

@@ -4,7 +4,7 @@ import CreativeMailPlugin from './jetpack-newsletter-integration-settings-creati
 
 const NewsletterIntegrationSettings = () => {
 	return (
-		<BaseControl>
+		<BaseControl __nextHasNoMarginBottom={ true }>
 			<ConsentBlockSettings />
 			<CreativeMailPlugin />
 		</BaseControl>

projects/packages/forms/src/blocks/contact-form/components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings.js

@@ -129,14 +129,15 @@ export default ( { salesforceData, setAttributes, instanceId } ) => {
 	return (
 		<Fragment>
 			<PanelBody title={ __( 'Salesforce', 'jetpack-forms' ) } initialOpen={ true }>
-				<BaseControl>
+				<BaseControl __nextHasNoMarginBottom={ true }>
 					<TextControl
 						label={ __( 'Organization ID', 'jetpack-forms' ) }
 						value={ salesforceData.organizationId || '' }
 						placeholder={ __( 'Enter your Organization ID', 'jetpack-forms' ) }
 						onBlur={ onBlurOrgIdField }
 						onChange={ setOrganizationId }
 						help={ __( 'Enter the Salesforce organization ID to send Leads to.', 'jetpack-forms' ) }
+						__nextHasNoMarginBottom={ true }
 					/>
 					{ organizationIdError && (
 						<HelpMessage isError id={ `contact-form-${ instanceId }-email-error` }>

projects/packages/forms/src/blocks/contact-form/edit.js

@@ -174,6 +174,7 @@ export const JetpackContactFormEdit = forwardRef(
 							{ label: __( 'Redirect to another webpage', 'jetpack-forms' ), value: 'redirect' },
 						] }
 						onChange={ newMessage => setAttributes( { customThankyou: newMessage } ) }
+						__nextHasNoMarginBottom={ true }
 					/>
 
 					{ 'redirect' !== customThankyou && (
@@ -182,6 +183,7 @@ export const JetpackContactFormEdit = forwardRef(
 							value={ customThankyouHeading }
 							placeholder={ __( 'Your message has been sent', 'jetpack-forms' ) }
 							onChange={ newHeading => setAttributes( { customThankyouHeading: newHeading } ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 					) }
 
@@ -191,13 +193,15 @@ export const JetpackContactFormEdit = forwardRef(
 							value={ customThankyouMessage }
 							placeholder={ __( 'Thank you for your submission!', 'jetpack-forms' ) }
 							onChange={ newMessage => setAttributes( { customThankyouMessage: newMessage } ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 					) }
 
 					{ 'redirect' === customThankyou && (
 						<BaseControl
 							label={ __( 'Redirect Address', 'jetpack-forms' ) }
 							id={ `contact-form-${ instanceId }-thankyou-url` }
+							__nextHasNoMarginBottom={ true }
 						>
 							<URLInput
 								id={ `contact-form-${ instanceId }-thankyou-url` }

projects/packages/my-jetpack/_inc/components/welcome-flow/EvaluationStep.tsx

@@ -64,6 +64,7 @@ const EvaluationStep = ( {
 							label={ question }
 							checked={ values[ key ] }
 							onChange={ setChecked( key ) }
+							__nextHasNoMarginBottom={ true }
 						/>
 					) ) }
 					<div className={ styles[ 'form-actions' ] }>

projects/packages/my-jetpack/changelog/update-base-control-bottom-margin-style-deprecation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices.

projects/packages/search/changelog/update-base-control-bottom-margin-style-deprecation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices.

projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.jsx

@@ -58,6 +58,7 @@ export default function ExcludedPostTypesControl( {
 					label={ VALID_POST_TYPES[ type ].name }
 					onChange={ changeHandler( type ) }
 					value={ type }
+					__nextHasNoMarginBottom={ true }
 				/>
 			) ) }
 		</div>

projects/packages/search/src/customberg/components/sidebar/sidebar-options.jsx

@@ -104,6 +104,7 @@ export default function SidebarOptions() {
 					value={ sort }
 					options={ sortOptions }
 					onChange={ setSort }
+					__nextHasNoMarginBottom={ true }
 				/>
 				<SelectControl
 					className="jp-search-configure-overlay-trigger-select"
@@ -121,6 +122,7 @@ export default function SidebarOptions() {
 						},
 					] }
 					onChange={ setTrigger }
+					__nextHasNoMarginBottom={ true }
 				/>
 				<ToggleControl
 					className="jp-search-configure-filtering-opens-overlay-toggle"
@@ -132,6 +134,7 @@ export default function SidebarOptions() {
 					) }
 					label={ __( 'Open overlay from filter links', 'jetpack-search-pkg' ) }
 					onChange={ setFilteringOpensOverlay }
+					__nextHasNoMarginBottom={ true }
 				/>
 				<ExcludedPostTypesControl
 					disabled={ isDisabled }
@@ -147,13 +150,15 @@ export default function SidebarOptions() {
 					disabled={ isDisabled }
 					label={ __( 'Show sort selector', 'jetpack-search-pkg' ) }
 					onChange={ setSortEnabled }
+					__nextHasNoMarginBottom={ true }
 				/>
 				<ToggleControl
 					className="jp-search-configure-infinite-scroll-toggle"
 					checked={ infiniteScroll }
 					disabled={ isDisabled }
 					label={ __( 'Enable infinite scroll', 'jetpack-search-pkg' ) }
 					onChange={ setInfiniteScroll }
+					__nextHasNoMarginBottom={ true }
 				/>
 				{ 'expanded' === resultFormat && (
 					<ToggleControl
@@ -162,6 +167,7 @@ export default function SidebarOptions() {
 						disabled={ isDisabled }
 						label={ __( 'Show post date', 'jetpack-search-pkg' ) }
 						onChange={ setPostDate }
+						__nextHasNoMarginBottom={ true }
 					/>
 				) }
 				{ ! isFreePlan && (
@@ -171,6 +177,7 @@ export default function SidebarOptions() {
 						disabled={ isDisabled }
 						label={ __( 'Show "Powered by Jetpack"', 'jetpack-search-pkg' ) }
 						onChange={ setShowLogo }
+						__nextHasNoMarginBottom={ true }
 					/>
 				) }
 			</PanelBody>

projects/packages/videopress/changelog/update-base-control-bottom-margin-style-deprecation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: Add __nextHasNoMarginBottom to BaseControl-based components, preventing deprecation notices.

projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx

@@ -371,6 +371,7 @@ const EditVideoDetails = () => {
 												value: VIDEO_PRIVACY_LEVEL_PRIVATE,
 											},
 										] }
+										__nextHasNoMarginBottom={ true }
 									/>
 								) }
 								{ isFetchingData ? (
@@ -388,6 +389,7 @@ const EditVideoDetails = () => {
 												'jetpack-videopress-pkg'
 											) }
 											onChange={ value => setDisplayEmbed( value ? 1 : 0 ) }
+											__nextHasNoMarginBottom={ true }
 										/>
 									</>
 								) }
@@ -406,6 +408,7 @@ const EditVideoDetails = () => {
 												'jetpack-videopress-pkg'
 											) }
 											onChange={ value => setAllowDownload( value ? 1 : 0 ) }
+											__nextHasNoMarginBottom={ true }
 										/>
 									</>
 								) }