first commit
This commit is contained in:
commit
d33d7cf983
13
block.json
Normal file
13
block.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"apiVersion": 2,
|
||||
"name": "custom/meet-the-team",
|
||||
"title": "Meet The Team",
|
||||
"category": "widgets",
|
||||
"icon": "groups",
|
||||
"description": "Custom block to display your team section with transitions and effects.",
|
||||
"editorScript": "file:./build/index.js",
|
||||
"style": "file:./style.css",
|
||||
"supports": {
|
||||
"html": false
|
||||
}
|
||||
}
|
||||
15
meet-the-team-block.php
Normal file
15
meet-the-team-block.php
Normal file
@ -0,0 +1,15 @@
|
||||
<?php
|
||||
/**
|
||||
* Plugin Name: Meet The Team Block
|
||||
* Description: A custom Gutenberg block to display your team members.
|
||||
* Version: 1.0.0
|
||||
* Author: Your Name
|
||||
*/
|
||||
|
||||
defined( 'ABSPATH' ) || exit;
|
||||
|
||||
function meet_the_team_block_init() {
|
||||
// Automatically loads block.json, editorScript, and style
|
||||
register_block_type( __DIR__ );
|
||||
}
|
||||
add_action( 'init', 'meet_the_team_block_init' );
|
||||
20359
package-lock.json
generated
Normal file
20359
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
package.json
Normal file
18
package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "meet-the-team-block",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@wordpress/babel-preset-default": "^8.25.0",
|
||||
"@wordpress/scripts": "^30.18.0"
|
||||
}
|
||||
}
|
||||
20
src/edit.js
Normal file
20
src/edit.js
Normal file
@ -0,0 +1,20 @@
|
||||
export default function Edit() {
|
||||
return (
|
||||
<section style={{ padding: '2rem', backgroundColor: '#fff' }}>
|
||||
<h2 style={{ fontSize: '2rem', fontWeight: 'bold' }}>Meet The Team</h2>
|
||||
<p>We’re an award-winning team with a passion for architecture.</p>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', marginTop: '1rem' }}>
|
||||
<div style={{ width: '200px' }}>
|
||||
<img src="https://via.placeholder.com/200" alt="Phil Martinez" style={{ width: '100%' }} />
|
||||
<h4>Phil Martinez</h4>
|
||||
<p>CEO, Founder</p>
|
||||
</div>
|
||||
<div style={{ width: '200px' }}>
|
||||
<img src="https://via.placeholder.com/200" alt="Alex Smith" style={{ width: '100%' }} />
|
||||
<h4>Alex Smith</h4>
|
||||
<p>CFO, Partner</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
76
src/index.js
Normal file
76
src/index.js
Normal file
@ -0,0 +1,76 @@
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
registerBlockType('custom/meet-the-team', {
|
||||
title: 'Meet The Team Section',
|
||||
icon: 'groups',
|
||||
category: 'widgets',
|
||||
edit() {
|
||||
const blockProps = useBlockProps({ className: 'meet-the-team-section bg-white py-16 px-6 md:px-12' });
|
||||
|
||||
return (
|
||||
<section {...blockProps}>
|
||||
<div className="max-w-screen-xl mx-auto flex flex-col lg:flex-row gap-10 relative">
|
||||
<div className="w-full lg:w-1/3 space-y-6 lg:sticky lg:top-16 self-start" data-aos="fade-up" data-aos-duration="1000" data-rellax-speed="-2">
|
||||
<h2 className="text-4xl font-semibold leading-tight">Meet The Team</h2>
|
||||
<p className="text-base text-gray-700">
|
||||
We're an award-winning multidisciplinary team based in Philadelphia with a passion for creating innovative architecture.
|
||||
</p>
|
||||
<p className="text-base text-gray-700">
|
||||
Associate Kara Cohen, Office Manager Justin Klein, Designer Andy Morris
|
||||
</p>
|
||||
<blockquote className="border-l-4 pl-4 italic text-gray-600 mt-8">
|
||||
"Alex was there every step of the way and brought my vision further than I could have imagined!"
|
||||
<div className="flex items-center gap-4 mt-4">
|
||||
<div className="w-12 h-12 bg-cover bg-center rounded-full" style={{ backgroundImage: "url('https://adhsite.space/uitest/wp-content/uploads/2021/11/linkedin-sales-solutions-pAtA8xe_iVM-unsplash.jpg')" }}></div>
|
||||
<div>
|
||||
<div className="font-semibold">Josh Margolis</div>
|
||||
<div className="text-sm text-gray-500">Founder of DAF</div>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
{/* Team Members Section Editable */}
|
||||
<div className="w-full lg:w-2/3 flex flex-col gap-10">
|
||||
<InnerBlocks
|
||||
allowedBlocks={['core/group', 'core/image', 'core/heading', 'core/paragraph']}
|
||||
templateLock={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
},
|
||||
save() {
|
||||
const blockProps = useBlockProps.save({ className: 'meet-the-team-section bg-white py-16 px-6 md:px-12' });
|
||||
return (
|
||||
<section {...blockProps}>
|
||||
<div className="max-w-screen-xl mx-auto flex flex-col lg:flex-row gap-10 relative">
|
||||
<div className="w-full lg:w-1/3 space-y-6 lg:sticky lg:top-16 self-start">
|
||||
<h2 className="text-4xl font-semibold leading-tight">Meet The Team</h2>
|
||||
<p className="text-base text-gray-700">
|
||||
We're an award-winning multidisciplinary team based in Philadelphia with a passion for creating innovative architecture.
|
||||
</p>
|
||||
<p className="text-base text-gray-700">
|
||||
Associate Kara Cohen, Office Manager Justin Klein, Designer Andy Morris
|
||||
</p>
|
||||
<blockquote className="border-l-4 pl-4 italic text-gray-600 mt-8">
|
||||
"Alex was there every step of the way and brought my vision further than I could have imagined!"
|
||||
<div className="flex items-center gap-4 mt-4">
|
||||
<div className="w-12 h-12 bg-cover bg-center rounded-full" style={{ backgroundImage: "url('https://adhsite.space/uitest/wp-content/uploads/2021/11/linkedin-sales-solutions-pAtA8xe_iVM-unsplash.jpg')" }}></div>
|
||||
<div>
|
||||
<div className="font-semibold">Josh Margolis</div>
|
||||
<div className="text-sm text-gray-500">Founder of DAF</div>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div className="w-full lg:w-2/3 flex flex-col gap-10">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
20
src/save.js
Normal file
20
src/save.js
Normal file
@ -0,0 +1,20 @@
|
||||
export default function Save() {
|
||||
return (
|
||||
<section style={{ padding: '2rem', backgroundColor: '#fff' }}>
|
||||
<h2 style={{ fontSize: '2rem', fontWeight: 'bold' }}>Meet The Team</h2>
|
||||
<p>We’re an award-winning team with a passion for architecture.</p>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', marginTop: '1rem' }}>
|
||||
<div style={{ width: '200px' }}>
|
||||
<img src="https://via.placeholder.com/200" alt="Phil Martinez" style={{ width: '100%' }} />
|
||||
<h4>Phil Martinez</h4>
|
||||
<p>CEO, Founder</p>
|
||||
</div>
|
||||
<div style={{ width: '200px' }}>
|
||||
<img src="https://via.placeholder.com/200" alt="Alex Smith" style={{ width: '100%' }} />
|
||||
<h4>Alex Smith</h4>
|
||||
<p>CFO, Partner</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
11
src/style.css
Normal file
11
src/style.css
Normal file
@ -0,0 +1,11 @@
|
||||
.meet-the-team-section {
|
||||
padding: 4rem 2rem;
|
||||
background-color: white;
|
||||
}
|
||||
.meet-the-team-section h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.meet-the-team-section p {
|
||||
color: #4B5563;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user