New design of ALPS Quote block

[daniel-eesti]

ALPS Quote block has bags and doesn't meet our UX requirements; we need to redesign it.

New design (developer will get access to Figma):

The way the block looks in the block editor should remain the same.

[YauheniKapliarchuk]

Hi @daniel-eesti

I have a few questions.

0. Is this design for "Blockquote" block?
1. We should be able to have 3 different views, i.e. ticks of how the block should look on the user's side?
2. Apart from quotes, I understand that nothing should change?
3. The color of the quote is the same all the time?
4. If the settings are needed, they should be in on the side panel or on the block itself? We now have blocks where something is put down automatically or there are checkboxes in the block itself in the editor.

Thank you so much in advance! Best Regards!

CC: @hans-olson @johnrbeckett

[daniel-eesti]

@YauheniKapliarchuk

0. Yes, it is for the "ALPS Blockquote" block
1. No, there is only 1 version of the quote block, the one on the screenshot in this GitHub issue. Here is the link to the exact block on Figma: https://www.figma.com/file/IIrU9CtXKkkfAlIhPtYiJK/Quotes-style?node-id=8%3A2
2. Yes, this task is only about redesigning "ALPS Blockquote" block
3. Yes, follow exact colors which you can find in the Figma
4. Block in the editor stays exactly the same as it is right now. Regarding side panel: currently there are 2 settings: Extend Quote and Strong Quote. Non of them are needed anymore. So, there should be no additional settings in the side panel for this block.

[YauheniKapliarchuk]

Thank you Daniel,

one more question:

• could you please add mobile and tablet view into figma file?

Thanks!

@daniel-eesti

[daniel-eesti]

@YauheniKapliarchuk I have already requested it from the designer. It will be added to the same Figma board.

[daniel-eesti]

@YauheniKapliarchuk Done. Please check it out. It has only a desktop and mobile. Tablet is the same as the desktop.

[YauheniKapliarchuk]

Hi,

PR for new styles for BlockQuote Gutenberg Block. https://github.com/adventistchurch/alps/pull/575

thanks, Best Regards!

[daniel-eesti]

This block's design on production differs from the one in the task description.

[daniel-eesti]

Released to production with two bugs:

1. Empty citation bug: if the Citation field is empty, there is an empty space instead of citation text.
2. Quote's body color mismatches with Figma's design. The color of the quote's body text and citation text should be the same (light blue, not dark blue).

Example of the bug: https://www.adventist.org/7-powerful-prayers-in-the-bible-and-what-we-can-learn-from-them/

[YauheniKapliarchuk]

Hi, @daniel-eesti could you please test again it, I didn't have access to sites for testing?

Thanks, Best Regards!

[daniel-eesti]

@YauheniKapliarchuk unfortunately the empty citation bug is still there.

[daniel-eesti]

It is fixed now. Thank you.

[YauheniKapliarchuk]

Hi everyone,

if you have any questions about this issue, please reopen it.

Thanks, Best Regards!

CC: @hans-olson @daniel-eesti @johnrbeckett