search

adventistchurch / alps-gutenberg-blocks

A Wordpress plugin to create Gutenberg plugins that work for ALPS.
4 stars 6 forks source link

New design of ALPS Quote block #87

Closed daniel-eesti closed 1 year ago

daniel-eesti commented 2 years ago

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):

image.png

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

YauheniKapliarchuk commented 2 years ago

Hi @daniel-eesti

I have a few questions.

  1. Is this design for "Blockquote" block?
  2. We should be able to have 3 different views, i.e. ticks of how the block should look on the user's side?
  3. Apart from quotes, I understand that nothing should change?
  4. The color of the quote is the same all the time?
  5. 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 commented 2 years ago

@YauheniKapliarchuk

  1. Yes, it is for the "ALPS Blockquote" block
  2. 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
  3. Yes, this task is only about redesigning "ALPS Blockquote" block
  4. Yes, follow exact colors which you can find in the Figma
  5. 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 commented 2 years ago

Thank you Daniel,

one more question:

Thanks!

@daniel-eesti

daniel-eesti commented 2 years ago

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

daniel-eesti commented 2 years ago

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

YauheniKapliarchuk commented 2 years ago

Hi,

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

thanks, Best Regards!

daniel-eesti commented 2 years ago

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

image.png

daniel-eesti commented 1 year ago

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. image.png
  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 commented 1 year ago

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

Thanks, Best Regards!

daniel-eesti commented 1 year ago

@YauheniKapliarchuk unfortunately the empty citation bug is still there.

image

daniel-eesti commented 1 year ago

It is fixed now. Thank you.

YauheniKapliarchuk commented 1 year ago

Hi everyone,

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

Thanks, Best Regards!

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