Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix previews for blocks using InnerBlocks #15561

Merged
merged 2 commits into from
May 16, 2019
Merged

Fix previews for blocks using InnerBlocks #15561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9946176
Fix previews for blocks using InnerBlocks
youknowriad May 10, 2019
4f9b35f
Reset the editor's padding when previewing
youknowriad May 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
/**
* External dependencies
*/
import { noop } from 'lodash';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import { Disabled } from '@wordpress/components';
import { withSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import BlockEdit from '../block-edit';
import BlockEditorProvider from '../provider';
import BlockList from '../block-list';

/**
* Block Preview Component: It renders a preview given a block name and attributes.
Expand All @@ -31,18 +28,22 @@ function BlockPreview( props ) {
);
}

export function BlockPreviewContent( { name, attributes } ) {
const block = createBlock( name, attributes );
export function BlockPreviewContent( { name, attributes, innerBlocks, settings } ) {
const block = createBlock( name, attributes, innerBlocks );
return (
<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
<BlockEdit
name={ name }
focus={ false }
attributes={ block.attributes }
setAttributes={ noop }
/>
<BlockEditorProvider
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's neat ❤️

value={ [ block ] }
settings={ settings }
>
<BlockList />
</BlockEditorProvider>
</Disabled>
);
}

export default BlockPreview;
export default withSelect( ( select ) => {
return {
settings: select( 'core/block-editor' ).getSettings(),
};
} )( BlockPreview );
11 changes: 11 additions & 0 deletions packages/block-editor/src/components/block-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,17 @@
}
}

.block-editor-block-preview__content {
// Resetting the block editor paddings and margins
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that's not the ideal fix as I think by default the block editor shouldn't have paddings and margins but It's not easy to reset without big implications. I'm fixing it for the preview right now.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jasmussen or @kjellr - any suggestions on how to approach it nicer? I'm fine with the proposal myself but I know little about proper CSS :)

.block-editor-block-list__layout,
.block-editor-block-list__block {
padding: 0;
}
.editor-block-list__block-edit [data-block] {
margin-top: 0;
}
}

.block-editor-block-preview__title {
margin-bottom: 10px;
color: $dark-gray-300;
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/block-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ function BlockStyles( {
name,
attributes,
type,
block,
onSwitch = noop,
onHoverClassName = noop,
} ) {
Expand Down Expand Up @@ -129,6 +130,7 @@ function BlockStyles( {
...attributes,
className: styleClassName,
} }
innerBlocks={ block.innerBlocks }
/>
</div>
<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
Expand All @@ -149,6 +151,7 @@ export default compose( [
const blockType = getBlockType( block.name );

return {
block,
name: block.name,
attributes: block.attributes,
className: block.attributes.className || '',
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ export class BlockSwitcher extends Component {
<BlockPreview
name={ blocks[ 0 ].name }
attributes={ { ...blocks[ 0 ].attributes, className: hoveredClassName } }
innerBlocks={ blocks[ 0 ].innerBlocks }
/>
}
</>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ export default compose(
} ),
withViewportMatch( { isLargeViewport: 'medium' } ),
withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' );
const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
getdave marked this conversation as resolved.
Show resolved Hide resolved
return {
isCollapsed: isCollapsed || ! isLargeViewport || (
! getEditorSettings().hasFixedToolbar &&
! getSettings().hasFixedToolbar &&
getBlockRootClientId( clientId )
),
};
Expand Down