Merge pull request #144 from alleyinteractive/feature/LEDE-2667/wp-cleanup-spacing

LEDE-2667 Remove Footer Divider & Spacing on Various Blocks

Author: cahdeemer

blocks/footer/edit.tsx

@@ -4,7 +4,6 @@
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
  */
 import { __ } from '@wordpress/i18n';
-import classNames from 'classnames';
 
 /**
  * React hook that is used to mark the block wrapper element.
@@ -19,12 +18,6 @@ import { Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
-interface EditProps {
-  attributes: {
-    narrow_separator: boolean,
-  };
-}
-
 interface FooterSettings {
   facebook_url: string,
   twitter_url: string,
@@ -42,11 +35,7 @@ interface FooterSettings {
  *
  * @return {WPElement} Element to render.
  */
-export default function Edit({
-  attributes: {
-    narrow_separator: narrowSeparator = false,
-  },
-}: EditProps) {
+export default function Edit() {
   const [isLoading, setIsLoading] = useState(true);
   const [footerSettings, setFooterSettings] = useState<FooterSettings>();
 
@@ -79,10 +68,6 @@ export default function Edit({
 
   return (
     <div {...useBlockProps()}>
-      <hr className={
-        classNames('wp-block-separator', 'has-alpha-channel-opacity', { 'is-style-wide': !narrowSeparator })
-      }
-      />
       {isLoading
         ? (
           /* @ts-ignore */

blocks/footer/render.php

@@ -18,12 +18,8 @@
 $nb_image_id         = $nb_footer_settings['image'] ?? 0;
 $nb_address          = $nb_footer_settings['address'] ?? '';
 $nb_has_social_links = ! empty( $nb_facebook_url ) || ! empty( $nb_twitter_url ) || ! empty( $nb_instagram_url ) || ! empty( $nb_youtube_url );
-$nb_narrow_separator = ! empty( $attributes['narrow_separator'] );
-$nb_separator_class  = $nb_narrow_separator ? '' : 'is-style-wide';
 ?>
 <div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?> align="center">
-	<hr class="wp-block-separator has-alpha-channel-opacity <?php echo esc_attr( $nb_separator_class ); ?>" />
-
 	<?php if ( $nb_has_social_links ) : ?>
 		<div class="wp-block-wp-newsletter-builder-footer__social-links">
 			<?php if ( ! empty( $nb_facebook_url ) ) : ?>

blocks/header/style.scss

@@ -12,8 +12,6 @@
  */
 
 .wp-block-wp-newsletter-builder-header {
-  margin-bottom: 20px;
-  margin-top: 6px;
   // @TODO: style alt text.
 
   &__placeholder {

blocks/heading/edit.tsx

@@ -61,7 +61,7 @@ export default function Edit({
           />
         </PanelBody>
       </InspectorControls>
-      <div {...useBlockProps({ className: 'newsletter-heading', style: headingStyles })}>
+      <div {...useBlockProps({ className: 'wp-block-wp-newsletter-builder-heading', style: headingStyles })}>
         <InnerBlocks
           // @ts-ignore
           template={TEMPLATE}

blocks/heading/index.tsx

@@ -13,8 +13,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-// Uncomment this line if you want to import a CSS file for this block.
-// import './style.scss';
+import './style.scss';
 
 /**
  * Internal dependencies

blocks/heading/style.scss

@@ -0,0 +1,5 @@
+.wp-block-wp-newsletter-builder-heading {
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+  }
+}

blocks/list/edit.tsx

@@ -61,7 +61,7 @@ export default function Edit({
           />
         </PanelBody>
       </InspectorControls>
-      <div {...useBlockProps({ className: 'newsletter-list', style: listStyles })}>
+      <div {...useBlockProps({ className: 'wp-block-wp-newsletter-builder-list', style: listStyles })}>
         <InnerBlocks
           // @ts-ignore
           template={TEMPLATE}

blocks/list/index.tsx

@@ -13,8 +13,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
-// Uncomment this line if you want to import a CSS file for this block.
-// import './style.scss';
+import './style.scss';
 
 /**
  * Internal dependencies

blocks/list/style.scss

@@ -0,0 +1,5 @@
+.wp-block-wp-newsletter-builder-list {
+  ul, ol {
+    margin: 0;
+  }
+}

blocks/paragraph/edit.tsx

@@ -61,7 +61,7 @@ export default function Edit({
           />
         </PanelBody>
       </InspectorControls>
-      <div {...useBlockProps({ className: 'newsletter-paragraph', style: paragraphStyles })}>
+      <div {...useBlockProps({ className: 'wp-block-wp-newsletter-builder-paragraph', style: paragraphStyles })}>
         <InnerBlocks
           // @ts-ignore
           template={TEMPLATE}