Paste Cell Styles not available for Grid Element?

Beta
#1

Hi!

I have noticed that a cell style cannot be copied and pasted to the Grid element, so all cells can get that style? Is this intentional?

EDIT: Ok, I guess I have just realized why. Each Grid Cell is also responsive, so Copying styles would affect all breakpoints.

Does this mean that if we start in, say LG size, we have to copy each Cell’s value to the XL size individually? I find that in many cases, the exact same layout will also work for the MD, so that means copying Cell settings individually again?

Maybe I am missing something, but if not, I think that copy/paste styles should work per breakpoint. If we copy grid styles on one breakpoint and paste into another, that should arrange the cells the same way.

Also, when adjusting grid cells for breakpoints, I think we need a quicker way to select Cells. They are often overlapping because the layout is still not properly set, so selecting them in Content editor is not possible. Even if not overlapping, it is often hard or even impossible to hover over the cell due to the element in front of it.

There is no more floating Skeleton mode so that is not an option too. This leaves us with going up to the Row element and selecting the Cells there, but only after leaving the “Orange boxes mode”, because there are no cell highlights on hovering in the Layout pane while this mode is turned on, so it is hard to tell which cell is which.

Quick moving from cell to cell is very important for the workflow, as rearranging for breakpoints involves many and often all cells.

Thanks!

PS: I know about dragging the boxes. :slight_smile:
However, when a complex layout is initially made on the LG layout with Auto rows, everything turns into single columns and getting the same layout on other breakpoints seems impossible by dragging the boxes. I find that to be doable only by copying the cell settings from one breakpoint to another.

#2

Just to chime in on this…

I agree with Miro, it would be nice in the grid layout where you can drag and resize cells that a right click option to pick which cell (if there is more than one cell under the pointer)… This would make dealing with overlapping cells much easier.

Also, if the hover info showing cell names worked in the design mode, that would be most helpful

1 Like
#3

Ah, Design Mode sounds much better than Orange Boxes Mode. :smile:

#4

Trust me @misho, I’m making this sh*t up haha

1 Like
#5

I have found mine in the secret themeco’s Grid manual at themeco/content/verysecretstuff/secret-grid-manual.pdf. So it is actually an official name. :stuck_out_tongue_winking_eye:

Haha, lol, I have just found Themeco is refering to it as “Grid Overlay”. :slight_smile: I am about to make a new Thread about it.

#6

You guys are awesome. :slight_smile:

Great feedback. First, I can confirm we’re looking at one bug: You should be able to copy from a cell, then paste the cell styles to a Grid which would then overwrite the styling of all children. You can at the moment copy a cell, then right click the Section and do “Paste Cell Style” which would apply the copied style to all the children. However, this copies the positioning as well which is undesirable for elements like the Grid.

After fixing the copy/paste detection bug, I’ll make the Cell’s positioning values (X/Y start/end etc.) considered part of their “content” not “styling”. That way you can move around things like background color, border radius, etc. without breaking the layout.

Something Kory and I have discussed is a way is while working in one of the tabbed breakpoint controls, to copy the values from one of the items over to another breakpoint. We’d likely use the context menu to accomplish this so we’re not adding more clutter to the UI. This is still TBD at the moment though.

3 Likes
#7

@Misho and @scotbaston,

I wanted to post a quick update here in relation to beta 3. While Inspecting a Cell or Grid element, you can right click on the 5 breakpoints to copy/paste values between them.

1 Like
#8

Loving the sound of that

Any idea when beta 3 drops?
Ah, just seen that beta 3 had dropped already. That’ll be a job for tomorrow. I have another 3 sites to start tomorrow

#9

Sounds good Scot! Looking forward to your thoughts and feedback as always.

#10

Awesome, will test it first thing in the morning!

Thanks!

#11

:thumbsup:

#12

Not exactly the same topic, but close enough. :slight_smile: I think there has been a discussion somewhere about the possibility to copy paste individual values between elements. For example a box-shadow from one element to another.

Now that the workflow got so much faster and more streamlined, this particular thing imposes itself as the next productivity bottleneck. Often we cannot copy everything over.

#13

Definitely! It’s something we’ve always wanted to do but it hasn’t been within reach without “forcing it” and getting in the way / cluttering the code paths. It’s been hard to reach some of those possibilities because the “element” itself has always been the least common denominator of data. We have not been able to safely just pick elements apart. As part of these smaller cycles (4.1, 4.2, 4.2, etc.) we’ve got quite a bit of refactoring happening to move us closer to those realities. Here’s where we are heading:

  • Under the hood we’ve created a new distinction of how data is managed called “components”. Examples of components are: Toggles, Effects, Backgrounds, Modal, Off Canvas, Dropdown.
  • This means we have finally unlocked the capacity to copy one the toggle settings (or any of the above) between elements of different types.
  • There’s still quite a bit of retooling that would be needed in the Inspector itself to support all this in a natural fashion, but we might start off with adding a low level copy/paste tool inside the dev console. That would likely be the first time you can move a toggle for example from one element to another.
  • We are also actively moving towards the ability to inspect multiple elements at once. If the elements share similar controls our goal is that the inspector would allow adjusting all the selected elements at once.
  • Once we get closer to multiple inspection we’ll come back to copy/pasting individual controls.

Many of the under the hood changes are also motivated by improving overall performance and making data more accessible for the new generated CSS system we’re building which is at the heart of the responsive styling update. I don’t have an ETA on when the actual UI mechanics will be available, but each successive release we do greatly reduces the friction to getting there.

3 Likes