Faq Pattern Section #158

esrat71 · 2023-08-31T03:17:39Z

Faq section designed

Description

faq section designed as pattern

Reference to the issue that the PR fixes:
#119

Screenshots
https://prnt.sc/CDb7GJTljavD

Testing Instructions

Activate the theme.
Create a pettern named faq
Add the code viewing as code editor.
See the changes

Another way

```
copy the code
```

Create a faq php file and see the changes

Faq section designed

carolinan · 2023-08-31T04:18:33Z

Thank you. A few things:

In the pull request description please add a reference to the issue that the PR fixes:
#119

All texts need to use translation functions. Please see the documentation here: https://developer.wordpress.org/apis/internationalization/

The pattern needs to use a list block with a custom style, not paragraphs and HRs.

carolinan · 2023-08-31T04:23:26Z

Here is an example of how to add a custom style for the list block:
https://github.com/WordPress/twentytwentyfour/pull/150/files#diff-01c9525afc2c87cfcb03124117c9d0ebb067029f6c955a607fa0fd4274aca556R70

esrat71 · 2023-08-31T04:23:39Z

Okay, Thank you for review. I am going to make it with list item with custom style. Here's a query for custom style, I f i add a register block style , may need to add css, then should i do that in style css file or what's the procedure actually.

carolinan · 2023-08-31T04:24:14Z

Add it to style.css for now.

huzaifaalmesbah · 2023-08-31T04:37:53Z

patterns/faq.php

+
+<!-- wp:group {"style":{"color":{"background":"#101010"},"spacing":{"padding":{"top":"8vh","bottom":"8vh","left":"6px","right":"6px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-background" style="background-color:#101010;padding-top:8vh;padding-right:6px;padding-bottom:8vh;padding-left:6px"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}},"typography":{"fontSize":"10rem","letterSpacing":"-0.02em"}},"textColor":"base-2"} -->
+<h2 class="wp-block-heading has-base-2-color has-text-color has-link-color" style="font-size:10rem;letter-spacing:-0.02em">FAQs</h2>


Ready For Translation

huzaifaalmesbah · 2023-08-31T04:39:02Z

patterns/faq.php

+<p class="has-base-2-color has-text-color has-link-color has-medium-font-size">↓ Can I apply to be a part of the team or work as a contractor?</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->


file must end with a newline

huzaifaalmesbah · 2023-08-31T04:41:00Z

patterns/faq.php

+<!-- /wp:heading -->
+
+<!-- wp:group {"style":{"border":{"top":{"color":"#ffffff33","width":"1px"},"right":{"width":"0px","style":"none"},"bottom":{"color":"#ffffff33","width":"1px"},"left":{"width":"0px","style":"none"}},"spacing":{"padding":{"top":"15px","bottom":"15px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="border-top-color:#ffffff33;border-top-width:1px;border-right-style:none;border-right-width:0px;border-bottom-color:#ffffff33;border-bottom-width:1px;border-left-style:none;border-left-width:0px;padding-top:15px;padding-bottom:15px"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"base-2","fontSize":"medium"} -->


use contrast-3 for all border color

huzaifaalmesbah · 2023-08-31T04:44:16Z

patterns/faq.php

+
+?>
+
+<!-- wp:group {"style":{"color":{"background":"#101010"},"spacing":{"padding":{"top":"8vh","bottom":"8vh","left":"6px","right":"6px"}}},"layout":{"type":"constrained"}} -->


use align: full width and background-color: contrast

huzaifaalmesbah · 2023-08-31T04:46:05Z

patterns/faq.php

+
+<!-- wp:group {"style":{"border":{"top":{"color":"#ffffff33","width":"1px"},"right":{"width":"0px","style":"none"},"bottom":{"color":"#ffffff33","width":"1px"},"left":{"width":"0px","style":"none"}},"spacing":{"padding":{"top":"15px","bottom":"15px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="border-top-color:#ffffff33;border-top-width:1px;border-right-style:none;border-right-width:0px;border-bottom-color:#ffffff33;border-bottom-width:1px;border-left-style:none;border-left-width:0px;padding-top:15px;padding-bottom:15px"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"base-2","fontSize":"medium"} -->
+<p class="has-base-2-color has-text-color has-link-color has-medium-font-size">↓ What is your process working in smaller projects?</p>


Prepare all content for translation

huzaifaalmesbah · 2023-08-31T04:55:07Z

also use already registered pattern categories or register a new category faq.

esrat71 · 2023-08-31T04:58:38Z

@huzaifaalmesbah Thank you for reviewing. I am going to do the needful changes and will removed the category also. Will submit asap.

Added custom block style in function , custom css and the main faq file with list block

Have translable all the hard coded string text and also changed the css file for list item

esrat71 · 2023-08-31T12:15:02Z

hi , @carolinan , sorry to bother you . Can you please guide me. My PHP code is getting failed all time for indention issue. Kinda lost in somewhere. I have used tab as indention still getting error.

hope indention work fine

juanfra · 2023-08-31T13:27:23Z

Thanks for the contribution @esrat71!

One way to check what's going wrong with the code quality issues, is by checking the results of the failed test for the PR. You can also click on the Files Changed tab for the PR to see the fails in their respective lines.

Another way could be running the test in your local environment. You can do that by running:

composer install && composer run standards:check

You can find more information about testing on the project's readme.

I also recommend you check how to use the translation functions in the context of patterns. You could probably check the conversation that took place yesterday in Slack to get more context on when to use esc_html__ vs esc_html_x.

esrat71 · 2023-08-31T13:34:50Z

Thanks for the contribution @esrat71!

One way to check what's going wrong with the code quality issues, is by checking the results of the failed test for the PR. You can also click on the Files Changed tab for the PR to see the fails in their respective lines.

Another way could be running the test in your local environment. You can do that by running:

composer install && composer run standards:check

You can find more information about testing on the project's readme.

I also recommend you check how to use the translation functions in the context of patterns. You could probably check the conversation that took place yesterday in Slack to get more context on when to use esc_html__ vs esc_html_x.

Thank you. I am again going to check if i can resolve the issue

carolinan · 2023-08-31T14:08:57Z

patterns/faq.php

-    <div class="wp-block-group has-contrast-background-color has-background" style="padding-top:8vh;padding-right:6px;padding-bottom:8vh;padding-left:6px"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}},"typography":{"fontSize":"10rem","letterSpacing":"-0.02em"}},"textColor":"base-2"} -->
-    <h2 class="wp-block-heading has-base-2-color has-text-color has-link-color" style="font-size:10rem;letter-spacing:-0.02em">FAQs</h2>
+<div class="wp-block-group has-contrast-background-color has-background" style="padding-top:8vh;padding-right:6px;padding-bottom:8vh;padding-left:6px"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base-2"}}},"typography":{"fontSize":"10rem","letterSpacing":"-0.02em"}},"textColor":"base-2"} -->
+<h2 class="wp-block-heading has-base-2-color has-text-color has-link-color" style="font-size:10rem;letter-spacing:-0.02em"<?php echo esc_html__( 'FAQs?', 'twentytwentyfour' ); ?>></h2>


Please look carefully, this code is missing a closing tag and is broken.

okay , checking again . Thank you

have checked again , added all translable strings..

added and removed space after watching following brackets

MaggieCabrera · 2023-09-04T09:19:26Z

style.css

+.is-style-faq-check-lists li::before {
+    content: "\2193"; 
+    position: absolute;
+    left: 0;


Thank you so much for working on this. My main concern about this solution are RTL languages. In those cases we want the checkmark to be positioned to the right instead. This is the only official docs I found on RTL. It looks like we are going to need an extra stylesheet just for this. Do you know a better way @carolinan?

Another option could be using the .rtl class that's automatically added to the body for RTL languages (if the idea is to avoid having a separate stylesheet).

I recently tried to use the .rtl class in a Gutenberg block and found that it is not used in the iframed block editor(!)
The editor uses <html dir="rtl"> and we can not target children of elements with this attribute.
See https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

Should we perhaps try to fix it in Gutenberg? WordPress/gutenberg#51480

I am not sure we have enough time.

Should i try to use in different way without children ? like as just user can copy the icon and list item will as normal list item .

Then User will have to icon like this and space between the item like the example https://prnt.sc/YnphTJPkKVnD What do you think ? as some of section in white background using this type pattern

and one more thing, i tried to using marker and list style image, if i use list-style-position as normal , the list item border is not working as expected we want in design https://prnt.sc/avLaO4fbHqyR

MaggieCabrera · 2023-09-06T09:41:03Z

I've made a few changes to this PR, the main one being that I changed the list block with the details block, so now we have the functionality of showing/hidding text for each FAQ item. I think this pattern is perfect to showcase this recently added block. Let's follow up with improvements and add some sample text to each of the FAQ items text. @beafialho can you provide some sample text for these, please?

stale

beafialho · 2023-09-06T10:16:08Z

Absolutely, I have also imagined this to use the details block. Here's some sample text, it can be used for all of the questions:

Études offers comprehensive consulting, management, design, and research solutions. Our vision is to be at the forefront of architectural innovation, fostering a global community of architects and enthusiasts united by a passion for creating spaces. Every architectural endeavor is an opportunity to shape the future.

Faq Pattern Section

00d8f68

Faq section designed

huzaifaalmesbah previously requested changes Aug 31, 2023

View reviewed changes

esrat71 added 3 commits August 31, 2023 14:38

added custom block style

66c1ec8

Added custom block style in function , custom css and the main faq file with list block

removed extra semicolon

2ada320

space indention removed

8011e58

juanfra added the [Component] Block Patterns label Aug 31, 2023

juanfra linked an issue Aug 31, 2023 that may be closed by this pull request

Block Patterns - FAQ #119

Closed

esrat71 added 3 commits August 31, 2023 14:55

tab indented

25ea1df

added Translation and custom list style changed

c5e7d6b

Have translable all the hard coded string text and also changed the css file for list item

Have removed indention

cb66278

esrat71 added 3 commits August 31, 2023 18:31

have checked again

d1b3588

hope indention work fine

update function code

42fedfe

again tried for tab idention

9824b14

esrat71 added 2 commits August 31, 2023 19:48

some indention issue fixed

758c670

remove paranthes spaces issue

58ba81c

carolinan reviewed Aug 31, 2023

View reviewed changes

esrat71 added 3 commits August 31, 2023 23:09

have fixed translable string issue in pattern.

9eec9f6

have checked again , added all translable strings..

have removed the space and added space

5e313a0

added and removed space after watching following brackets

tab indentions checked again

1696908

MaggieCabrera reviewed Sep 4, 2023

View reviewed changes

changed spacings and swapped list block with the details block

dddf497

add separator

82f520f

MaggieCabrera approved these changes Sep 6, 2023

View reviewed changes

MaggieCabrera merged commit a435493 into WordPress:trunk Sep 6, 2023
2 checks passed

MaggieCabrera mentioned this pull request Sep 6, 2023

Update FAQ pattern with text for the answers #215

Merged

esrat71 deleted the faq-pattern branch September 9, 2023 13:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Faq Pattern Section #158

Faq Pattern Section #158

esrat71 commented Aug 31, 2023 •

edited

carolinan commented Aug 31, 2023

carolinan commented Aug 31, 2023

esrat71 commented Aug 31, 2023

carolinan commented Aug 31, 2023

huzaifaalmesbah Aug 31, 2023

huzaifaalmesbah Aug 31, 2023

huzaifaalmesbah Aug 31, 2023

huzaifaalmesbah Aug 31, 2023

huzaifaalmesbah Aug 31, 2023

huzaifaalmesbah commented Aug 31, 2023

esrat71 commented Aug 31, 2023

esrat71 commented Aug 31, 2023

juanfra commented Aug 31, 2023 •

edited

esrat71 commented Aug 31, 2023

carolinan Aug 31, 2023

esrat71 Aug 31, 2023

MaggieCabrera Sep 4, 2023

juanfra Sep 4, 2023 •

edited

carolinan Sep 4, 2023

carolinan Sep 4, 2023

carolinan Sep 4, 2023

esrat71 Sep 4, 2023

esrat71 Sep 4, 2023 •

edited

esrat71 Sep 4, 2023

MaggieCabrera commented Sep 6, 2023

beafialho commented Sep 6, 2023


		?>

		<!-- wp:group {"style":{"color":{"background":"#101010"},"spacing":{"padding":{"top":"8vh","bottom":"8vh","left":"6px","right":"6px"}}},"layout":{"type":"constrained"}} -->

Faq Pattern Section #158

Faq Pattern Section #158

Conversation

esrat71 commented Aug 31, 2023 • edited

carolinan commented Aug 31, 2023

carolinan commented Aug 31, 2023

esrat71 commented Aug 31, 2023

carolinan commented Aug 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

huzaifaalmesbah commented Aug 31, 2023

esrat71 commented Aug 31, 2023

esrat71 commented Aug 31, 2023

juanfra commented Aug 31, 2023 • edited

esrat71 commented Aug 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juanfra Sep 4, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

esrat71 Sep 4, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MaggieCabrera commented Sep 6, 2023

beafialho commented Sep 6, 2023

esrat71 commented Aug 31, 2023 •

edited

juanfra commented Aug 31, 2023 •

edited

juanfra Sep 4, 2023 •

edited

esrat71 Sep 4, 2023 •

edited