LEDE-2667 Remove Footer Divider & Spacing on Various Blocks

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}

blocks/paragraph/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/paragraph/style.scss

@@ -0,0 +1,5 @@
+.wp-block-wp-newsletter-builder-paragraph {
+  p {
+    margin: 0;
+  }
+}

plugin.php

@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.20
+ * Version: 0.3.21
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2

scss/core-blocks/heading.scss

@@ -6,6 +6,7 @@ h6 {
   font-family: Georgia, serif;
   font-weight: bold;
   line-height: 1.3;
+  margin: 0;
 
   span {
     font-family: Georgia, serif;

scss/core-blocks/image.scss

@@ -1,8 +1,12 @@
 .wp-block-image {
-  margin-bottom: 20px;
+  margin-bottom: 0;
 }
 
 .aligncenter > img {
   margin-left: auto;
   margin-right: auto;
 }
+
+figure {
+  margin: 0;
+}

scss/core-blocks/list.scss

@@ -2,6 +2,7 @@ ul, ol {
   font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.3;
+  margin: 0;
 
   span {
     font-family: Georgia, serif;

scss/core-blocks/paragraph.scss

@@ -2,6 +2,7 @@ p {
   font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.33;
+  margin: 0;
 
   span {
     font-family: Georgia, serif;