Update gallery default columns for desktop and add tooltips

Author: ravichdev

plugin/assets/src/block-editor/blocks/image-list/block.json

@@ -66,7 +66,7 @@
 		"columns": {
 		   "type": "object",
 		   "default": {
-				"desktop": 4,
+				"desktop": 5,
 				"tablet": 3,
 				"mobile": 1
 		 	}

plugin/assets/src/block-editor/components/layout-controls/index.js

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { BaseControl, RangeControl } from '@wordpress/components';
+import { BaseControl, RangeControl, Tooltip } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -59,15 +59,16 @@ export default ( {
 				{ label }
 				<div className="components-base-control__label-actions components-base-control__layout-controls">
 					{ DEVICES.map( device => (
-						<button
-							key={ device.name }
-							className={ classNames( '', {
-								'is-selected': device.name === selectedDevice,
-							} ) }
-							onClick={ () => setSelectedDevice( device.name ) }
-						>
-							<i className="material-icons">{ device.icon }</i>
-						</button>
+						<Tooltip text={ device.label } key={ device.name }>
+							<button
+								className={ classNames( '', {
+									'is-selected': device.name === selectedDevice,
+								} ) }
+								onClick={ () => setSelectedDevice( device.name ) }
+							>
+								<i className="material-icons">{ device.icon }</i>
+							</button>
+						</Tooltip>
 					) ) }
 				</div>
 			</BaseControl.VisualLabel>

plugin/assets/src/block-editor/constants.js

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 const NAMESPACE = '/wp/v2';
 export const ENDPOINTS = {
 	root: NAMESPACE,
@@ -24,13 +29,16 @@ export const DEVICES = [
 	{
 		name: 'desktop',
 		icon: 'computer',
+		label: __( 'Layout Settings for Desktop', 'material-design' ),
 	},
 	{
 		name: 'tablet',
 		icon: 'tablet',
+		label: __( 'Layout Settings for Tablet', 'material-design' ),
 	},
 	{
 		name: 'mobile',
 		icon: 'smartphone',
+		label: __( 'Layout Settings for Mobile', 'material-design' ),
 	},
 ];