Description:

Create a variation of the Paragraph block that allows the ability to be truncated after a specified number of words. This block will need to work for the Description of the single posts at the top of the page, which will have a Read More link that users can click to unfold the rest of the description below. This will also need to be used for the Travel Information blocks, however these will open up popup modals with the rest of the information when the View More button on the card is clicked using Popup Maker.

Use Cases:

1. Single Post Description Section:

   • For descriptions that are quite long, this block will display a truncated version initially.
   • The block will include a "Read More" link that, when clicked, expands the remaining text below.

2. Travel Information Blocks:

   • The Travel Information blocks will use a similar truncated view, but instead of expanding inline, it will display a "View More" button.
   • When clicked, this button will open a popup containing the full content of the description.

Requirements:

• Add a control to the block sidebar for setting the maximum number of words before truncation.
• Implement two variations:
  • "Read More" link for inline expansion (Single Post Description Section).
  • "View More" button for a popup expansion (Travel Information Blocks).
• Add styling options for both inline and popup views to ensure consistent UI/UX with the design specifications.

Design Notes:

Refer to the provided screenshots for visual guidance on how the "Read More" and "View More" interactions should appear.

Screenshots

Description Read More closed

Description Read More open

Travel Info blocks closed

Travel Info blocks open

Acceptance Criteria:

• Block truncates at the specified word count.
• "Read More" link successfully expands text inline.
• "View More" button opens a popup with the remaining text for Travel Information blocks.
• Styling aligns with design screenshots.