Style clean up (#141)

* remove db and data center options * Allow adding svg * fix icon size attribute * tighten up site archive page * change background on current site * clean up site view styles * tighten up spacing * update more menu to allow changing the icon * update style and settings on more menu block * update single site template
Automattic · Jun 13, 2024 · 4c0de6b · 4c0de6b
1 parent 8ed0771
commit 4c0de6b
Show file tree

Hide file tree

Showing 31 changed files with 321 additions and 219 deletions.
diff --git a/plugin/admin/init.php b/plugin/admin/init.php
@@ -351,3 +351,31 @@ function wpcloud_admin_options_controller(): void {
 		settings_errors( 'wpcloud_messages' );
 		require_once  plugin_dir_path(__FILE__) . 'options.php';
 }
+
+// Allow SVG
+add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
+  $filetype = wp_check_filetype( $filename, $mimes );
+
+  return [
+      'ext'             => $filetype['ext'],
+      'type'            => $filetype['type'],
+      'proper_filename' => $data['proper_filename']
+  ];
+
+}, 10, 4 );
+
+function cc_mime_types( $mimes ){
+  $mimes['svg'] = 'image/svg+xml';
+  return $mimes;
+}
+add_filter( 'upload_mimes', 'cc_mime_types' );
+
+function fix_svg() {
+  echo '<style type="text/css">
+        .attachment-266x266, .thumbnail img {
+             width: 100% !important;
+             height: auto !important;
+        }
+        </style>';
+}
+//add_action( 'admin_head', 'fix_svg' );
diff --git a/plugin/blocks/src/components/controls/iconSelect.js b/plugin/blocks/src/components/controls/iconSelect.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+
+import * as icons from '@wordpress/icons';
+
+const iconOptions = Object.keys(icons).map((key) =>
+	key === 'Icon' ? { label: '', key: '' } : { label: key, value: key }
+);
+
+export default function( { attributes, setAttributes } ) {
+	const { icon } = attributes;
+
+	return (
+		<SelectControl
+			label="Icon"
+			value={ icon }
+			options={ iconOptions }
+			onChange={ ( newVal ) => {
+				setAttributes( { icon: newVal } );
+			} }
+		/>
+	);
+}
diff --git a/plugin/blocks/src/components/form-input/edit.js b/plugin/blocks/src/components/form-input/edit.js
@@ -195,7 +195,7 @@ function InputFieldBlock( { attributes, setAttributes, className, context, clien
 							}
 							data-empty={ label ? false : true }
 						/>
-						<InnerBlocks allowedBlocks={ [ 'core/paragraph', 'core/heading', 'wpcloud/icon', 'wpcloud/button', 'wpcloud/expanding-section' ] } />
+						<InnerBlocks allowedBlocks={ [ 'core/paragraph', 'core/heading', 'wpcloud/icon', 'wpcloud/button', 'wpcloud/expanding-section', 'core/group', 'wpcloud/more-menu'] } />
 					</span>
 				)}
 				{ displayAsToggle && ( <span className="toggle-container"></span> ) }

diff --git a/plugin/blocks/src/components/form-input/style.scss b/plugin/blocks/src/components/form-input/style.scss
@@ -25,6 +25,7 @@ input.is-toggle:checked + label .toggle-container::after {
 }
 input.is-toggle:checked + label .toggle-container {
   background-color: var(--wp--preset--color--accent-primary, #7983ff );
+  border: none;
 }
 
 input.is-toggle {

diff --git a/plugin/blocks/src/components/icon/block.json b/plugin/blocks/src/components/icon/block.json
@@ -22,8 +22,8 @@
 			"default": "wordpress"
 		},
 		"size": {
-			"type": "integer",
-			"default": 24
+			"type": "string",
+			"default": "24"
 		}
 	}
 }
diff --git a/plugin/blocks/src/components/icon/edit.js b/plugin/blocks/src/components/icon/edit.js
@@ -9,37 +9,29 @@ import classNames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
-	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
+import { PanelBody,TextControl } from '@wordpress/components';
 import * as icons from '@wordpress/icons';
 
 const Icon = icons.Icon;
 
-const iconOptions = Object.keys( icons ).map( ( key ) =>
-	key === 'Icon' ? { label: '', key: '' } : { label: key, value: key }
-);
 
 /**
  *
  * Internal dependencies
  */
+
+import IconSelect from '../controls/iconSelect.js';
+
 export default function ( { attributes, setAttributes, className } ) {
 	const { icon, size } = attributes;
 	const blockProps = useBlockProps();
 
 	const controls = (
 		<InspectorControls>
 			<PanelBody label={ __( 'Settings' ) }>
-				<SelectControl
-					label={ __( 'Icon' ) }
-					value={ icon }
-					options={ iconOptions }
-					onChange={ ( newVal ) => {
-						setAttributes( { icon: newVal } );
-					} }
-				/>
+				<IconSelect { ...{ attributes, setAttributes } } />
 				<TextControl
 					label={ __( 'size' ) }
 					value={ size }

diff --git a/plugin/blocks/src/components/more-menu/block.json b/plugin/blocks/src/components/more-menu/block.json
@@ -18,6 +18,14 @@
 		"showMenu": {
 			"type": "boolean",
 			"default": false
+		},
+		"icon":{
+			"type": "string",
+			"default": "moreVertical"
+		},
+		"position":{
+			"type": "string",
+			"default": "right"
 		}
 	}
 }
diff --git a/plugin/blocks/src/components/more-menu/edit.js b/plugin/blocks/src/components/more-menu/edit.js
@@ -13,14 +13,15 @@ import {
 	InspectorControls,
 	InnerBlocks,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
-import { Icon, moreVertical } from '@wordpress/icons';
+import { ToggleControl, PanelBody, SelectControl } from '@wordpress/components';
+import * as icons from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
-
+const Icon = icons.Icon;
 /**
  * Internal dependencies
  */
+import IconSelect from '../controls/iconSelect.js';
 import './editor.scss';
 
 /**
@@ -37,7 +38,7 @@ export default function Edit( {
 	clientId,
 	isSelected
 } ) {
-	const { showMenu } = attributes;
+	const { showMenu, icon, position } = attributes;
 	const blockProps = useBlockProps();
 
 	const isChildSelected = useSelect( ( select ) =>
@@ -56,7 +57,8 @@ export default function Edit( {
 
 	const controls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Form Settings' ) }>
+			<PanelBody title={__('Form Settings')}>
+				<IconSelect { ...{ attributes, setAttributes } } />
 				<ToggleControl
 					label={ __( 'Show Menu' ) }
 					checked={ showMenu }
@@ -66,10 +68,25 @@ export default function Edit( {
 						} );
 					} }
 				/>
+				<SelectControl
+					label={__('Position')}
+					value={position}
+					options={[
+						{ label: 'Left', value: 'left' },
+						{ label: 'Right', value: 'right' },
+					] }
+					onChange={(newVal) => {
+						setAttributes({ position: newVal });
+					}}
+					hint={__('Select the position of the menu')}
+				/>
+
 			</PanelBody>
 		</InspectorControls>
 	);
 
+	const positionCss = position === 'left' ? { right: 0} : {left: 0};
+
 	return (
 		<>
 			{controls}
@@ -79,16 +96,16 @@ export default function Edit( {
 					'wpcloud-more-menu-wrapper'
 				) }
 			>
-					<button
+					<div
 						className="wpcloud-more-menu__button"
 						onClick={ () => {
 							setAttributes( {
 								showMenu: true,
 							} );
 						} }
 					>
-						<Icon icon={ moreVertical } />
-					</button>
+						<Icon icon={ icons[icon] } />
+					</div>
 					<div
 						{ ...innerBlocksProps }
 						className={ classNames(
@@ -98,7 +115,8 @@ export default function Edit( {
 							{
 								'hide-menu': ! showMenu,
 							}
-						) }
+						)}
+					style={positionCss}
 					/>
 			</div>
 		</>

diff --git a/plugin/blocks/src/components/more-menu/editor.scss b/plugin/blocks/src/components/more-menu/editor.scss
@@ -1,7 +1,7 @@
 
 .wpcloud-more-menu-wrapper {
 	position: relative;
-	button {
+	.wpcloud-more-menu__button {
 		border: none;
 		background: none;
 		color: var(--wp--preset--color--foreground-secondary);
@@ -22,11 +22,15 @@
 	&.hide-menu {
 		display: none;
 	}
+	width: fit-content;
 	min-width: 180px;
 	background-color: var(--wp--preset--color--background-secondary, #FFFFFF );
 	.wpcloud-site-list-menu__title {
 		text-align: center;
 	}
+	p {
+		max-width: 360px;
+	}
 }
 
 .wpcloud-more-menu__row {

diff --git a/plugin/blocks/src/components/more-menu/save.js b/plugin/blocks/src/components/more-menu/save.js
@@ -7,10 +7,13 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
-import { Icon, moreVertical } from '@wordpress/icons';
+import * as icons from '@wordpress/icons';
+const { Icon } = icons;
 
-export default function save() {
+export default function save({ attributes }) {
+	const { icon, position } = attributes;
 	const blockProps = useBlockProps.save();
+	const positionCss = position == 'left' ? {right: 0} : {left: 0};
 	return (
 		<div
 			{ ...blockProps }
@@ -20,9 +23,12 @@ export default function save() {
 			) }
 		>
 			<button className="wpcloud-more-menu__button">
-				<Icon icon={ moreVertical } />
+				<Icon icon={ icons[icon] } />
 			</button>
-			<nav className="wpcloud-more-menu__nav is-closed">
+			<nav
+				className="wpcloud-more-menu__nav is-closed"
+				style={ positionCss }
+			>
 				<InnerBlocks.Content />
 			</nav>
 		</div>

diff --git a/plugin/blocks/src/components/site-card/render.php b/plugin/blocks/src/components/site-card/render.php
@@ -8,14 +8,23 @@
 	return;
 }
 
+
+
 // @TODO get real site thumbnail
 $site_thumbnail = wpcloud_station_get_assets_url( '/images/Gravatar_filled_' . get_the_ID() % 5 . '.png' );
 
 $wrapper = 'div';
 $classNames = $attributes['className'] ?? '';
+$post_in_loop_id = get_the_ID();
+$post_id = get_queried_object_id();
+if ( $post_in_loop_id === $post_id ) {
+	$classNames .= ' is-current';
+}
+
 
 $wrapper_attributes = $wrapper . ' ' .  get_block_wrapper_attributes( array( 'class' => trim( $classNames ) ) );
-$domain = wpcloud_get_site_detail( get_the_ID(), 'domain_name' );
+
+$domain = wpcloud_get_site_detail( $post_in_loop_id, 'domain_name' );
 if (is_wp_error($domain)) {
 	error_log('Error getting domain name: ' . $domain->get_error_message());
 	$domain = '';

diff --git a/plugin/custom-post-types/wpcloud-site.php b/plugin/custom-post-types/wpcloud-site.php
@@ -648,6 +648,11 @@ function wpcloud_should_refresh_detail( string $key ): bool {
 
 	return in_array( $key, $refresh_keys, true );
 }
+
+/**
+ * Get the current site ID.
+ * @return int The site ID.
+ */
 function wpcloud_get_current_site_id(): int {
 	$post_id = get_the_ID();
 	if ( ! $post_id ) {

diff --git a/plugin/includes/class-wpcloud-site.php b/plugin/includes/class-wpcloud-site.php
@@ -115,7 +115,7 @@ public static function get_detail_options(): array {
 			'wp_version' => __( 'WP Version' ),
 			'php_version' => __( 'PHP Version' ),
 			'static_file_404' => __( 'Static File 404' ),
-			'db_pass' => __( 'DB Password' ),
+			// 'db_pass' => __( 'DB Password' ),
 			'db_charset' => __( 'DB Charset' ),
 			'db_collate' => __( 'DB Collate' ),
 			'cache_prefix' => __( 'Cache Prefix' ),
@@ -160,24 +160,28 @@ public static function get_meta_options(): array {
 				'default' => 'utf8mb4',
 				'hint' => '',
 				],
+
 			"db_collate" => [
 				'type' => 'select',
 				'options' => [ "latin1_swedish_ci" => "latin1_swedish_ci", "utf8_general_ci" => "utf8_general_ci", "utf8mb4_unicode_ci" => "utf8mb4_unicode_ci" ],
 				'default' => 'utf8mb4_unicode_ci',
 				'hint' => '',
 				],
+
 			"suspended" => [
 				'type' => 'select',
 				'options' => ["404" => __("404 - Not Found "), "410" => __( "410 - Gone" ), "451" => __( "451 - Unavailable For Legal Reasons" ), "480" => __( "480 - Temporarily Unavailable" ) ],
 				'default' => '480',
 				'hint' => __('Suspends a site. The value is the HTTP 4xx status code the site will respond with. The supported statuses are "404", "410", "451", and "480".'),
 				],
+
 			"suspend_after" => [
 				'type' => 'text',
 				'options' => null,
 				'default' => false,
 				'hint' => __( 'Suspends a site after a specified time. The value is a unix Timestamp.' ),
 				],
+
 			"php_version" => [
 				'type' => 'select',
 				'options' => wpcloud_client_php_versions_available(),
@@ -217,13 +221,6 @@ public static function get_meta_options(): array {
 				'hint' => __( 'Facilitates protection of site assets. May be set to "wp_uploads" to block logged-out requests for WP uploads. If set, an AT_PRIVACY_MODEL constant will be defined in the PHP environment. Use the "site-wordpress-version" endpoint to set "wp_version".' )
 				],
 
-			"geo_affinity" =>  [
-				'type' => 'select',
-				'options' => wpcloud_client_data_centers_available(),
-				'default' => '',
-				'hint' => __('Sets the sites geo affinity.'),
-				],
-
 			"static_file_404" => [
 				'type' => 'select',
 				'options' => [ "lightweight" => __( 'Lightweight' ), "wordpress" => __( 'WordPress' )],

diff --git a/plugin/includes/wpcloud-client.php b/plugin/includes/wpcloud-client.php
@@ -556,7 +556,6 @@ function wpcloud_client_site_meta_keys(): array {
 		"max_space_quota" => __( 'Max Space Quota (Gigabytes)' ),
 		"photon_subsizes" => __( 'Photon Subsizes' ),
 		"privacy_model" => __( 'Privacy Model' ),
-		"geo_affinity" => __( 'Geo Affinity' ),
 		"static_file_404" => __( 'Static File 404' ),
 		"default_php_conns" => __( 'Default PHP Connections' ),
 		"burst_php_conns" => __( 'Burst PHP Connections' ),