GB 2.0 Make Container Shape block more discernible

[diggeddy]

Description

Currently there is no way to distinguish a Container Shape vs an ordinary Shape. A simple fix would be to change the icon of the Container Shape and perhaps make its Label: Container Shape

Here is the SVG code for a new Container Shape Icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="gblocks-block-icon" aria-hidden="true" focusable="false"><path d="M22,21.375c0,0.345 -0.28,0.625 -0.625,0.625l-3.75,0l0,-1.25l3.125,0l0,-3.125l1.25,0l0,3.75Zm-7.187,0.625l-5.625,0l0,-1.25l5.625,0l0,1.25Zm-11.563,-1.25l3.125,0l0,1.25l-3.75,0c-0.343,0 -0.625,-0.282 -0.625,-0.625l0,-3.75l1.25,0l0,3.125Zm0,-5.938l-1.25,0l0,-5.625l1.25,0l0,5.625Zm18.75,0l-1.25,0l0,-5.625l1.25,0l0,5.625Zm-15.625,-11.562l-3.125,0l0,3.125l-1.25,0l0,-3.75c0,-0.345 0.28,-0.625 0.625,-0.625l3.75,0l0,1.25Zm11.25,-1.25l3.75,0c0.345,0 0.625,0.28 0.625,0.625l0,3.75l-1.25,0l0,-3.125l-3.125,0l0,-1.25Zm-2.812,1.25l-5.625,0l0,-1.25l5.625,0l0,1.25Z" style="fill-opacity:0.31;fill-rule:nonzero;"/><rect x="12.362" y="4.762" width="6.877" height="6.877" style="fill-rule:nonzero;"/><path d="M8.244,19.238l-0.088,0l-0.045,-0.001l-0.044,-0.001l-0.044,-0.002l-0.044,-0.003l-0.043,-0.003l-0.044,-0.003l-0.087,-0.009l-0.043,-0.005l-0.043,-0.006l-0.043,-0.006l-0.084,-0.014l-0.085,-0.017l-0.083,-0.018l-0.083,-0.02l-0.082,-0.022l-0.081,-0.024l-0.081,-0.026l-0.079,-0.028l-0.078,-0.03l-0.078,-0.032l-0.077,-0.034l-0.076,-0.035l-0.074,-0.037l-0.073,-0.039l-0.073,-0.041l-0.071,-0.042l-0.071,-0.044l-0.069,-0.045l-0.068,-0.047l-0.067,-0.049l-0.066,-0.051l-0.064,-0.051l-0.063,-0.053l-0.061,-0.055l-0.061,-0.056l-0.059,-0.058l-0.058,-0.059l-0.056,-0.061l-0.055,-0.061l-0.053,-0.063l-0.051,-0.064l-0.051,-0.066l-0.049,-0.067l-0.047,-0.068l-0.045,-0.069l-0.044,-0.071l-0.042,-0.071l-0.041,-0.073l-0.039,-0.073l-0.037,-0.074l-0.035,-0.076l-0.034,-0.077l-0.032,-0.078l-0.03,-0.078l-0.028,-0.079l-0.026,-0.081l-0.024,-0.081l-0.022,-0.082l-0.02,-0.083l-0.018,-0.083l-0.017,-0.085l-0.014,-0.084l-0.006,-0.043l-0.006,-0.043l-0.005,-0.043l-0.009,-0.087l-0.003,-0.044l-0.003,-0.043l-0.003,-0.044l-0.002,-0.044l-0.001,-0.044l-0.001,-0.045l0,-0.088l0.001,-0.045l0.001,-0.043l0.002,-0.044l0.003,-0.045l0.003,-0.043l0.003,-0.043l0.005,-0.044l0.004,-0.043l0.005,-0.044l0.006,-0.042l0.006,-0.043l0.014,-0.085l0.017,-0.085l0.018,-0.083l0.02,-0.083l0.022,-0.082l0.024,-0.081l0.026,-0.08l0.028,-0.08l0.03,-0.078l0.032,-0.077l0.034,-0.077l0.035,-0.076l0.037,-0.075l0.039,-0.073l0.041,-0.073l0.042,-0.071l0.044,-0.07l0.045,-0.07l0.047,-0.068l0.049,-0.066l0.051,-0.066l0.051,-0.065l0.053,-0.063l0.055,-0.061l0.056,-0.061l0.058,-0.058l0.059,-0.058l0.061,-0.056l0.061,-0.055l0.063,-0.054l0.064,-0.051l0.066,-0.051l0.067,-0.048l0.068,-0.047l0.069,-0.046l0.071,-0.044l0.071,-0.042l0.073,-0.041l0.073,-0.039l0.074,-0.037l0.076,-0.035l0.077,-0.033l0.078,-0.032l0.078,-0.031l0.079,-0.027l0.081,-0.026l0.081,-0.025l0.082,-0.021l0.083,-0.021l0.083,-0.018l0.085,-0.017l0.084,-0.013l0.043,-0.007l0.043,-0.006l0.043,-0.005l0.087,-0.008l0.044,-0.004l0.043,-0.003l0.044,-0.003l0.044,-0.002l0.044,-0.001l0.045,-0.001l0.088,0l0.045,0.001l0.043,0.001l0.044,0.002l0.045,0.003l0.043,0.003l0.043,0.004l0.087,0.008l0.044,0.005l0.042,0.006l0.043,0.007l0.085,0.013l0.085,0.017l0.083,0.018l0.083,0.021l0.082,0.021l0.081,0.025l0.08,0.026l0.08,0.027l0.078,0.031l0.077,0.032l0.077,0.033l0.076,0.035l0.075,0.037l0.073,0.039l0.073,0.041l0.071,0.042l0.07,0.044l0.07,0.046l0.068,0.047l0.066,0.048l0.066,0.051l0.065,0.051l0.063,0.054l0.061,0.055l0.061,0.056l0.058,0.058l0.058,0.058l0.056,0.061l0.055,0.061l0.054,0.063l0.051,0.065l0.051,0.066l0.048,0.066l0.047,0.068l0.046,0.07l0.044,0.07l0.042,0.071l0.041,0.073l0.039,0.073l0.037,0.075l0.035,0.076l0.033,0.077l0.032,0.077l0.031,0.078l0.027,0.08l0.026,0.08l0.025,0.081l0.021,0.082l0.021,0.083l0.018,0.083l0.017,0.085l0.013,0.085l0.007,0.043l0.006,0.042l0.005,0.044l0.008,0.087l0.004,0.043l0.003,0.043l0.003,0.045l0.002,0.044l0.001,0.043l0.001,0.045l0,0.088l-0.001,0.045l-0.001,0.044l-0.002,0.044l-0.003,0.044l-0.003,0.043l-0.004,0.044l-0.004,0.043l-0.004,0.044l-0.005,0.043l-0.006,0.043l-0.007,0.043l-0.013,0.084l-0.017,0.085l-0.018,0.083l-0.021,0.083l-0.021,0.082l-0.025,0.081l-0.026,0.081l-0.027,0.079l-0.031,0.078l-0.032,0.078l-0.033,0.077l-0.035,0.076l-0.037,0.074l-0.039,0.073l-0.041,0.073l-0.042,0.071l-0.044,0.071l-0.046,0.069l-0.047,0.068l-0.048,0.067l-0.051,0.066l-0.051,0.064l-0.054,0.063l-0.055,0.061l-0.056,0.061l-0.058,0.059l-0.058,0.058l-0.061,0.056l-0.061,0.055l-0.063,0.053l-0.065,0.051l-0.066,0.051l-0.066,0.049l-0.068,0.047l-0.07,0.045l-0.07,0.044l-0.071,0.042l-0.073,0.041l-0.073,0.039l-0.075,0.037l-0.076,0.035l-0.077,0.034l-0.077,0.032l-0.078,0.03l-0.08,0.028l-0.08,0.026l-0.081,0.024l-0.082,0.022l-0.083,0.02l-0.083,0.018l-0.085,0.017l-0.085,0.014l-0.043,0.006l-0.042,0.006l-0.044,0.005l-0.087,0.009l-0.043,0.003l-0.043,0.003l-0.045,0.003l-0.044,0.002l-0.043,0.001l-0.045,0.001Z"/><path d="M19.238,14.081l-1.719,1.719l1.719,1.719l-1.719,1.719l-1.719,-1.719l-1.719,1.719l-1.719,-1.719l1.719,-1.719l-1.719,-1.719l1.719,-1.719l1.719,1.719l1.719,-1.719l1.719,1.719Z"/><path d="M9.059,6.481c0.86,1.719 1.72,3.438 2.579,5.157l-6.876,0l3.438,-6.876l0.859,1.719Z" style="fill-rule:nonzero;"/></svg>

And for visual reference the new icon is the last in the list:

[tomusborne]

@diggeddy We would need some way to tell it's a Container shape vs a regular shape. I suppose we could check the class name?

[tomusborne]

Not sure about that icon.

[diggeddy]

Me neither lol Ill have a think. So the Container Shape isn't a variant ? Do we like the logic we used here? - it concerns me that the one block has 2 different outcomes depending on how / where it was added

[tomusborne]

Well it's just the Shape block with different styles. I don't think it makes sense to have a completely different block just to have different styles.

We can target it via class name (we already do this to open the library to the dividers), and change the block label/icon.