WordPress（文字出版社） · 塔尔丹 · 2020年6月25日 · 2020年6月10日 · 2020年6月10日 · 2020年6月15日
diff --git a/软件包/块编辑器/src/components/block-draggable/index.js b/软件包/块编辑器/src/components/block-draggable/index.js
@@ -4,8 +4,42 @@
 从“@wordpress/components”导入{Draggable}；
 从“@wordpress/data”导入{useSelect，useDispatch}；
 从“@wordpress/element”导入{useEffect，useRef}；
+从“@wordpress/dom”导入{getScrollContainer}；
 
-const BlockDraggable=（{children，clientIds，cloneClassname}）=>{
+常量SCROLL_INACTIVE_DISTANCE_PX=50；
+常量SCROLL_INTERVAL_MS=25；
+常量PIXELS_PER_SECOND_PER_DISTANCE=5；
+恒速_多功能=
+像素_PER_SECOND_PER_DISTANCE*（SCROLL_INTERVAL_MS/1000）；
+
+函数startScrollingY（nodeRef，velocityRef）{
+return setInterval（（）=>{
+if（节点引用当前&&velocityRef.current）{
+const newTop=nodeRef.current.scrollTop+velocityRef.curren；
+
+节点参考当前滚动（{
+顶部：newTop，
+//行为：“平滑”//似乎会影响性能，最好使用较小的滚动间隔
+} );
+}
+}，SCROLL_INTERVAL_MS）；
+}
+
+函数getVerticalScrollParent（节点）{
+if（节点===空）{
+返回null；
+}
+
+return getScrollContainer（节点）；
+}
+
+const BlockDraggable=（{
+儿童，
+客户端ID，
+克隆类名称，
+在DragStart上，
+在DragEnd上，
+} ) => {
 const{srcRootClientId，索引，isDraggable}=useSelect(
 （选择）=>{
 常数{
@@-30,6+64,14@@const BlockDraggable=（{children，clientIds，cloneClassname}）=>{
 [客户端ID]
 );
 const isDragging=useRef（false）；
+
+//@todo-为水平滚动执行此操作
+const dragStartY=useRef（空）；
+constvelocityY=useRef（空）；
+const scrollParentY=useRef（空）；
+
+const scrollEditorInterval=useRef（null）；
+
 const{startDraggingBlocks，stopDragging Blocks}=使用调度(
 '核心/块编辑器'
 );
@@-40,6+82,11@@const BlockDraggable=（{children，clientIds，cloneClassname}）=>{
 if（是Dragging.current）{
 stopDraggingBlocks（）；
 }
+
+if（scrollEditorInterval.current）{
+clearInterval（scrollEditorInterval.current）；
+scrollEditorInterval.current=null；
+}
 };
 }, [] );
 
@@-60,13+107,51@@const BlockDraggable=（｛children，clientIds，cloneClassname｝）=>{
 cloneClassname={cloneClassname}
 elementId={blockElementId}
 传输数据={transferData}
-onDragStart={（）=>{
+onDragStart={(事件) => {
 startDraggingBlocks（）；
 isDragging.current=true；
+dragStartY.current=事件客户端Y；
+
+//查找要滚动的最近父项
+scrollParentY.current=getVerticalScrollParent(
+document.getElementById（块元素Id）
+);
+scrollEditorInterval.current=startScrollingY(
+滚动家长Y，
+速度Y
+);
+if（onDragStart）{
+onDragStart（）；
+}
+} }
+onDragOver={（事件）=>{
+const distanceY=事件客户端Y-拖动开始Y.current；
+if（距离Y>SCROLL_INACTIVE_DISTANCE_PX）{
+速度Y电流=
+速度_综合*
+（距离Y-SCROLL_INACTIVE_DISTANCE_PX）；
+}else if（距离Y<-SCROLL_INACTIVE_DISTANCE_PX）{
+速度Y电流=
+速度_综合*
+（距离Y+SCROLL_INACTIVE_DISTANCE_PX）；
+}其他{
+速度Y.current=0；
+}
 } }
 onDragEnd={（）=>{
 stopDraggingBlocks（）；
 isDragging.current=false；
+dragStartY.current=null；
+scrollParentY.current=null；
+
+if（scrollEditorInterval.current）{
+clearInterval（scrollEditorInterval.current）；
+scrollEditorInterval.current=null；
+}
+
+if（onDragEnd）{
+onDragEnd（）；
+}
 } }
 >
 {（{onDraggableStart，onDraggableEnd}）=>{

diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
@@-39,7+39,10@@函数块上下文工具栏（{focusOnMount，…props}）{
 aria-label={__（“块工具”）}
 {…道具}
 >
-＜区块工具栏/＞
+<块工具栏
+onDragStart={props.onDragStart}
+onDragEnd=｛props.onDragEnd｝
+/>
 </NavigableToolbar>
 </div>
 );

diff --git a/packages/block-editor/src/components/block-list/block-poover.js b/packages/block-editor/src/components/block-list/block-poover.js
@@-31,6+31,7@@功能选择器（选择）{
 是带格式文本的插入符号，
 获取设置，
 获取最后一个MultiSelectedBlockClientId，
+是拖动块，
 }=选择（'核心/块编辑器'）；
 返回{
 isNavigationMode:isNavigation模式（），
@@-40,6+41,7@@功能选择器（选择）{
 hasMultiSelection：hasMulti Selection（），
 hasFixedToolbar:getSettings（）.hasFixed工具栏，
 lastClientId:getLastMultiSelectedBlockClientId（），
+isDragging:isDragingBlocks（），
 };
 }
 
@@-60,6+62,7@@函数块弹出（{
 具有MultiSelection，
 has固定工具栏，
 lastClientId，
+正在拖动，
 }=使用Select（选择器，[]）；
 const isLargeViewport=useViewportMatch（'medium'）；
 const[isToolbarForced，setIsToolbarForzed]=使用状态（false）；
@@-96,7+99,8@@函数块弹出（{
 ! 应该显示面包屑&&
 ! 应显示上下文工具栏&&
 ! 是工具栏强制&&
-! 显示空块侧插入器
+! 显示空块侧面插入器&&
+! 正在拖动
 ) {
 返回null；
 }
@@-136,6+140,14@@功能块Popover（{
 setIsInserterShown（假）；
 }
 
+函数onDragStart（）{
+setIsToolbarForced（true）；
+}
+
+函数onDragEnd（）{
+setIsToolbarForced（假）；
+}
+
 //定位在锚的上方，向右弹出，定位在
 //左角。对于侧插入器，向左弹出，然后
 //位置在右角。
@@-165,8+177,10@@函数块弹出（{
 onBlur={（）=>设置IsToolbarForced（false）}
 应锚包括衬垫
 //Popover计算一次宽度。通过重新安装触发重置
-//组件。
-key={shouldShowContextualToolbar}
+//组件。我们包括shouldShowContextualToolbar和isToolbarForced
+//键中，以防止在isToolbarForced=true时意外卸载组件，
+//例如，在拖放过程中
+key={shouldShowContextualToolbar||isToolbarForced}
 >
 {（shouldShowContextualToolbar ||isToolbarForced）&&(
 <迪夫
@@-198,6+212.8@@函数块弹出（{
 //它应该将工具栏的焦点放在挂载之后。
 focusOnMount={isToolbarForced}
 数据对齐={align}
+onDragStart={onDragStart}
+onDragEnd={onDragEnd}
 />
 ) }
 {应显示面包屑（&S）(

diff --git a/包/组件/src/draggable/README.md b/包/组件/src/draggable/README.md
@@-24,15+24,23@@附加到拖放事件的任意数据对象。
 
 ###在DragStart上
 
-拖动开始时要调用的函数。
+拖动开始时调用的函数。此回调从“dragstart”事件接收“event”对象作为其第一个参数。
+
+-类型：`Function`
+-必需：否
+-默认值：`noop`
+
+###onDragOver上
+
+将要拖动的元素拖动到有效的拖放目标上时调用的函数。此回调从`dragover`事件接收`event`对象作为其第一个参数。
 
 -类型：`函数`
 -必需：否
 -默认值：`noop`
 
 ###在DragEnd上
 
-A函数成为拖动结束时调用。
+拖动结束时调用的函数。此回调从`dragend`事件接收`event`对象作为其第一个参数。
 
 -类型：`函数`
 -必需：否

diff --git a/包/组件/src/draggable/index.js b/包/组件/src/draggable/index.js
@@-38,7+38,11@@class可拖动扩展组件{
 event.proventDefault（）；
 
 this.resetDragState（）；
-this.props.setTimeout（onDragEnd）；
+
+//允许从异步代码访问合成事件。
+// https://reactjs.org/docs/events.html#event-联营
+event.persist（）；
+this.props.setTimeout（onDragEnd.bind（this，event））；
 }
 
 /**
@@-61,6+65,12@@class可拖动扩展组件{
 //更新光标坐标。
 this.cursorLeft=事件客户端X；
 this.cursorTop=事件客户端Y；
+
+const{onDragOver=noop}=this.props；
+
+//“onDragOver”中的“event”不是SyntheticEvent
+//因此它不需要`event.persist（）`。
+this.props.setTimeout（onDragOver.bind（this，event））；
 }
 
 /**
@@-150,7+160.10@@class可拖动扩展组件{
 document.body.classList.add（'is-dragging-components-draggable'）；
 document.addEventListener（'dragover'，this.onDragOver）；
 
-this.props.setTimeout（onDragStart）；
+//允许从异步代码访问合成事件。
+// https://reactjs.org/docs/events.html#event-联营
+event.persist（）；
+this.props.setTimeout（onDragStart.bind（this，event））；
 }
 
 /**
@@-165,6+178,9@@class可拖动扩展组件{
 this.cloneWrapper=空；
 }
 
+this.cursorLeft=空；
+this.cursorTop=空；
+
 //重置光标。
 document.body.classList.remove（'is-dragging-components-draggable'）；
 }

diff --git a/包/组件/src/draggable/style.scss b/包/组件/src/draggable/style.scss
@@-16,6+16,7@@body.is-dragging-components可拖动{
 背景：透明；
 指针-事件：无；
 z索引：z索引（“.components-draggable__clone”）；
+不透明度：0.7；
 
 > * {
 //这需要特定性，因为默认情况下主题是要定义这些内容的。