Allow negative order number to push any grid item to start immediately

  • Resolved abitofmind

    (@abitofmind)


    1 year, 4 months ago

    Status Quo:

    • Select a grid item block → Block Settings → General → Column-Order.
    • You can set an ordinal numbers on a scale (1-16). Only positive numbers!

    Note: Grid items without an explicit ordinal number default to 0.

    Problem: You can only set positive numbers.

    • ? Therefore (for a certain breakpoint) you can easily quickly put a particular grid item to the end, because any positive number is higher than 0.
    • ? But you cannot quickly push a grid item to the start!

      As all others have 0! The only way is giving your desired grid item an order: 1 and then give all the other grid items earlier in source code a higher ordinal number. Quite inconvenient!

    Proposed Solution

    • UX: Allow to set positive and negative order numbers for grid items.
    • UI-wise I propose: Offer both a number scale (gives good visual measure to compare “where is it in relation to others”) plus a number input box which accepts any pos/neg integer (quicker input, plus extraordinary large numbers possible if necessary).

    Sketch

    Order:

[  -3  ??]    - 8 7 6 5 4 ③ 2 1 0 1 2 3 4 5 6 7 8 +

    Example Use Case

    1. You have a grid container, e.g. divided into 12 columns.
    2. You have grid items:
      a) Let’s say you have 6 of them.
      a) You give them different column-spans.
      b) They are sorted by source code order by default
    3. On some breakpoint (e.g. Mobile) you want to sort one of the later elements (e.g. the 5th one) to be the first.
    4. You select the 5th element and give it order: -1.
    5. It’s immediately the first grid item, because all other grid items default to order: 0.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter abitofmind

    (@abitofmind)

    Workaround:

    Select a grid item block → Block Settings → Advanced → Custom CSS

    {GREENSHIFT} {
    order: -1
  }

    It works. Live in the Block Editor and also in the Frontend.

    So now you only need to wrap it in a media query, like this:

    @media (max-width: 1025px) {
{GREENSHIFT} {order: -1}
}

    Note: The media query works in the Frontend, but not in the Block Editor environment.

    Open Question: Are there placeholder to insert the Greenshift specific breakpoint media queries within the custom CSS?

    • This reply was modified 1 year, 4 months ago by abitofmind.
    Thread Starter abitofmind

    (@abitofmind)

    Screen Recording of the challenge at hand and the workaround:
    (audio has background noises, but is intelligible)

    ?? Grid Item Order Number – Negative possible with Custom CSS
    Plugin Author wpsoul

    (@wpsoul)

    ok, we will add -1 value to order

    Thread Starter abitofmind

    (@abitofmind)

    Great!

    And please not only -1 in particular, but the possibility to assign any positive or negative number via numfield plus a few positive/negative on a scale, as described in my UI sketch.

    So that I can also quickly add also 3 from 16 elements total to start in a certain order. (.e.g -100 for my element which I certainly want first, then -10 for the second and -5 for the third. Having gaps free in my number sequence should I want to insert additional custom ordered elements.

    Plugin Author wpsoul

    (@wpsoul)

    It will be possible to add any number

    Thread Starter abitofmind

    (@abitofmind)

    ??

    Thread Starter abitofmind

    (@abitofmind)

    ?? The changes in the UI control were implemented with a good UX:

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Allow negative order number to push any grid item to start immediately’ is closed to new replies.