Puck 0.18: ??? React ??? ??? ??!

??? ?????? ?????! React? ?? ?? ??? ???? Puck? CSS Grid ? Flexbox? ???? ???? ???? ??? ? ?? ??? ?? ?? 0.18? ??????. ?? ?? ??? ?? ? ?? ?? ??????? ?? ?? ?? ??? ???? ?? ? ????.

Puck?? GitHub?? ??? ???! ?

? ??????? ?? ?? ??? ???? ???? ???? ?? ???? ?? ??? ??? ?? ? ????. ???? ??????:

?? ???? ??? ???? ??? ??? ? ?? ?? ?? ???? ?? ? ????. ? ?? ???? ???. ??? ??? ??? ?????!

? 0.18? ??? ??? ????. ?? ???? ???? ? ??? ???? ?????. ??? ??? ?? ???? ?? ?? ??? ?? ?? ???? ??? ???? ??? ????? ?? ?? ??? ?? ???? ?????. ????, ?? ???, ????? ????? ?????. React ????? ????? Puck? ?? ??? ? ????.

?? ??? ???????.

(??? ??? ?? ??? ?? ? ?? ??? ?????.)

? 0.18? ????

????? ????! ? ????? ??:

npm install @measured/puck --save

?? ????? ??:

npm update @measured/puck

??? ??? ??? ?? ??? ??? ?????! ?

?? ?? ??? ? ??

??? ??? ? ?? ??? ???? ??? ??????. ?? ???? ?? ??? ??? ?? ??? ???? ??? ?????. DropZoneAPI? ?? ? ????? ????? ?? ?? ?? ??? ???????.

?? ????? ??? ???? ???? ??? ? ?????. Puck? ???? ??? ???? ?????.

??? ?????. Puck ???? ?? DropZone? ??? ?? Flexbox? ??? ?????.

  Grid: {
    //... fields configuration
    render: ({ columns }) => (
     <dropzone zone="my-grid"><p>This transforms the DropZone's div into a CSS grid, ensuring automatic alignment.  The same applies to flex containers.</p>

<h3>Advanced CSS Layouts</h3>

Previously, all Puck components were wrapped in a div, hindering direct descendant treatment within CSS grid or flex layouts.  The new `inline` parameter removes this wrapper, enabling expected behavior for rules like `flex-grow` or `grid-column`.

For example, create a customizable card grid using `grid-column` and `grid-row`:

```javascript
Card: {
  //... fields configuration
  inline: true, // Remove default wrapper
  render: ({ spanRow, spanCol, puck }) => {
    return (
      <div>
      </div>
    );
  },
};

???? ??? ??? ???? ??? ????? ??? ? ????.

?? Flex ??????? ???? ??? ????? ?????.

?? ?? ?? ??? ????? ??? ??? ???????.

DropZone ? ???

?? DropZone ???? ?? ?? ??? ??????! ???? ???? ??? ??? ???? ???? ???????. ?? ?? ?? ?? ??, ??? ?? ?? ?? ?? ?? ?? ????? ???? ??? ? ????.

(???? ??? ?? DropZone? allow prop? ?????.)

?? DropZone ??

DropZone? ?? ??? ?? ??? ???? ???? ??? ??? ?? ??? ?????. ??? ????? ????? ? DropZone? ?? ??? ??(minEmptyHeight)? ?????.

npm install @measured/puck --save

???? ???? ???? ?? ??

?? ??? ??? ? ?? ?? ??? ?? ?? ??(????)? ???? ??? ? ????.

0.18?? ? ?? ??? ?????!

• ???? ????? ???? ??? ???(cmd/ctrl i).
• ?? ???? "?? ??" ??.
• ? ?? ? ??? ?? ?? ?????? position: fixed? ??????.
• ??? ??? ?? ??? <ActionBar.Label> ????.

? ??? ????? ????? ??? ?????!

??? ??

? 0.18? ????? ?????. ???? ???? ??? ??????! ???? ???? ???? Discord, Bluesky ? X?? ??? ?????. ??? ???? ? GitHub??! ??? ??? ????? ???! ?

? ??? React? ??? ? ?? ??: Puck 8 ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!