[MOOSE-353]: Add new announcements settings

wp-content/plugins/core/src/Components/Blocks/Announcements/Announcement_Block_Controller.php

@@ -15,6 +15,7 @@ class Announcement_Block_Controller extends Abstract_Block_Controller {
 	protected string $cta_link;
 	protected string $cta_style;
 	protected string $text_alignment;
+	protected string $orientation;
 	protected string $theme;
 	protected bool $dismissible;
 
@@ -28,13 +29,18 @@ public function __construct( array $args = [] ) {
 		$this->cta_link        = $this->attributes['ctaLink'] ?? '';
 		$this->cta_style       = $this->attributes['ctaStyle'] ?? 'outlined';
 		$this->text_alignment  = $this->attributes['textAlignment'] ?? 'center';
+		$this->orientation     = $this->attributes['orientation'] ?? 'horizontal';
 		$this->theme           = $this->attributes['theme'] ?? 'brand';
 		$this->dismissible     = $this->attributes['dismissible'] ?? false;
 
 		// set classes
 		$this->block_classes .= " b-announcement--theme-{$this->theme}";
 		$this->block_classes .= " b-announcement--align-{$this->text_alignment}";
 
+		if ( 'vertical' === $this->orientation ) {
+			$this->block_classes .= ' b-announcement--orientation-vertical';
+		}
+
 		if ( ! in_array( $this->theme, self::DARK_THEMES ) ) {
 			return;
 		}

wp-content/plugins/core/src/Components/Blocks/Announcements/Announcement_Renderer.php

@@ -88,6 +88,7 @@ private function get_announcement_attributes( \WP_Post $announcement ): array {
 			'ctaLink'        => $link['url'] ?? null,
 			'ctaStyle'       => get_field( Announcement_Meta::CTA_STYLE, $announcement->ID ) ?? 'outlined',
 			'textAlignment'  => get_field( Announcement_Meta::ALIGNMENT, $announcement->ID ) ?? 'center',
+			'orientation'    => get_field( Announcement_Meta::ORIENTATION, $announcement->ID ) ?? Announcement_Meta::ORIENTATION_HORIZONTAL,
 			'theme'          => get_field( Announcement_Meta::COLOR_THEME, $announcement->ID ) ?? 'brand',
 			'dismissible'    => (bool) get_field( Announcement_Meta::DISMISSIBLE, $announcement->ID ),
 		];

wp-content/plugins/core/src/Object_Meta/Post_Types/Announcement_Meta.php

@@ -39,6 +39,9 @@ class Announcement_Meta extends Meta_Object {
 	public const string ALIGNMENT_CENTER                = 'center';
 	public const string ALIGNMENT                       = 'alignment';
 	public const string ALIGNMENT_LEFT                  = 'left';
+	public const string ORIENTATION                     = 'orientation';
+	public const string ORIENTATION_HORIZONTAL          = 'horizontal';
+	public const string ORIENTATION_VERTICAL            = 'vertical';
 	public const string DISPLAY_TAB                     = 'display_tab';
 	public const string PLACEMENT                       = 'placement';
 	public const string PLACEMENT_ABOVE                 = 'placement_above';
@@ -100,6 +103,13 @@ public function get_fields(): array {
 					self::ALIGNMENT_CENTER => esc_html__( 'Center', 'tribe' ),
 				] )
 				->default( self::ALIGNMENT_CENTER ),
+			RadioButton::make( esc_html__( 'Orientation', 'tribe' ), self::ORIENTATION )
+				->choices( [
+					self::ORIENTATION_HORIZONTAL => esc_html__( 'Horizontal', 'tribe' ),
+					self::ORIENTATION_VERTICAL   => esc_html__( 'Vertical', 'tribe' ),
+				] )
+				->default( self::ORIENTATION_HORIZONTAL )
+				->helperText( esc_html__( 'Desktop layout. On mobile, content is always stacked.', 'tribe' ) ),
 
 			Tab::make( esc_html__( 'Display', 'tribe' ), self::DISPLAY_TAB )
 				->placement( 'left' ),

wp-content/themes/core/blocks/tribe/announcements/block.json

@@ -43,6 +43,11 @@
 			"default": "center",
 			"enum": [ "left", "center" ]
 		},
+		"orientation": {
+			"type": "string",
+			"default": "horizontal",
+			"enum": [ "horizontal", "vertical" ]
+		},
 		"dismissible": {
 			"type": "boolean",
 			"default": false

wp-content/themes/core/blocks/tribe/announcements/edit.js

@@ -24,6 +24,7 @@ export default function Edit( { attributes, setAttributes } ) {
 		ctaStyle,
 		theme,
 		textAlignment,
+		orientation,
 		dismissible,
 	} = attributes;
 
@@ -34,6 +35,9 @@ export default function Edit( { attributes, setAttributes } ) {
 		'b-announcement',
 		`b-announcement--theme-${ theme }`,
 		`b-announcement--align-${ textAlignment }`,
+		orientation === 'vertical'
+			? 'b-announcement--orientation-vertical'
+			: '',
 		isDark ? 'is-style-dark' : '',
 	]
 		.filter( Boolean )
@@ -141,6 +145,29 @@ export default function Edit( { attributes, setAttributes } ) {
 							setAttributes( { textAlignment: value } )
 						}
 					/>
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Orientation', 'tribe' ) }
+						help={ __(
+							'Desktop layout: horizontal places heading, body, and CTA in one row. Vertical stacks them. On mobile, content is always stacked.',
+							'tribe'
+						) }
+						value={ orientation }
+						options={ [
+							{
+								label: __( 'Horizontal', 'tribe' ),
+								value: 'horizontal',
+							},
+							{
+								label: __( 'Vertical', 'tribe' ),
+								value: 'vertical',
+							},
+						] }
+						onChange={ ( value ) =>
+							setAttributes( { orientation: value } )
+						}
+					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Dismissible', 'tribe' ) }

wp-content/themes/core/blocks/tribe/announcements/style.pcss

@@ -6,8 +6,9 @@
 
 .b-announcement {
 	--vertical-padding: 16px;
+	container: announcement / inline-size;
 	display: none;
-	justify-content: flex-start;
+	justify-content: center;
 	position: relative;
 	padding: var(--vertical-padding) var(--grid-margin);
 	background-color: var(--color-blue);
@@ -34,7 +35,7 @@
 		color: var(--color-black);
 	}
 
-	@media (--mq-navigation) {
+	@container announcement (min-width: 960px) {
 		justify-content: center;
 	}
 }
@@ -55,10 +56,33 @@
 		padding-right: calc(var(--announcement-dismiss-width, 0px) + var(--spacer-30)); /* stylelint-disable-line */
 	}
 
-	@media (--mq-navigation) {
+	@container announcement (min-width: 960px) {
 		flex-direction: row;
 		align-items: center;
 	}
+
+	/* CASE: Vertical Orientation */
+	.b-announcement--orientation-vertical & {
+		flex-direction: column;
+		align-items: flex-start;
+
+		> * {
+			width: 100%;
+			max-width: var(--grid-wide-width);
+		}
+	}
+
+	/* CASE: Vertical Orientation & Align Content Center */
+	.b-announcement--orientation-vertical.b-announcement--align-center & {
+
+		@container announcement (min-width: 960px) {
+			text-align: center;
+
+			.b-announcement__cta-wrapper {
+				justify-content: center;
+			}
+		}
+	}
 }
 
 /* -----------------------------------------------------------------------
@@ -97,10 +121,19 @@
 	top: var(--vertical-padding);
 	right: var(--grid-margin);
 
-	@media (--mq-navigation) {
+	@container announcement (min-width: 960px) {
 		top: 50%;
 		transform: translateY(-50%);
 	}
+
+	/* CASE: Vertical Orientation */
+	.b-announcement--orientation-vertical & {
+
+		@container announcement (min-width: 960px) {
+			top: var(--vertical-padding);
+			transform: none;
+		}
+	}
 }
 
 /* -----------------------------------------------------------------------
@@ -137,15 +170,15 @@
 		}
 	}
 
-	@media (--mq-navigation) and (--has-hover) {
+	@container announcement (min-width: 960px) and (--has-hover) {
 
 		&:hover {
 
 			@mixin announcement-dismiss-hover-focus;
 		}
 	}
 
-	@media (--mq-navigation) {
+	@container announcement (min-width: 960px) {
 
 		&:focus:not(:focus-visible) {
 
@@ -167,7 +200,7 @@
 	display: none;
 
 	/* only show dismiss text on desktop */
-	@media (--mq-navigation) {
+	@container announcement (min-width: 960px) {
 
 		@mixin t-animated-underline;
 	}