Enhance RichText styles

Author: renintw

wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js

@@ -95,19 +95,12 @@ registerBlockType( metadata.name, {
 								? __( 'Collapse Content', 'wporg-learn' )
 								: __( 'Expand Content', 'wporg-learn' ) }
 						</Button>
-						<div
-							style={ {
-								maxHeight: isExpanded ? 'none' : '100px', // Adjust the height as needed
-								overflow: 'hidden',
-								transition: 'max-height 0.3s ease',
-							} }
-						>
-							<RichText
-								label={ __( 'Edit Lesson Plan Content', 'wporg-learn' ) }
-								value={ lessonPlanContent }
-								onChange={ ( newContent ) => setAttributes( { lessonPlanContent: newContent } ) }
-							/>
-						</div>
+						<RichText
+							className={ isExpanded ? 'is-expanded' : 'is-collapsed' }
+							label={ __( 'Edit Lesson Plan Content', 'wporg-learn' ) }
+							value={ lessonPlanContent }
+							onChange={ ( newContent ) => setAttributes( { lessonPlanContent: newContent } ) }
+						/>
 					</>
 				) }
 				{ lessonPlanId && (

wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss

@@ -1,5 +1,21 @@
 .wp-block-wporg-learn-lesson-facilitator-notes {
+	.components-base-control__field {
+		margin-bottom: var(--wp--preset--spacing--10);
+	}
+
 	.block-editor-rich-text__editable {
 		white-space: unset !important;
+		overflow: scroll;
+		border: 1px solid var(--wp--preset--color--charcoal-5);
+		margin: var(--wp--preset--spacing--10) 0;
+		padding: var(--wp--preset--spacing--10) 0;
+
+		&.is-expanded {
+			max-height: none;
+		}
+
+		&.is-collapsed {
+			max-height: 300px;
+		}
 	}
 }