Puck 0.18: New drag-and-drop engine

With native support for CSS grid and flexbox,

TLDR

• 
  New drag-and-drop engine: Multi-dimensional drag-and-drop across any CSS layout to create a sophisticated page building experience. when empty.


• 
  Toggle interactive hotkey: Make your components interactive in Preview mode with the cmd+i hotkey.


• 
  Parent selector: A new action allows you to quickly select the component's parent directly from the action bar.


• 
  No more position: fixed: We've removed this pesky style from the default layout so it's easier to embed in your app.


• 
  New ActionBar.Label component: Create sections in your action bar with the new at or
  
  
  

  See the and

  
  
  

  
  
  
  Dragging between nested DropZones
  

  
  
  

  The new engine makes it possible to drag between nested DropZones, which resolves one of the longest standing limitations of Puck's drag-and-drop experience.

  
  
  

  when empty.
  
  

  
  
  
  
  

  CODE Kopieren

  <DropZone
  
    zone="my-content"
  
    minEmptyHeight={256} // The DropZone will grow to 256px when empty
  
  />
  
  

  
  
  
  
  
  
  
  

  component enables you to to label areas within a custom ActionBar:
  
  

  
  
  
  
  

  CODE Kopieren

  <ActionBar>
  
    <ActionBar.Label label="Label 1" />
  
    <ActionBar.Group>
  
      <ActionBar.Label label="Label 2" />
  
      <ActionBar.Action>★</ActionBar.Action>
  
    </ActionBar.Group>
  
  </ActionBar>
  
  

  
  
  
  
  
  
  
  
  
  

  
  
  
  Toggle interactive hotkey
  

  
  
  

  Make your components interactive directly within Preview mode with the cmd+i (or ctrl+i on Windows) hotkey.

  
  
  

  This can be programatically set via the new )



• add ActionBar.Label component for adding labels to action bars ()


• add meta+i hotkey and previewMode state to toggle interactivity ()


• control empty DropZone height with minEmptyHeight prop ()


• forward the ref to the DropZone component ()


• reduce DropZone to height of items unless empty ()


• support inline Drawers, deprecating unnecessary props ()


• improve heading-analyzer reliability ()


• prevent propagation of custom ActionBar actions by default ()


• render DropZones the same in Puck and Render ()


• select new item when dispatching duplicate action ()


• stop actions from overflowing outside left of frame ()

Contributors

Thanks to our contributors and sponsors for making this huge milestone possible. New contributors:

• @1benw made their first contribution in .
  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen