Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

Alt: FAQs: Replace Details blocks with headings and separators. #646

Merged
merged 2 commits into from
Oct 30, 2024
Merged

Alt: FAQs: Replace Details blocks with headings and separators. #646

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eab30f7
Alternative FAQ pattern.
juanfra Oct 28, 2024
4787c13
Apply suggestions from code review.
juanfra Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 67 additions & 44 deletions patterns/text-faqs.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Categories: text, about
* Keywords: faq, about, frequently asked questions
* Viewport width: 1400
* Description: A FAQs section with a FAQ heading and list of toggle questions and answers.
* Description: A FAQs section with a FAQ heading and list of questions and answers.
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
Expand All @@ -21,54 +21,77 @@
<h2 class="wp-block-heading has-x-large-font-size"><?php echo esc_html_x( 'Frequently Asked Questions', 'Heading of the FAQs pattern.', 'twentytwentyfive' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
<!-- wp:details {"style":{"border":{"bottom":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|30"}},"typography":{"fontStyle":"normal","fontWeight":"400"}}} -->
<details class="wp-block-details" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--30);font-style:normal;font-weight:400">
<summary><?php echo esc_html_x( 'What is The Stories Book about?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></summary>
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
<p style="font-style:normal;font-weight:300"><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist. Fleckenstein\'s evocative imagery, Strand\'s groundbreaking modernist approach, and Kōno\'s meticulous documentation of Japanese life come together in a harmonious blend that celebrates the art of photography.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"style":{"border":{"top":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php echo esc_html_x( 'What is The Stories Book about?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:details {"style":{"border":{"bottom":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|30"}},"typography":{"fontStyle":"normal","fontWeight":"400"}}} -->
<details class="wp-block-details" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--30);font-style:normal;font-weight:400">
<summary><?php echo esc_html_x( 'How much does The Stories Book cost?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></summary>
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
<p style="font-style:normal;font-weight:300"><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist. Fleckenstein\'s evocative imagery, Strand\'s groundbreaking modernist approach, and Kōno\'s meticulous documentation of Japanese life come together in a harmonious blend that celebrates the art of photography.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
<!-- wp:paragraph -->
<p><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:details {"style":{"border":{"bottom":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|30"}},"typography":{"fontStyle":"normal","fontWeight":"400"}}} -->
<details class="wp-block-details" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--30);font-style:normal;font-weight:400">
<summary><?php echo esc_html_x( 'When will The Stories Book be released?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></summary>
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
<p style="font-style:normal;font-weight:300"><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist. Fleckenstein\'s evocative imagery, Strand\'s groundbreaking modernist approach, and Kōno\'s meticulous documentation of Japanese life come together in a harmonious blend that celebrates the art of photography.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"style":{"border":{"top":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php echo esc_html_x( 'How much does The Stories Book cost?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:details {"style":{"border":{"bottom":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|30"}},"typography":{"fontStyle":"normal","fontWeight":"400"}}} -->
<details class="wp-block-details" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--30);font-style:normal;font-weight:400">
<summary><?php echo esc_html_x( 'Are signed copies available?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></summary>
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
<p style="font-style:normal;font-weight:300"><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist. Fleckenstein\'s evocative imagery, Strand\'s groundbreaking modernist approach, and Kōno\'s meticulous documentation of Japanese life come together in a harmonious blend that celebrates the art of photography.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
<!-- wp:paragraph -->
<p><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"style":{"border":{"top":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php echo esc_html_x( 'When will The Stories Book be released?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:group {"style":{"border":{"top":{"color":"var:preset|color|accent-6","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><?php echo esc_html_x( 'Are signed copies available?', 'Question in the FAQs pattern.', 'twentytwentyfive' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:details {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} -->
<details class="wp-block-details" style="font-style:normal;font-weight:400">
<summary><?php echo esc_html_x( 'Will The Stories Book be available in other languages other that English?', 'Question in the FAQs pattern', 'twentytwentyfive' ); ?></summary>
<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
<p style="font-style:normal;font-weight:300"><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist. Fleckenstein\'s evocative imagery, Strand\'s groundbreaking modernist approach, and Kōno\'s meticulous documentation of Japanese life come together in a harmonious blend that celebrates the art of photography.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</details>
<!-- /wp:details -->
<!-- wp:paragraph -->
<p><?php echo esc_html_x( 'This exquisite compilation showcases a diverse array of photographs that capture the essence of different eras and cultures, reflecting the unique styles and perspectives of each artist.', 'Answer in the FAQs pattern.', 'twentytwentyfive' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:group -->
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
</div>
Expand Down
Loading