Full-width text – pullquote or paragraph nested within a group?

  • Resolved nicholasyeo

    (@nicholasyeo)


    5 years, 8 months ago

    Good day Anders,

    Thank you so much for your work in creating this brilliant theme. It looks great and I’d like to explore using it with Gutenberg. I would truly appreciate if you could assist with a query.

    On your theme demo, you have a full-width line of text which goes:

    “Two examples of the kinds of sites that can be created when combining the WordPress Block Editor with the customization options in Chaplin.”

    I’m wondering how to achieve that effect? In order to get the full-width or wide option, I create a group and add a nested paragraph of text aligned to centre… but the text then appears broken and is flush to the extreme left of the page.

    Should I be creating a three column, full-width block and putting the paragraph of text in the middle?

    Am I doing something wrong?

    • This topic was modified 5 years, 8 months ago by nicholasyeo.
    • This topic was modified 5 years, 8 months ago by nicholasyeo.
    • This topic was modified 5 years, 8 months ago by nicholasyeo.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @nicholasyeo,

    You’re correct – that paragraph block is nested within a group block set to the “Wide” alignment, and the paragraph itself is set to centered text alignment. That should center the paragraph in the group block.

    Is the page publicly available? If it is, you can post the URL and I can take a look at the markup of the blocks.

    — Anders

    Thread Starter nicholasyeo

    (@nicholasyeo)

    Hi @anlino,

    Thank you for that speedy reply and your kind assistance.

    Unfortunately, my site is still in MAMP at the moment. Not sure if these are helpful, but here are some screenshots of the issue via my Dropbox: https://bit.ly/2YHL7Wm

    Basically, a wide-width group with nested paragraph (text centred) makes the nested paragraph align left, while the full-width group sends the nested paragraph (text centred) to the extreme left of the site.

    Perhaps this is a quirk / bug / block compatibility issue with Gutenberg?

    Nicholas

    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    Theme Author Anders Norén

    (@anlino)

    Hi @nicholasyeo,

    Sorry, I added a fix for the Cover block that I thought had targeted the group block as well, but I must have forgotten to include that part. I’ve submitted a fix in version 1.0.14, which should be live soon. Let me know if that update fixes it.

    — Anders

    Thread Starter nicholasyeo

    (@nicholasyeo)

    Hi @anlino,

    Thank you for this very speedy fix! It works now. Just FYI, although the group-wide block is now fine with paras, I thought I’d be helpful and I did a test on other blocks. I found issues with the following full-width group/block configurations:

    —-
    PARAS
    [Wide group [para justified none]] NOW WORKS FINE
    [Wide group [para justified left]] NOW WORKS FINE
    [Wide group [para justified right] NOW WORKS FINE
    [Wide group [para justified centre]] NOW WORKS FINE
    —-
    [Full width group [para justified none]] PARA GOES TO EXTREME LEFT
    [Full width group [para justified left]] PARA GOES TO EXTREME LEFT
    [Full width group [para justified right]] PARA GOES TO EXTREME RIGHT
    [Full width group [para justified centre]] WORKS FINE
    —-
    QUOTES
    [Full width group [quote justified none]] QUOTE GOES TO EXTREME LEFT
    [Full width group [quote justified left]] QUOTE GOES TO EXTREME LEFT
    [Full width group [quote justified right]] QUOTE GOES TO EXTREME RIGHT
    [Full width group [quote justified centre]] WORKS FINE
    —-
    PULLQUOTES
    [Full width group [pullquote justified none]] WORKS FINE
    [Full width group [pullquote justified left]] QUOTE GOES TO EXTREME LEFT
    [Full width group [pullquote justified right]] QUOTE GOES TO EXTREME RIGHT
    [Full width group [pullquote justified wide]] NOT VERY CENTRED IN PAGE, ABIT FLUSH LEFT
    [Full width group [pullquote justified full]] NOT VERY CENTRED IN PAGE, ABIT FLUSH LEFT
    ____
    COLUMNS
    [Full width 2 columns [para justified none]] PARA GOES TO EXTREME LEFT ON LEFT COLUMN, RIGHT COLUMN WORKS FINE
    [Full width 2 columns [para justified left]] PARA GOES TO EXTREME LEFT ON LEFT COLUMN, RIGHT COLUMN WORKS FINE
    [Wide width 2 columns [para justified right]] WORKS FINE
    [Wide width 2 columns [para justified centre]] WORKS FINE
    [Full width group 2 columns[para justified none]] PARA GOES TO EXTREME LEFT ON LEFT COLUMN
    [Full width group 2 columns[para justified left]] PARA GOES TO EXTREME LEFT ON LEFT COLUMN
    [Full width group 2 columns[para justified right]] PARA GOES TO EXTREME RIGHT ON RIGHT COLUMN
    [Full width group 2 columns[para justified centre]] WORKS FINE
    * If I full-width group the columns, everything breaks.
    —-
    HEADINGS
    [Wide width group [heading of any size]] WORKS FINE
    [Full width group [heading of any size]] HEADING GOES TO EXTREME LEFT
    —-
    VERSES
    [Full width group [verse para justified none]] VERSE GOES TO EXTREME LEFT
    [Full width group [verse para justified left]] VERSE GOES TO EXTREME LEFT
    [Full width group [verse para justified right]] VERSE GOES TO EXTREME RIGHT
    [Full width group [verse para justified centre]] WORKS

    Alas, that is one hell of a lot of fixes… the terror of Gutenberg – on an unrelated note, I realised the Classic Block Editor is also broken ??Anyhow, truly appreciate your kind assistance and hard work in getting the fixes out so quickly.

    Good day,
    Nicholas

    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    • This reply was modified 5 years, 8 months ago by nicholasyeo.
    Theme Author Anders Norén

    (@anlino)

    Hi @nicholasyeo,

    Wow – thanks for the alignment review! That’s super useful. I’ll definitely take a close look at these for the next update.

    Blocks in a alignfull group are flush with the edge of the screen by design – that’s consistent with the handling in Twenty Nineteen, which has been setting the default behaviour for a lot of this stuff. I assume the thinking goes that if the user has decided to make the group extend the full width of the screen, they want the blocks within it to extend the full width as well (if not, they’re probably looking for the wide alignment).

    In any case, with the behaviour of blocks (and especially group blocks, which are pretty recent) still up in the air, I try to stick to the behaviour used in Twenty Nineteen as much as possible. If nothing else because it gives me a convenient scapegoat ??

    — Anders

    Thread Starter nicholasyeo

    (@nicholasyeo)

    Hi @anlino,

    Thank you again!

    Oh yes, making the content justified to the extreme corner in align full makes sense then. Thanks for the detailed explanations, I’m trying to wrap my head around the new system as well.

    Yes, Twenty Nineteen is beautiful and if all the kinks in Gutenberg are ironed out, this will be brilliant. Alas, as Oscar Wilde wrote: “They’ve promised that dreams can come true – but forgot to mention that nightmares are dreams, too.”

    Ha ha. All the best!

    Nicholas

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Full-width text – pullquote or paragraph nested within a group?’ is closed to new replies.