fix: update styles

Author: chickenn00dle

src/blocks/content-gate-countdown/block.json

@@ -1,11 +1,7 @@
 {
   "name": "newspack/content-gate-countdown",
   "category": "newspack",
-  "attributes": {
-    "text": {
-      "type": "string"
-    }
-  },
+  "attributes": {},
   "supports": {
     "html": false,
     "color": {

src/blocks/content-gate-countdown/class-content-gate-countdown-block.php

@@ -67,9 +67,9 @@ public static function render_block( array $attributes, string $content, $block
 			Metering::get_metering_period()
 		);
 		$text    = isset( $attributes['text'] ) ? $attributes['text'] : __( 'Get unlimited access.', 'newspack-plugin' );
-		$buttons = '';
+		$actions = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
-			$buttons .= $inner_block->render();
+			$actions .= $inner_block->render();
 		}
 		$block_wrapper_attributes = get_block_wrapper_attributes(
 			[
@@ -79,12 +79,11 @@ public static function render_block( array $attributes, string $content, $block
 		$block_content = "<div $block_wrapper_attributes>
 			<div class='newspack-content-gate-countdown__content'>
 				<div class='newspack-content-gate-countdown__notice'>
-					<span class='newspack-content-gate-countdown__views'>$remaining_views / $total_views</span>
+					<span class='newspack-content-gate-countdown__countdown'>$remaining_views / $total_views</span>
 					<p>$notice</p>
 				</div>
 				<div class='newspack-content-gate-countdown__actions'>
-					<p>$text</p>
-					$buttons
+					$actions
 				</div>
 			</div>
 		</div>";

src/blocks/content-gate-countdown/edit.jsx

@@ -1,60 +1,33 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, InspectorControls, InnerBlocks, RichText } from '@wordpress/block-editor';
-import { PanelBody, TextareaControl } from '@wordpress/components';
+import { useBlockProps, InspectorControls, InnerBlocks } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Edit function for the Content Gate Countdown block.
  *
- * @param {Object}   props               The block properties.
- * @param {Object}   props.attributes    The block attributes.
- * @param {Function} props.setAttributes The block attributes setter.
- *
  * @return {JSX.Element} The Content Gate Countdown block.
  */
-export default function Edit( { attributes, setAttributes } ) {
+export default function Edit() {
 	const blockProps = useBlockProps();
-	const { text } = attributes;
-
-	const handleChange = ( key, value ) => {
-		setAttributes( { [ key ]: value } );
-	};
 
 	return (
 		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Content Gate Countdown Settings', 'newspack-plugin' ) }>
-					<TextareaControl
-						label={ __( 'Text', 'newspack-plugin' ) }
-						value={ text }
-						onChange={ value => handleChange( 'text', value ) }
-						placeholder={ __( 'Get unlimited access.', 'newspack-plugin' ) }
-						help={ __( 'The call to action text that appears above the subscribe button.', 'newspack-plugin' ) }
-					/>
-				</PanelBody>
-			</InspectorControls>
-
-			<div { ...blockProps }>
-				<div className="wp-block-newspack-content-gate-countdown__content">
-					<div className="wp-block-newspack-content-gate-countdown__notice">
-						{ ' ' }
-						<span className="wp-block-newspack-content-gate-countdown__views">3 / 3</span>
+			<InspectorControls />
+			<div className="newspack-content-gate-countdown" { ...blockProps }>
+				<div className="newspack-content-gate-countdown__content">
+					<div className="newspack-content-gate-countdown__notice">
+						<span className="newspack-content-gate-countdown__countdown">3 / 3</span>
 						<p>{ __( 'remaining articles this month.', 'newspack-plugin' ) }</p>
 					</div>
-					<div className="wp-blocks-newspack-content-gate-countdown__actions">
-						<RichText
-							tagName="div"
-							className="wp-block-newspack-blocks-content-gate-countdown__text"
-							value={ text }
-							onChange={ value => handleChange( 'text', value ) }
-							placeholder={ __( 'CTA text…', 'newspack-plugin' ) }
-							allowedFormats={ [] }
-						/>
+					<div className="newspack-content-gate-countdown__actions">
 						<InnerBlocks
-							allowedBlocks={ [ 'newspack-blocks/checkout-button', 'core/buttons' ] }
-							template={ [ [ 'newspack-blocks/checkout-button', { text: __( 'Subscribe now', 'newspack-plugin' ) } ] ] }
+							allowedBlocks={ [ 'newspack-blocks/checkout-button', 'core/buttons', 'core/paragraph' ] }
+							template={ [
+								[ 'core/paragraph', { content: __( 'Get unlimited access.', 'newspack-plugin' ) } ],
+								[ 'newspack-blocks/checkout-button', { text: __( 'Subscribe now', 'newspack-plugin' ) } ],
+							] }
 						/>
 					</div>
 				</div>

src/blocks/content-gate-countdown/style.scss

@@ -1,19 +1,36 @@
 .newspack-content-gate-countdown {
 	width: 100%;
-	padding: 1rem;
 
 	&__content {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		padding: 1rem;
+	}
+
+	&__notice {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	&__countdown {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		margin-left: 1rem;
+		font-weight: bold;
+	}
+
+	&__actions {
+		width: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		flex: 1;
-
-		p {
-			color: #333;
-			margin: 0 0 0.5rem 0;
-			font-size: 1rem;
-			line-height: 1.4;
-		}
 	}
 }