polish grid view + change to <ul>

WordPress · Nov 20, 2020 · 940e97e · 940e97e
1 parent f233734
commit 940e97e
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 36 deletions.
diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js
@@ -126,7 +126,7 @@ export default function QueryLoopEdit( {
 	}
 
 	return (
-		<div { ...blockProps }>
+		<ul { ...blockProps }>
 			{ blockContexts &&
 				blockContexts.map( ( blockContext ) => (
 					<BlockContextProvider
@@ -135,18 +135,20 @@ export default function QueryLoopEdit( {
 					>
 						{ blockContext ===
 						( activeBlockContext || blockContexts[ 0 ] ) ? (
-							<div { ...innerBlocksProps } />
+							<li { ...innerBlocksProps } />
 						) : (
-							<BlockPreview
-								blocks={ blocks }
-								__experimentalLive
-								__experimentalOnClick={ () =>
-									setActiveBlockContext( blockContext )
-								}
-							/>
+							<li>
+								<BlockPreview
+									blocks={ blocks }
+									__experimentalLive
+									__experimentalOnClick={ () =>
+										setActiveBlockContext( blockContext )
+									}
+								/>
+							</li>
 						) }
 					</BlockContextProvider>
 				) ) }
-		</div>
+		</ul>
 	);
 }
diff --git a/packages/block-library/src/query-loop/editor.scss b/packages/block-library/src/query-loop/editor.scss
@@ -1,3 +1,5 @@
-.editor-styles-wrapper .wp-block.wp-block-query-loop {
+.wp-block.wp-block-query-loop {
 	max-width: 100%;
+	padding-left: 0;
+	list-style: none;
 }
diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php
@@ -91,7 +91,7 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 		)->render( array( 'dynamic' => false ) );
 	}
 	return sprintf(
-		'<div %1$s>%2$s</div>',
+		'<ul %1$s>%2$s</ul>',
 		$wrapper_attributes,
 		$content
 	);

diff --git a/packages/block-library/src/query-loop/save.js b/packages/block-library/src/query-loop/save.js
@@ -5,8 +5,8 @@ import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function QueryLoopSave() {
 	return (
-		<div>
+		<li>
 			<InnerBlocks.Content />
-		</div>
+		</li>
 	);
 }
diff --git a/packages/block-library/src/query-loop/style.scss b/packages/block-library/src/query-loop/style.scss
@@ -1,15 +1,30 @@
 .wp-block-query-loop {
 	max-width: 100%;
+	list-style: none;
+	padding: 0;
+
+	li {
+		clear: both;
+	}
 
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;
 		flex-wrap: wrap;
 
+		li {
+			margin: 0 1.25em 1.25em 0;
+			width: 100%;
+		}
+
 		@include break-small {
 			@for $i from 2 through 6 {
-				&.is-flex-container.columns-#{ $i } > div {
-					width: calc((100% / #{$i}));
+				&.is-flex-container.columns-#{ $i } > li {
+					width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+
+					&:nth-child( #{ $i }n ) {
+						margin-right: 0;
+					}
 				}
 			}
 		}

diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js
@@ -138,33 +138,33 @@ export default function QueryInspectorControls( {
 	}, [ querySearch, onChangeDebounced ] );
 	return (
 		<InspectorControls>
-			{ layout?.type === 'flex' && (
-				<PanelBody title={ __( 'Display' ) }>
-					<RangeControl
-						label={ __( 'Columns' ) }
-						value={ layout.columns }
-						onChange={ ( value ) =>
-							setLayout( { columns: value } )
-						}
-						min={ 1 }
-						max={ Math.max( 6, layout.columns ) }
-					/>
-					{ layout.columns > 6 && (
-						<Notice status="warning" isDismissible={ false }>
-							{ __(
-								'This column count exceeds the recommended amount and may cause visual breakage.'
-							) }
-						</Notice>
-					) }
-				</PanelBody>
-			) }
 			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
 					options={ postTypesSelectOptions }
 					value={ postType }
 					label={ __( 'Post Type' ) }
 					onChange={ onPostTypeChange }
 				/>
+				{ layout?.type === 'flex' && (
+					<>
+						<RangeControl
+							label={ __( 'Columns' ) }
+							value={ layout.columns }
+							onChange={ ( value ) =>
+								setLayout( { columns: value } )
+							}
+							min={ 1 }
+							max={ Math.max( 6, layout.columns ) }
+						/>
+						{ layout.columns > 6 && (
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'This column count exceeds the recommended amount and may cause visual breakage.'
+								) }
+							</Notice>
+						) }
+					</>
+				) }
 				<QueryControls
 					{ ...{ order, orderBy } }
 					onOrderChange={ ( value ) => setQuery( { order: value } ) }