-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inserter: Add a visual placeholder at the position where the block is going to be inserted #835
Conversation
editor/actions.js
Outdated
}; | ||
} | ||
|
||
export function setBlockToInsert( slug, after ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I scratched my head a little bit on what this name implied :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please give me a better name. I know naming in this PR particularly is really bad. Naming this state is not easy :P. I scratched my head to find these names.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe setBlockInsertionPoint
or something like that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need an "insert block" and a "set block to insert" action?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When we hover the inserter block, we need to show the placeholder right after the selected block. I guess we don't really need the exact slug of the block to be inserted, right now, we just need to know that we're going to insert a block but I thought this information could be useful in the state.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we are only talking about the temporary blue line, I think we should call that setInsertionPoint
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's do that and remove the "slug" completely from the state.
editor/state.js
Outdated
@@ -279,6 +279,22 @@ export function hoveredBlock( state = null, action ) { | |||
} | |||
|
|||
/** | |||
* Reducer returning the block slug to be inserter. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
type: "inserted"
editor/modes/visual-editor/block.js
Outdated
@@ -229,6 +232,7 @@ export default connect( | |||
block: getBlock( state, ownProps.uid ), | |||
isSelected: isBlockSelected( state, ownProps.uid ), | |||
isHovered: isBlockHovered( state, ownProps.uid ), | |||
isInsertionPoint: isBlockBeforeInsertPoint( state, ownProps.uid ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe we should create a new element at the block insertion point, otherwise the insertion point will be determined by the specificities of the block-before-insertion-point. Example: if the block is a wide image, the blue line will be full width.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point
4865398
to
9b5541a
Compare
I love this. Thank you for working on it. Can't wait for the blue line to also work after the block that's currently focused. |
@jasmussen I rebased since the other ticket got merged so it should already work |
Nice, yes, works now! Does the element exist in the flow of the dom or is it overlaid? If the former, it'd be nice if the line itself actually got a little margin. It's okay that it has to push things around a bit. Is this possible or very difficult? |
It's an element that exits in the dom. I think it shouldn't push things around though (It's absolute positioned to avoid this), because if you use the inserter at the bottom of the editor, you'll notice a jump in the inserter when you hover a block to insert. |
If there's no objection I'm keen to merge this soon |
If there are no code concerns, visually it's in a good place! 👍 |
undefined, | ||
( state ) => { | ||
return { | ||
selectedBlock: getSelectedBlock( state ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems to me that the inserter should have no knowledge of what block is selected. The inserter, in a way, only cares about inserting a block and dispatching the "show insertion point". Once we process the insert action the app would know the selected block internally and handle that aspect. What are your thoughts there?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you suggesting we trigger the insertBlock
action here without specifying the position where we'll insert the block (see after
argument in onInsertBlock
)?
I guess this is possible, but this complexifies the blocks.order
reducer a lot, because we'll need to be aware of the insertedBlock
sub-reducer value inside the blocks.order
reducer to find the right position. Which means we can't use combineReducers
utility.
I think we shouldn't introduce this complexity in the state and instead have all the required information to process the insert in the INSERT action.
… going to be inserted
660bd11
to
c1fed33
Compare
Merging, I'll address any concern separately. |
If I'm not wrong, this PR removed also the hover/focus style on the inserter menu items that used |
I will open a separate ticket with designs for hover and focus styles for our various UI components. then we can apply this across the UI from a single source of best practices. |
@afercia I made this change because it's explicitly shown as is the mockups of the issue. Let's fix this separately though |
Sure. Maybe the screenshots were just a bit outdated/unrelated. Thanks. |
closes #833
This is not completely functional, because each time we click the inserter, the block is unselected which is not the desired behaviour and should be fixed by #827Anyway, this is adding the placeholder at the end of the editor right now.